score:1

Accepted answer

you have to provide both annotations as object in 1 array, not an array containing objects containing arrays, see example:

var ann = ["4.35", "4.29"];
var ann_labels = ["start", "stop"];
var annotations_array = ann.map(function(value, index) {
  return {
    type: 'line',
    id: 'vline' + index,
    mode: 'vertical',
    scaleid: 'x-axis-0',
    value: value,
    bordercolor: 'green',
    borderwidth: 1,
    label: {
      enabled: true,
      position: "bottom",
      content: ann_labels[index]
    }
  }
});

var ctx = document.getelementbyid('test').getcontext('2d');
var test = new chart(ctx, {
  type: 'line',
  data: {
    labels: ["1.44", "4.03", "4.35", "3.99", "3.58", "3.75", "4.29", "5.02", "5.95", "6.65"],
    datasets: [{
        data: ["1", "2", "1", "2", "1", "2", "1", "2", "1", "2"],
        yaxisid: 'a',
        backgroundcolor: [
          'rgba(91, 192, 222, 0.1)',
        ],
        bordercolor: [
          'rgba(0, 123, 255, 0.8)',
        ],
        borderwidth: 1.3,
      },
      {
        data: ["10", "11", "12", "13", "14", "15", "16", "17", ],
        yaxisid: 'b',
        backgroundcolor: [
          'rgba(255, 206, 86, 0.0)',
        ],
        bordercolor: [
          'rgba(217, 83, 79, 0.6)',
        ],
        borderwidth: 1.3,
      }
    ]
  },
  options: {
    annotation: {
      drawtime: 'afterdatasetsdraw',
      annotations: annotations_array
    },
    maintainaspectratio: true,
    scales: {
      yaxes: [{
          id: 'a',
          ticks: {
            callback: function(value, index, values) {
              return value + ' m';
            },
            reverse: true,
          }
        },
        {
          id: 'b',
          position: 'right',
          ticks: {
            callback: function(value, index, values) {
              return value + ' °c';
            },
            reverse: true,
          }
        }
      ]
    },
    elements: {
      point: {
        radius: 0,
      }
    },
    legend: {
      position: 'bottom',
      display: false,
    },
  }
});
<h3 class="card-text"><canvas id="test"></canvas></h3>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>

fiddle: https://jsfiddle.net/leelenaleee/6ltycqfh/7/


Related Query

More Query from same tag