JSFiddle - React, Tailwind, and code Playground

by Rishi Kumar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.js"></script>
<div style="width:75%;">
  <canvas id="chart"></canvas>
</div>

JavaScript

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{
      label: 'A',
      //yAxisID: 'A',
      data: [100, 96, 84, 76, 69]
    }, {
      label: 'B',
     // yAxisID: 'B',
      data: [1, 1, 1, 1, 0]
    }, {
      label: 'C',
      //yAxisID: 'C',
      data: [198, 370, 480, 860, 240]
    }]
  },
  options: {
  annotation: {
      annotations: [
      {
        type: 'line',
        mode: 'horizontal',
        scaleID: 'A',
        value: 68,
        borderColor: 'red',
        borderWidth: 1,
        borderDash: [10,5],
        label: {
          enabled: true,
          content: 'slo 1'
        }
      },
      {
        type: 'line',
        mode: 'horizontal',
        scaleID: 'B',
        value: 0.9,
        borderColor: 'red',
        borderWidth: 1,
        borderDash: [10,5],
        label: {
          enabled: true,
          content: 'slo 2'
        }
      },
      {
        type: 'line',
        mode: 'horizontal',
        scaleID: 'C',
        value: 800,
        borderColor: 'red',
        borderWidth: 1,
        borderDash: [10,5],
        label: {
          enabled: true,
          content: 'slo 1'
        }
      }]
    },
    scales: {
      yAxes: [
    {
          id: 'A',
          type: 'linear',
          position: 'left',
          scaleLabel: {
          display: true,
          labelString: 'units'
        }
      }, {
        id: 'B',
        type: 'linear',
        position: 'right',
        ticks: {
          max: 1,
          min: 0
        },
        scaleLabel: {
        display: true,
        labelString: 'right1'
      }
      },
      {
        id: 'C',
        type: 'linear',
        position: 'right',
        ticks: {
          max: 1000,
          min: 100
        },scaleLabel: {
        display: true,
        labelString: 'right2'
      }
      }]
    }
  }
});