Chart JS Custom Tooltip

PHOTO EMBED

Sun Sep 24 2023 17:55:24 GMT+0000 (Coordinated Universal Time)

Saved by @sagarmaurya19

https://codepen.io/maikeldaloo/pen/MamXRm
//////////////////////---------JS
  var getChart = document.getElementById('myChart');

  if(getChart){
    function map1(){

      Chart.defaults.global.maintainAspectRatio = true;
      Chart.defaults.global.responsive = true;
      Chart.defaults.global.scaleFontSize = 17;
      Chart.defaults.global.tooltipFontFamily = '"proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif';
      Chart.defaults.global.scaleFontFamily = '"proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif';
      Chart.defaults.global.tooltipFontFamily = '"proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif';
      var data = {
        labels: ["1","5","10","15","20","25","30","35","40","45"],
        datasets: [
          {
            fillColor: "rgba(220,220,220,0)",
            strokeColor: "rgba(240,82,59,1)",
            pointColor: "rgba(240,82,59,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(240,82,59,1)",
            backgroundColor: 'rgba(240,82,59,1)',
            borderColor: 'rgba(240,82,59,1)',
            data: [10000.0, 648138.0, 1445810.0, 2243482.0, 3041154.0, 3838826.0, 4636498.0, 5434170.0, 6231842.0, 7189048.0],
            filp: true
          }
        ]
      };
      var ctx = document.getElementById("myChart").getContext("2d");
      var myLineChart = new Chart(ctx).Line(data);

    }

    map1();

  }
content_copyCOPY