Chartjs-Chart js in an especific label

by

0👍

✅

Solution using chartjs-plugin-annotation (https://github.com/chartjs/chartjs-plugin-annotation)

var date_label = ['8:00', '9:00', '10:00', '11:00', '00:00', '01:00', '02:00', '03:00', '4:00'];
var data_to_grafic = [{
  label: "My First dataset",
  backgroundColor: '#ddd',
  borderColor: '#f00',
  fill: false,
  data: [0, 0, 15000, 35000, 10000, 36000, 0, 0, 0, 0]
}];
var graffic = new Chart(document.getElementById("graffic").getContext('2d'),{
  type: 'line',
  data: {
    labels: date_label,
    fill: false,
    datasets: data_to_grafic
  },
  options: {
    title: {
      position: 'top',
      display: true,
      text: 'My Title'
    },
    annotation: {
      annotations: [{
        type: "line",
        mode: "vertical",
        scaleID: "x-axis-0",
        value: "00:00",
        borderColor: "red",
        borderWidth: 2
      }]
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'HRS'
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        },
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'BPS'
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.js"></script>
<canvas id="graffic"></canvas>

Leave a comment