Как регулировать отступ между лейблами и графиками?

Question

Как регулировать отступ между лейблами и графиками? показано цифрой 0

var color = Chart.helpers.color
var barChartData = {
  labels: ['2021', '2031', '2035', '2044', '2038'],
  datasets: [{
    label: 'title 1',
    backgroundColor: '#4fc3f7',
    data: [58, 5, 42, 50, 55, 45],
  }, {
    label: 'title 2',
    backgroundColor: '#ae52d4',
    data: [45, 45, 25, 55, 44, 95],
  }]
};

window.onload = function() {
  var firstdiagram = document.getElementById('generation').getContext('2d');

  window.myBar = new Chart(firstdiagram, {
    type: 'bar',
    data: barChartData,
    options: {
      categoryPercentage: 1,
      responsive: true,
      plugins: {
        legend: {
          position: 'top',
          align: 'start',
          labels: {
            boxWidth: 12,
            boxHeight: 12,
            font: {
              family: 'Roboto',
              size: 14
            },
            layout: {
              padding: {
                bottom: 50
              }
            }
          },
        }
      },
     
      tooltips: {
        mode: 'x-axis',
      },
    }
  });
};

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<canvas id="generation"></canvas>

Answer 1

Похоже, что тут только плагином к chart.js можно решить задачу.

Ниже пример инлайн-плагина, который добавляет частичную поддержку объектного параметра padding в неймспейс options.plugins.legend конфигурации... Частичную - потому что тут поддерживаются только right и bottom паддинги (я не смог заставить изменяться параметры top и left объекта легенды, их изменение не имеет эффекта: ни до, ни после вызова оригинального метода update):

var color = Chart.helpers.color
var barChartData = {
  labels: ['2021', '2031', '2035', '2044', '2038'],
  datasets: [{
    label: 'title 1',
    backgroundColor: '#4fc3f7',
    data: [58, 5, 42, 50, 55, 45],
  }, {
    label: 'title 2',
    backgroundColor: '#ae52d4',
    data: [45, 45, 25, 55, 44, 95],
  }]
};

window.onload = function() {
  var firstdiagram = document.getElementById('generation').getContext('2d');

  window.myBar = new Chart(firstdiagram, {
    type: 'bar',
    data: barChartData,
    options: {
      categoryPercentage: 1,
      responsive: true,
      plugins: {
        legend: {
          position: 'top',
          align: 'start',
          labels: {
            boxWidth: 12,
            boxHeight: 12,
            font: {
              family: 'Roboto',
              size: 14
            },
          },
          padding: { bottom: 30 },  // ◄◄◄
        },
      },
      tooltips: {
        mode: 'x-axis',
      },
    },
    plugins: [                    // ▼▼▼
      {
        afterInit(chart) {
          chart.legend._update = chart.legend.update;
          chart.legend.update = function (...args) {
            this._update(...args);
            const padding = { ...(this.options.padding || {}) };
            this.height += Math.max(0, ~~padding.bottom);
            this.width += Math.max(0, ~~padding.right);
            // this.top += Math.max(0, ~~padding.top);    // не работает :(
            // this.left += Math.max(0, ~~padding.left);  // не работает :(
          };
        },
      },
    ],
  });
};

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<canvas id="generation"></canvas>

Советую еще и в интернете поискать подобные плагины в виде библиотек, т.к. возможно что кто-то уже реализовал и выложил более полное решение (с поддержкой верхнего и левого отступов). В первую очередь, стоит посмотреть в npm и на github.

// Вообще, помню что раньше делал такое без плагина - просто костылем через паддинги заголовка легенды, поместив его в одну строку с метками... но сейчас в документации посмотрел и не нашел параметра для того чтобы сделать заголовок легенды строчным (то ли этот параметр удалили в новых версиях chart.js, то ли я банально перепутал библиотеки).

БЛОГ НА HUSL

Как регулировать отступ между лейблами и графиками?

Ответы (1 шт):