Chartjs-Add text before time in tooltip

by

0👍

Below is a working Demo, But you can enhance the finding the weekend value even better because this doesn’t hold good if the weekend value is greater than 30

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>


<head>
  <title>Bar Chart</title>
  <style>
    canvas {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }
  </style>
</head>

<body>
  <div id="container" style="width: 100%;">
    <canvas id="canvas"></canvas>
  </div>
  <script>
    var MONTHS = ['January', 'February'];

    var barChartData = {
      labels: ['03/20/2018', '03/10/2018'],
      datasets: [{
        label: 'Dataset 1',
        borderWidth: 1,
        data: [
          1,
          2
        ]
      }, {
        label: 'Dataset 2',
        borderWidth: 1,
        data: [
          3,
          4
        ]
      }]

    };

    window.onload = function() {
      var ctx = document.getElementById('canvas').getContext('2d');
      window.myBar = new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        options: {
          responsive: true,
          legend: {
            position: 'top',
          },
          tooltips: {
            callbacks: {
                label: function(tooltipItems, data) {
                var xLabel = tooltipItems.xLabel;
                var dt = new Date(xLabel);
                
                var lastday = dt.getDate() - (dt.getDay() - 1) + 6;  
                    var label = "Weekend Is: "+lastday;
                    return label;
                }
            }
        },
          title: {
            display: true,
            text: 'Chart.js Bar Chart'
          }
        }
      });

    };
  </script>
</body>

Leave a comment