Chartjs-Chart JS – Horizontal Bar Chart Not Filling Canvas

by

1👍

✅

You can use max value for ticks and it will set same maximum value for all charts. Here is an updated JSFiddle.

base_options.options.scales.xAxes[0].ticks.max = max;

const base_options = {
    type: 'horizontalBar',
    data: {
        labels: [],
        datasets: [
            {
                backgroundColor: [],
                data: [],
            }
        ],
    },
    options: {
        responsive: true,
        title: { display: false },
        legend: { display: false },
        layout: {
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
            },
        },
        scales: {
            xAxes: [
                {
                    display: false,
                    stacked: true,

                }
            ],
            yAxes: [
                {
                    display: false,
                    stacked: true,
                    ticks: {
                        max: max
                    }
                },
            ],
        },
        events: ['mousemove'],
        onHover: (event, chartElement) => {
            event.target.style.cursor = chartElement && chartElement[0] ? 'pointer' : 'default';
        },
        tooltips: {
            filter: (tooltipItem) => {
                return tooltipItem.datasetIndex === 0;
            },
        },
    },
};

-1👍

Just remove the categoryPercentage and add the below code

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

}

Leave a comment