Tuesday, 9 July 2019

Chart JS - Horizontal Bar Chart Not Filling Canvas

I have a list of stacked, horizontal bar charts that I want to all be the same width.

Each canvas is the same width, and each chart uses the same config (with different data sets, of course).

I've tested a lot of different configuration options, from barPercentage, to categoryPercentage, to setting fullWidth on the Y-Axis.

What am I missing?

this.chartConfig = {
    type: 'horizontalBar',
    data: {
        labels: this.labels,
        datasets: [
            {
                backgroundColor: this.colors,
                data: this.data,
            },
            highlight_dataset,
        ],
    },
    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,
                    beforeFit: (scaleInstance: any) => {
                        scaleInstance.fullWidth = true;
                    },
                },
            ],
        },
        events: ['mousemove'],
        onHover: (event: any, chartElement: any) => {
            event.target.style.cursor = chartElement && chartElement[0] ? 'pointer' : 'default';
        },
        tooltips: {
            filter: (tooltipItem: any) => {
                return tooltipItem.datasetIndex === 0;
            },
        },
    },
};

enter image description here



from Chart JS - Horizontal Bar Chart Not Filling Canvas

No comments:

Post a Comment