JSFiddle - React, Tailwind, and code Playground

by kevalpanchal

HTML

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

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

JavaScript

window.onload = function () {
  var clicked = false;
  var chart = new CanvasJS.Chart("chartContainer",
                                 {
    title:{
      text: "Show toolTip on click of DataPoint"
    },
    axisX: [{
          margin: 10,
          tickLength: 10,
          tickColor: "#E0E1E2",
          tickThickness: 2,
          lineThickness: 2,
          lineColor: "#E0E1E2",
          labelFontColor: '#343640',
          // intervalType: 'minute',
          labelFontFamily: "Roboto",
          labelFontSize: 12,

          labelAngle: 0,
          // valueFormatString: 'HH:mm',
        },],
        axisY: [{
          lineThickness: 2,
          tickThickness: 0,
          gridThickness: 2,
          tickLength: 10,
          labelFontFamily: "Roboto",
          labelFontSize: 12,

          labelAngle: 0,
        },],

    toolTip: {
      updated: function(e) {
      	// hide tooltip if datapoint is not clicked
        if(!clicked)
          e.chart.toolTip.hide();
      }
    },
    data: [

      {
        click: showToolTipOnClick,
        mouseout: hideToolTip,
         type: 'spline',
          showInLegend: true,
          indexLabelPlacement: 'inside',
          highlightEnabled: true,
        dataPoints: [
          { x: 1, y: 297571, label: "Venezuela", toolTipContent:"{label} +' Hello'",  cursor: 'pointer',},
          { x: 2, y: 267017,  label: "Saudi", toolTipContent:"{label}",  cursor: 'pointer',},
          { x: 3, y: 175200,  label: "Canada", toolTipContent:"{label}",  cursor: 'pointer',},
          { x: 4, y: 154580,  label: "Iran", toolTipContent:"{label}",  cursor: 'pointer',},
          { x: 5, y: 116000,  label: "Russia", toolTipContent:"{label}",  cursor: 'pointer',},
          { x: 6, y: 97800, label: "UAE", toolTipContent:"{label}",  cursor: 'pointer',},
          { x: 7, y: 20682,  label: "US", toolTipContent:"{label}",  cursor: 'pointer',},
          { x: 8, y: 20350,  label: "China", toolTipContent:"{label}",  cursor:...