CODEWITHSUNDEEP
chart.js
Hasan Tuncay
Hasan Tuncay

Reputation: 1108

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

I try to add some vertical red lines into my time line chart. For normal charts with categories is works but not for time axis.

<!doctype html>
<html>

<head>
    <title>Line Chart</title>
    <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.4.0/Chart.bundle.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
<div style="width:75%;">
    <canvas id="canvas"/>
</div>
<script>
    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"
                    }
                }]
            }
        }
    };

    window.onload = function () {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx, config);
    };

</script>
</body>
</html>

Upvotes: 1

Views: 1227

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31371

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>

Upvotes: 4

Related Questions