Chartjs-Chart.Js – Hightligh an area in the background

0👍

Resolved using the plugin Chart.Js Annotation – enter link description here

config = {
    type: 'bar',
    data: {
        labels: [],
        datasets: [{
            data: [],
            borderWidth: 0,
            borderColor:'#E16972',
            fill: true,
            backgroundColor: "#E16972",
            order: 1
        }]
    },
    options: {
        animation: {
            duration: false, //remove animation
        },
        responsive: true,
        tooltips: {
            enabled: false
        },
        title: {
            display: false
        },
        legend: {
            display: false
        },
        elements: {
            point:{
                radius: 0
            }
        },
        scales: {
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'PSD (Hz/s²)'
                },
                ticks: {
                    beginAtZero: true,
                    suggestedMax: 0.2
                }
            }],
            xAxes: [{
                display: false,
            },
            {
                gridLines : {
                    display : false
                },
                scaleLabel: {
                    display: false
                },
                type: 'linear',
                ticks: {
                    beginAtZero: true,
                    autoSkip: false,
                    min: 0,
                    max: 0.5,
                    stepSize: 0.1,
                }
            }]
        },
        annotation: {
            drawTime: 'beforeDatasetsDraw',
            annotations: [{
                type: 'box',
                xScaleID: 'x-axis-1',
                yScaleID: 'y-axis-1',
                xMin: 0.5,
                xMax: 0.15,
                yMin: 0,
                backgroundColor: 'rgba(195,207,221, 0.5)',
                borderColor: 'rgba(195,207,221, 0.5)',
            }]
        }
    }
}

Leave a comment