Chartjs-Chart.js line from annotations plugin is not appearing

by

0👍

✅

If anyone runs into this issue in the future, the solution that I stumbled upon was to go to node_modules > @types > chart.js > index.d.ts and put the line annotation?: Object; in the interface ChartOptions section around line 217. Then I restructured the code like this…

let massPopChart = new Chart(this.myChart, {
    type: 'bubble',
    data: {
        labels:['Jobs']
    },
    options: {
        plugins:{
            colorschemes: {
                scheme: 'brewer.YlOrBr9'
            }
        }, legend: {
            display: false
        }, title: {
           display: true,
           text: 'Location Quotient of Jobs in Region'
        }, annotation: {
                annotations: [{
                    type: 'line',
                    mode: 'vertical',
                    scaleID: 'y-axis-0',
                    value: 1,
                    borderColor: 'red',
                    borderWidth: 5,
                    label: {
                        enabled: false,
                        content: 'Test label'
                    }
               }]
            }, scales: {
            yAxes: [{ 
                scaleLabel: {
                    display: true,
                    labelString: "# of Jobs"
               }
           }],
                xAxes: [{ 
                scaleLabel: {
                    display: true,
                    labelString: "LQ"
                }
            }]
        }
    }
});

With the ‘annotation’ section moved from the ‘plugins:’ section and to the general ‘options’ section.

Leave a comment