[Chartjs]-Chartjs does not show annotations when x axis is of type time

by

4👍

✅

It works, you only forgot to include the script tag to the plugin so the annotations plugin never got loaded in

var timeFormat = 'DD/MM/YYYY';

var config = {
  type: 'line',
  data: {
    datasets: [{
        label: "line1",
        data: [{
            x: "2015-03-15T13:03:00Z",
            y: 3000
          },
          {
            x: "2015-03-16T13:03:00Z",
            y: 3100
          },
          {
            x: "2015-03-17T13:03:00Z",
            y: 2900
          },
          {
            x: "2015-03-18T13:03:00Z",
            y: 3050
          }
        ],
        fill: false,
        borderColor: 'black'
      },
      {
        label: "line2",
        data: [{
            x: "2015-03-15T13:03:00Z",
            y: 4000
          },
          {
            x: "2015-03-16T13:03:00Z",
            y: 4100
          },
          {
            x: "2015-03-17T13:03:00Z",
            y: 4900
          },
          {
            x: "2015-03-18T13:03:00Z",
            y: 4050
          }
        ],
        fill: false,
        borderColor: 'green'
      }
    ]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: "Chart.js Time Scale"
    },
    scales: {
      xAxes: [{
        type: "time",
        time: {
          tooltipFormat: 'll'
        },
        scaleLabel: {
          display: true,
          labelString: 'Date'
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'value'
        }
      }]
    },
    annotation: {
      drawTime: 'afterDatasetsDraw',
      annotations: [{
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: '2015-03-17T13:03:00Z',
        borderColor: 'red',
        borderWidth: 1,
        label: {
          enabled: true,
          position: "top",
          content: "somelabel"
        }
      }]
    }
  }
};


var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js" crossorigin="anonymous"></script>

<div style="width:75%;">
  <canvas id="canvas" />
</div>

Leave a comment