Search code examples
chartsannotationschart.js

Chart Js Annotation plugin doesn't show but no error


tried to copy other solutions but doesn't work. Chart shows but without annotation lines. Showing my code below. Really appreciate your attention Integrated on base.html

<script src="path/to/chartjs/dist/chart.min.js"></script>
<script src="path/to/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.min.js"></script>

On another page after extending base.html:

<script>

  // jquery function
  $(document).ready(function(){
    const ctx = document.getElementById('myChart');

    const labels = [{% for item in query_set%}'{{item.analysis_date}}',{% endfor %}];

    const data = {
      labels: labels,
      datasets: [
      //Если добавить еще один - будет сдвоенный график
        {
          label: '{{analysis_info.a_name}} - {{analysis_info.a_measur}}',
          data: [{% for item in query_set%}'{{item.analysis_data}}',{% endfor %}],
          borderColor: 'rgb(75, 192, 192)',
          borderWidth: 4,
          
        },
      ]
    };

    const options = {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
            min: 0
          }
        }]
      },
      animation: {
            duration: 1500,
        },
      plugins: {
        autocolors: false,
        annotation: {
          annotations: {
            box1: {
              // Indicates the type of annotation
              type: 'line',
              yMin: 10,
              yMax: 10,
              backgroundColor: 'rgba(255, 99, 132, 0.25)'
            }
          }
        }
      }
    }
    const config = {
      type: 'line',
      data,
      options,
      };

    const chart = new Chart(ctx, config);

  });
</script>
{% endblock scripts %}

But no reaction

I'm sure that solution is easy but i got stucked


Solution

  • As you repeorted in the comment, "imported via source libs/Chart.js/2.8.0/Chart.min.js libs/chartjs-plugin-annotation/2.1.0", you are using 2 not compatible versions.

    See Redame of plugin repo: https://github.com/chartjs/chartjs-plugin-annotation#readme

    An annotation plugin for Chart.js >= 3.7.0
    
    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