[Chartjs]-Chartjs color the background of chart after specific values with dark grey color

by

1👍

✅

One way to go is to try using chartjs-plugin-annotation
whose version 0.5.7 should work with
chart.js version 2.x

You’d use a box annotation and a text annotation for
each band.

If your restrictions don’t even allow to use that,
and since your drawings are quite specific, you can
implement yourself a plugin to draw the bands.

The plugin should implement the method
beforeDraw, and get
hold of the drawing context and the axes through it chart
first argument. Those would very simply allow you
to draw anywhere on the canvas before the chart
is drawn:

plugins:[{
    beforeDraw(chart){
        const ctx = chart.ctx,
            xAxis = chart.scales['x-axis-0'],
            xMin = xAxis.left,
            xMax = xAxis.right,
            yAxis = chart.scales['y-axis-0'],
            y100 = yAxis.getPixelForValue(100),
            y80 = yAxis.getPixelForValue(80),
            y60 = yAxis.getPixelForValue(60);
    
        // draw with these ...........
    }
}]

Here’s a snippet implementing a possible solution:

var ctx = document.getElementById("lineChart").getContext("2d");
var chart = new Chart(ctx, {
    type: "line",
    plugins:[{
        beforeDraw(chart){
            const ctx = chart.ctx,
                xAxis = chart.scales['x-axis-0'],
                xMin = xAxis.left,
                xMax = xAxis.right,
                yAxis = chart.scales['y-axis-0'],
                y100 = yAxis.getPixelForValue(100),
                y80 = yAxis.getPixelForValue(80),
                y60 = yAxis.getPixelForValue(60);
            
            for(var [yMin, yMax, color, text] of
                [[y60, y80, 'rgba(200, 200, 200, 0.8)', 'Significant'],
                    [y80, y100, 'rgba(100, 100, 100, 0.8)', 'Severe']]){
                ctx.fillStyle = color;
                ctx.fillRect(xMin, yMin, xMax-xMin, yMax-yMin);
                ctx.fillStyle = '#fff';
                ctx.strokeStyle = 'rgba(0,0,0,0.3)';
                ctx.textAlign = 'right';
                ctx.font = Math.round(Math.min((yMax-yMin)/3, 48))+'px serif';
                ctx.textBaseline = 'middle';
                ctx.fillText(text, xMax-10,(yMax+yMin)/2)
                ctx.strokeText(text, xMax-10,(yMax+yMin)/2)
            }
        }
    }],
    data: {
        labels: [
            "",
            "Working Memory",
            "Inhibitory Control",
            "Cognitive Flexibility",
            "High Order EF",
            "",
        ],
        datasets: [
            {
                label: "Competence score in Percent",
                data: [null, 80, 65, 90, 75],
                borderColor: ["#000", "#ffdb14", "#ff0000", "#38b7fe", "#8866f9"],
                backgroundColor: [
                    "#000",
                    "#ffdb14",
                    "#ff0000",
                    "#38b7fe",
                    "#8866f9",
                ],
                fill: false,
                pointRadius: 16,
                pointHoverRadius: 8,
                pointBackgroundColor: [
                    "#000",
                    "#ffdb14",
                    "#ff0000",
                    "#38b7fe",
                    "#8866f9",
                ],
                lineTension: 0,
                borderColor: "#000",
                borderWidth: 2,
            },
        ],
    },
    options: {
        responsive: true,
        scales: {
            xAxes: [
                {
                    scaleLabel: {
                        display: true,
                        labelString: "Subtests",
                        fontSize: 24,
                    },
                    ticks: {
                        fontSize: 24,
                    },
                },
            ],
            yAxes: [
                {
                    scaleLabel: {
                        display: true,
                        labelString: "Competence score in Percent",
                        fontSize: 24,
                    },
                    ticks: {
                        beginAtZero: true,
                        min: 0,
                        max: 100,
                        stepSize: 25,
                        fontSize: 24,
                    },
                },
            ],
        },
        legend: {
            display: false,
        },
    },
});
<canvas id="lineChart" style="width:99vw; height: 99vh"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js" integrity="sha512-zO8oeHCxetPn1Hd9PdDleg5Tw1bAaP0YmNvPY8CwcRyUk7d7/+nyElmFrB6f7vg4f7Fv4sui1mcep8RIEShczg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

or jsFiddle

Leave a comment