JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>

JavaScript

window.onload = function () {    
  var chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2",
    axisY: {
      includeZero: true
    },
    data: [{
      color: "#00ABE7",
      dataPoints: [
        { label: "Januari", y: 110 },
        { label: "Februari", y: 152 },
        { label: "Maret", y: 180 },
        { label: "April", y: 205 },
        { label: "Mei", y: 182 },
        { label: "Juni", y: 152 },
        { label: "Juli", y: 182 },
        { label: "Agustus", y: 182 },
        { label: "September", y: 152 }
      ]
    }]
  });

  chart.render();
  addAverage(chart);
  function addAverage(chart) {
    var sum = 0, dps = [];
    for(var i = 0; i < chart.data[0].dataPoints.length; i++) {
      sum+=chart.data[0].dataPoints[i].y;
    }
    var avg = (sum/(chart.data[0].dataPoints.length+1));
    for(var i = 0; i < chart.data[0].dataPoints.length; i++) {
      dps.push({x: chart.data[0].dataPoints.x, y: avg, toolTipContent: ("Average: {y} <br/> Difference: " + Math.abs(avg - chart.data[0].dataPoints[i].y).toFixed(2)) });
    }
    chart.addTo("data", {type: "scatter", color: "#F00", dataPoints: dps});
    chart.axisY[0].addTo("stripLines", {value: avg, showOnTop: true, thickness: 2, lineDashType: "dot", color: "#F00"})
  }
}