Chart js 2 как установить ширину полосы

Я использую Chart js version: 2.1.4, и я не могу ограничить ширину полосы. Я нашел две опции в stackoverflow

barPercentage: 0.5

или

categorySpacing: 0

но ни одна из них не работает с указанной версией. Есть ли способ решить эту проблему без ручной модификации основной библиотеки chart.js?

спасибо

Ответ 1

Вы были правы: атрибут, который вы должны изменить, barPercentage.

Но, возможно, ошибка возникает из , где, вы отредактировали значение.

Как вы можете видеть в параметры диаграммы диаграммы:

Имя: barPercentage
- Тип: Номер
- По умолчанию: 0.9
- Описание: Процент (0-1) доступной ширины каждого бара должен находиться в пределах категории. 1.0 возьмет всю ширину категории и положит бары рядом друг с другом. Подробнее

Атрибут фактически хранится в таблице scales.xAxes ( "Параметры для xAxes" ).

Итак, вам просто нужно изменить диаграмму следующим образом:

var options = {
    scales: {
        xAxes: [{
            barPercentage: 0.4
        }]
    }
}

Вот полный рабочий пример с пользовательской шириной (0.2) для панели:

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        backgroundColor: "rgba(75,192,192,0.4)",
        borderColor: "rgba(75,192,192,1)",
        data: [65, 59, 75, 81, 56, 55, 40],
    }]
};

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            xAxes: [{
                // Change here
            	barPercentage: 0.2
            }]
        }
    }
});

console.log(myChart);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<canvas id="myChart"></canvas>

Ответ 2

Начиная с v2.7.2 это может быть сделано:

scales: {
  xAxes: [{
    maxBarThickness: 100,
  }],
}

Ответ 3

Для версии 2. 8+ (и, видимо, еще в 2.2), теперь есть несколько отличных элементов управления толщиной стержня, максимальной толщиной и т.д.

Согласно документации Chart.js, вы должны установить их так:

{
    type: 'bar', // or 'horizontalBar'
    data: ...,
    options: {
        scales: {
            xAxes: [{
                barThickness: 6,  // number (pixels) or 'flex'
                maxBarThickness: 8 // number (pixels)
            }]
        }
    }
}