[Chartjs]-How to have different units on each different axis of chart.js?

by

1👍

✅

If you console.log the item you can that see one of its properties is datasetIndex which differentiates between the datasets.

ExerciseVariations = [1, 2, 3, 4, 5, 6, 7, 8]
new Chart("myChart", {
  type: "line",
  data: {
    labels: ExerciseVariations,
    datasets: [{
      data: [860, 1140, 1060, 1060, 1070, 1110, 1330, 2210, 7830, 2478],
      borderColor: "red",
      fill: false
    }, {
      data: [1600, 1700, 1700, 1900, 2000, 2700, 4000, 5000, 6000, 7000],
      borderColor: "green",
      fill: false
    }, {
      data: [300, 700, 2000, 5000, 6000, 4000, 2000, 1000, 200, 100],
      borderColor: "blue",
      fill: false
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        label: function(item) {
          // console.log (item)
          var datasetIndex = item.datasetIndex;
          const units = {
            0: "kg",
            1: "m",
            2: "sec"
          }

          var unit = units[datasetIndex];
          return `${item.yLabel}${unit}`;
        },
      },
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>


<canvas id="myChart" height="100"></canvas>

Leave a comment