[Chartjs]-Background color hides Y labels

by

1👍

✅

This is because you are using the beforeDatasetsDraw callback, as you can see in this diagram chart.js draws the layers with a z index of 0 and lower first, since they are already drawn your box is drawn over it so if you change the callback from beforeDatasetsDraw to beforeDraw like so it should work:

plugins: [{
    id: '2',
    beforeDraw: function(chart: any, easing: any) {
        if (chart.chartArea) {
            var ctx = chart.ctx;
            var chartArea = chart.chartArea;
            let d = data.chart.relay;
            let e = chart.getDatasetMeta(0)
            ctx.fillStyle = '#b3ff99';

            var start!: number;
            var stop!: number;
            for (let i = 0; i < d.length; i++) {
                start = e.data[i].x
                if (d[i] && d[i + 1] === true) stop = e.data[i + 1].x
                else stop = start

                ctx.fillRect(start, chartArea.top, stop - start, chartArea.bottom - chartArea.top);
            }
        }
    }
}]

Another solution you can do is to first check if the rect is within the chart area, if it’s left side will go out use the leftside of the chartArea instead so it will never get behind or over the y labels, same for right, top and bottom

Leave a comment