Chart.js 2.0 with vertical lines in line chart - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Line Chart

Description

Chart.js 2.0 with vertical lines in line chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>chartjs-plugin-annotation sandbox</title> 
   </head> 
   <body translate="no">   
      <div style="width: 75%"> 
         <canvas id="canvas"></canvas> 
      </div>   
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.js"></script> 
      <script src="https://cdn.rawgit.com/chartjs/Chart.js/master/samples/utils.js"></script> 
      <script>
      var chartData = {/*  ww  w. ja  va2  s . c om*/
  labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
  datasets: [
    {
      data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }
  ]
};
window.onload = function() {
  var ctx = document.getElementById("canvas").getContext("2d");
  new Chart(ctx, {
    type: "line",
    data: chartData,
    options: {
      annotation: {
        annotations: [
          {
            type: "line",
            mode: "vertical",
            scaleID: "x-axis-0",
            value: "MAR",
            borderColor: "red",
            label: {
              content: "TODAY",
              enabled: true,
              position: "top"
            }
          }
        ]
      }
    }
  });
};
      </script>  
   </body>
</html>

Related Tutorials