vertical line annotation on horizontal bar in chart js react not showing

Question

I have a horizontal single bar chart showing percentage inside of an ag-grid row, I would like to add a line at a certain percentage to show a target. I am using the annotations plugin which is registered. I have tried several different versions of the annotation options but cannot get anything to show on the chart. Any help would be greatly appreciated :)

const options = {
    indexAxis: 'y' as const,
    responsive: true,
    scales: {
        xAxis: {
            max: 100,
            min: 0,
            display: false,
        },
        yAxis: {
            display: false,
        },
    },
    plugin: {
        annotation: {
            annotations: [
                {
                    type: 'line' as const,
                    mode: 'vertical',
                    scaleID: 'x',
                    value: 80,
                    borderColor: 'black',
                    borderWidth: 2,
                },
            ],
        },
    },
};

    const dataset = {
        labels: ['In-session utilisation (%)'],
        datasets: [
            {
                id: 1,
                label: '',
                data: [theatreUtilisation],
                backgroundColor: theme.color.accentB,
            },
        ],
    };

    return (
        <>
            <Bar data={dataset} options={options} />
        </>
    );

score 1 · Accepted Answer · answered Aug 24 '22 at 14:45

If I'm not wrong, there are some errors in chart configuration.

plugin is not the correct node name but is plugins
The plugin annotation is related to x scale which is not defined, because you defined xAxes.

Furthermore it seems you are using CHART.JS 3 but the annotation plugin version 0.x. From plugin README:

For Chart.js 3.0.0 to 3.6.2 support, use version 1.4.0 of this plugin For Chart.js 2.4.0 to 2.9.x support, use version 0.5.7 of this plugin

I have attached here a sample, fixing the config, using CHART.JS 3.9.1 and ANNOTATION 2.0.1:

const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'user 1 online',
            data: [50, 35, 45, 47, 10, 3, 27],
            backgroundColor: 'rgba(40, 139, 170, 1)',
            borderWidth: 0,
            borderSkipped: false,
        }]
    },
    options: {
      indexAxis: 'y',
      scales: {
        y: {
           display: true,
        },
        x: {
            max: 100,
            min: 0,
            display: true,
        }
      },
      plugins: {
         annotation: {
           annotations: [
             {
               type: 'line',
               scaleID: 'x',
               value: 80,
               borderColor: 'black',
               borderWidth: 2,
              },
           ],
        },
     },
   },
});

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@2.0.1/dist/chartjs-plugin-annotation.min.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

vertical line annotation on horizontal bar in chart js react not showing

1 Answers1