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

Question

var color = Chart.helpers.color;
var barChartData = {
  labels: ['2021', '2031', '2035', '2044', '2038'],
  datasets: [{
    label: 'title 1',

    borderWidth: 1,
    barPercentage: 1,
    data: [58, 5, 42, 50, 55, 45],
  }, {
    label: 'title 2',

    borderWidth: 1,
    barPercentage: 1,
    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: {
      responsive: true,
      legend: {
        position: 'top',
        align: 'start',
        labels: {
          boxWidth: 12,
          boxHeight: 12
        }
      },
      tooltips: {
        mode: 'x-axis',
      },
    }
  });
};

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="generation"></canvas>

показано цифрами 1 и 2 на скрине

Answer 1

Вам нужно свойство categoryPercentage.

Оно принимает значения 0-1 и определяет ширину, которую может занять каждая категория. По умолчанию значение равно 0.8.

В примере ниже я установил значение равным 1, чтобы между категориями не осталось отступов.

var color = Chart.helpers.color;
var barChartData = {
  labels: ['2021', '2031', '2035', '2044', '2038'],
  datasets: [{
    label: 'title 1',

    borderWidth: 1,
    barPercentage: 1,
    categoryPercentage: 1,
    data: [58, 5, 42, 50, 55, 45],
  }, {
    label: 'title 2',

    borderWidth: 1,
    barPercentage: 1,
    categoryPercentage: 1,
    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: {
      responsive: true,
      legend: {
        position: 'top',
        align: 'start',
        labels: {
          boxWidth: 12,
          boxHeight: 12
        }
      },
      tooltips: {
        mode: 'x-axis',
      },
    }
  });
};

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="generation"></canvas>

Обратите внимание, что невозможно одновременно использовать свойства barThickness и barPercentage / categoryPercentage. При использовании barThickness последние игнорируются.

Вы должны выбрать, как задавать ширину колонок: конкретным значением или в процентах от свободного места. Длина оси X, вычисляется на основании ширины родительского элемента и количества точек отмеченных на этой оси. Для соответствия какому-либо макету вам придется либо задавать конкретную ширину для canvas или блока-обертки.

Если в макете расстояние между точками неодинаковое, вам придется написать плагин для тонкой настройки отображения графика.

БЛОГ НА HUSL

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

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