Chartjs-Display various chart value and tool tip

by

1👍

✅

You should define your tooltips.callback.label function as follows:

tooltips: {
  callbacks: {
    label: (tooltipItem, data) => {
      const data1 = data.datasets[0].data1;
      return "$" + data1[tooltipItem.index] + " and so worth it !";
    }
  }
}

For further information, consult the chapter Label Callback from Chart.js v2.9.4 documentation.

Please take a look at your amended and runnable code and see how it works.

var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');

// Global Options:
Chart.defaults.global.defaultFontColor = 'dodgerblue';
Chart.defaults.global.defaultFontSize = 16;

// Data with datasets options
var data = {
  labels: ["Vanilla", "Chocolate", "Strawberry"],
  datasets: [{
    label: "Ice Cream Prices ",
    fill: true,
    backgroundColor: [
      'moccasin',
      'saddlebrown',
      'lightpink'
    ],
    data: [11, 9, 4],
    data1: [111, 19, 14]
  }]
};

var options = {
  tooltips: {
    callbacks: {
      label: (tooltipItem, data) => {
        const data1 = data.datasets[0].data1;
        return "$" + data1[tooltipItem.index] + " and so worth it !";
      }
    }
  },
  title: {
    display: true,
    text: 'Ice Cream Truck',
    position: 'bottom'
  },
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
};

// Chart declaration:
var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});
body{
  background-color: #333;
}

#barChart{
  background-color: aliceblue;
  border-radius: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div class="container">
  <br />
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
      <canvas id="barChart"></canvas>
    </div>
    <div class="col-md-1"></div>
  </div>
</div>

Leave a comment