chartjs - custom tooltips

chartjs - custom tooltips - tuanv2t - qaksolutions.com qak.solutions

by Luke Marlow

HTML

<html>

  <head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <style>
      body {
        font-family: 'Arial';
      }

      .container {
        margin: 15px auto;
      }

      #chart {
        float: left;
        width: 70%;
      }

      #legend {
        float: right;
      }

      [class$="-legend"] {
        list-style: none;
        cursor: pointer;
        padding-left: 0;
      }

      [class$="-legend"] li {
        display: block;
        padding: 0 5px;
      }

      [class$="-legend"] li.hidden {
        text-decoration: line-through;
      }

      [class$="-legend"] li span {
        border-radius: 5px;
        display: inline-block;
        height: 10px;
        margin-right: 10px;
        width: 10px;
      }

    </style>
  </head>

  <body>

    <div class="container">
      <h2>Chart.js — Custom Tooltips </h2>
      <div>
        <div id="chart"><canvas id="myChart"></canvas></div>

      </div>
    </div>

    <script>
      var ctx = document.getElementById("myChart").getContext('2d');

      var chartData = [60, 90, 120, 150];
      var percent = {};
      var chartLabels = ['apples', 'bananas', 'oranges', 'pears'];

      //In the real world, it might be more complex to calculate percentage 
      //Here's a simple data to test 
      var total = 0;
      chartData.forEach(element => {
        total += element;
      });
      percent['apples'] = Math.round(100 * (60 / total));
      percent['bananas'] = Math.round(100 * (90 / total));
      percent['oranges'] = Math.round(100 * (120 / total));
      percent['pears'] = Math.round(100 * (150 / total));
      var chart = new Chart(ctx, {
        type: 'pie',
        data: {
          labels: chartLabels,
          datasets: [{
            backgroundColor: [
              "#003004",
              "#decf3f",
              "#FFA500",
              "#9b59b6",
      ...