Chartjs-Chart js stripline? like one from canvas

by

2👍

✅

This can be achieved using a ChartJS plugin called – chartjs-plugin-annotation.

ᴅᴇᴍᴏ

var canvas = document.getElementById('myChart');

var data = {
   labels: ["D", "I", "S", "C"],
   datasets: [{
      label: "Оноо",
      borderWidth: 2,
      hoverBorderColor: "grey",
      data: [40, 20, 35, 25],
      backgroundColor: [
         'rgba(231, 76, 60, 0.5)',
         'rgba(247, 220, 111, 0.5)',
         'rgba(130, 224, 170, 0.5)',
         'rgba(93, 173, 226, 0.5)',
      ],
      hoverBackgroundColor: ['rgba(231, 76, 60, 1)', 'rgba(247, 220, 111, 1)', 'rgba(130, 224, 170, 1)', 'rgba(93, 173, 226, 1)'],
   }]
};
var option = {
   scales: {
      yAxes: [{
         stacked: true,
         gridLines: {
            display: true,
            color: "rgba(255,99,132,0.2)"
         }
      }],
      xAxes: [{
         gridLines: {
            display: false
         }
      }]
   },
   annotation: {
      annotations: [{
         type: 'line',
         drawTime: 'afterDatasetsDraw',
         id: 'strip-line-1',
         mode: 'horizontal',
         scaleID: 'y-axis-0',
         value: 30,
         borderColor: 'red',
         borderWidth: 3
      }]
   }
};


var myBarChart = new Chart(canvas, {
   type: 'bar',
   data: data,
   options: option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

To learn more about this plugin and it­*’s* use-cases, refer here.

Leave a comment