chartjs-plugin-annotation box in Django app

Question

I have chartjs v2.9.3 in my Django app and it works great. Now I need to add a box to one of my charts using chartjs-plugin-annotation, and I've followed all the steps, but I can't get it to work. I've used chartjs-plugin-annotation v0.5.7 which is for v2.9.3. I get no errors in the console log. First, scripts with chart.js and plugins:

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@0.5.7/chartjs-plugin-annotation.min.js"></script>

My code for chart (chart works, I just can't get box to appear):

<canvas id="myChart" height="250"></canvas>
<script>
                function setChart12(){
                    $('#myChart').remove();
                    $('#container_glavni').append('<canvas id="myChart" height="200"></canvas>');
                    var ctx = document.getElementById('myChart').getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: date,
                            datasets: [{
                                label: 'Number of reports',
                                data: data_nc
                                }, {
                                    type: 'line',
                                    label: 'Median',
                                    data: [50],
                                    fill: false,
                                    borderColor: 'rgb(54, 162, 235)',
                                }],
                        },
                        options: {
                            layout: {
                                padding: {
                                  top: 30
                                }
                              },
                            responsive: true,
                            legend: {
                              display: false
                                       },
                            plugins: {
                                      datalabels: {
                                                anchor: 'end',
                                                align: 'end',
                                                offset: 5,
                                              },
                                      autocolors: false,
                                      annotation: {
                                        annotations: {
                                            box1: {
                                            type: 'box',
                                            xMin: 0,
                                            xMax: 1,
                                            yMin: 0,
                                            yMax: 30,
                                            backgroundColor: 'rgba(255, 99, 132, 0.25)'}
                                            }
                                        }
                                    },
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true
                                        }
                                    }]
                                }
                            }
                    });}
            </script>

I've tried:

Different values for min and max
Different colors
Different code formating

score 1 · Accepted Answer · answered Apr 11 '22 at 16:32

This is because you putted the options in the place where they belong in V1 of the annotation plugin and the syntax too. For V0.5.7 the annotation options have to be placed in the root of the options and also all the annotations are an array instead of seperate objects:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    annotation: {
      annotations: [{
        id: "hline",
        type: "line",
        mode: "horizontal",
        scaleID: "y-axis-0",
        value: 10,
        borderColor: "red",

      }]
    },
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@0.5.7/chartjs-plugin-annotation.min.js"></script>
</body>

chartjs-plugin-annotation box in Django app

1 Answers1