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/[email protected]/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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

Answer 1

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/[email protected]/chartjs-plugin-annotation.min.js"></script>
</body>