CODEWITHSUNDEEP
javascriptchartschart.jslabelaxis
gregfasfsdfs
gregfasfsdfs

Reputation: 33

How to have different units on each different axis of chart.js?

I have a chart with chart.js that has 3 axes. I have a different chart that has the units after the number is displayed on hover. This works fine because there is only 1 axis and only 1 unit is needed. However, with 3 axes I need to make the units specific for each axis.

Currently the same units are displayed for all 3 axes. How can I give each axis different units?

Thanks

This is what I did for the other chart but it does not work with 3 axes:

options: {            
        tooltips: {
            callbacks: {
              label: (item) => `${item.yLabel}kg`,
            },
        },
    }

This is the code for the chart with 3 axes:

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: (item) => `${item.yLabel}kg`,
            },
        },
    }
});

Upvotes: 2

Views: 294

Answers (1)

IT goldman
IT goldman

Reputation: 19483

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>

Upvotes: 1

Related Questions