Как уменьшить ширину набора данных в групповой гистограмме, в которой используется chartjs

Как уменьшить ширину набора данных в групповой гистограмме, в которой используется chartjs. На скриншоте я показал, какую ширину нужно уменьшить красной линией. Лучше, если мы сможем сделать это с помощью самого chartjs, если не другие альтернативы также приветствуются. Ссылаюсь на эту библиотеку http://www.chartjs.org/docs/latest/charts/bar.html

Красная линия показывает, какую ширину мне нужно уменьшить

Что все пробовали? Есть ошибки?

weirdpanda 10.09.2018 07:47
1
1
437
1

Ответы 1

Этот атрибут хранится на оси x, вам просто нужно настроить ось x, как показано ниже.

var options = {
    scales: {
        xAxes: [{
            categoryPercentage: 1.5
        }]
    }
}

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

var ctx = document.getElementById("barChart");
var barChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales: {
            xAxes: [{
                // Change here
                barPercentage: .5,
            	  categoryPercentage: 1.5
            }]
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="barChart"></canvas>

Другие вопросы по теме