Mark X value on line chart using Chart Js - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

Mark X value on line chart using Chart Js

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>chart.js annotation plugin (linear)</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from  ww  w  .  j  a v a  2 s.c  om
var ann = [1];
var ann_labels = ["your data"];
var annotations_array = ann.map(function(value, index) {
    return {
        type: 'line',
        id: 'vline' + index,
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: value,
        borderColor: 'red',
        borderWidth: 2,
        label: {
            enabled: true,
            position: "center",
            content: ann_labels[index]
        }
    }
});
console.log(annotations_array)
var data = [{
            x: 0,
            y: 5
         }, {
            x: 1,
            y: 6
         }, {
            x: 2,
            y: 8
         }, {
            x: 3,
            y: 9
         }];
var chart = new Chart(document.getElementById("ctx"), {
    type: 'scatter',
    data: {
        datasets: [{
            label: "Benign_Cross_Entropy",
            data: data,
            borderWidth: 2,
            showLine: true,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
        }]
    },
    options: {
        responsive: true,
        annotation: {
            drawTime: 'afterDatasetsDraw',
            annotations: annotations_array,
        },
        scales: {
          xAxes: [{
            type: 'linear',
            id: 'x-axis-0',
          }]
        }
    }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="ctx"></canvas>  
   </body>
</html>

Related Tutorials