ChartJs Horizontal line

Question

I'm working on a small React project using Chartjs. I would like to display a horizontal line to compare with the data.

I use the same code that works on CodePen : https://codepen.io/jordanwillis/pen/qrXJLW

But not working for me :

 const myChartRef = this.chartRef.current.getContext("2d");
        new Chart(myChartRef, {
            type: "line",
            data: {
                labels: this.state.chartLabels,
                datasets: [
                    {
                        label: "Quantités",
                        data: this.state.chartQt,
                    }
                ]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Chart.js Drsw Line on Chart'
                },
                tooltips: {
                    mode: 'index',
                    intersect: true
                },
                annotation: {
                    annotations: [{
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        value: 5,
                        borderColor: 'rgb(75, 192, 192)',
                        borderWidth: 4,
                        label: {
                            enabled: false,
                            content: 'Test label'
                        }
                    }]
                }
            }
        });

I have done a lot of research but I can not find what can be problematic ..

Answer 1

Your annotation is at y value:5 which is right at the bottom of your chart.

Here's a codepen with the annotation working.

I've assumed your labels looks something like this:

labels: [6,7,8,9,10,11],

and your data

data: [38, 8, 32, 25, 47,30],

and then made the annotation value:

value: 30,