Chartjs-ChartJS Separate Labels for each dataset/independent datasets?

by

1👍

✅

I would define the data in a single dataset and keep the full product names in a separate property.

const data = {
  "labels": ["4380", "4311", "4571", "4588", "4557", "4373"],
  "productNames": ["GRAY-DARK-GRAY", "CANARY-YELLOW", "PINK-WHITE-GRAY", "SEAFOAM-WHITE-GRAY", "YELLOW-WHITE-GRAY", "WHITE-YELLOW"],
  "datasets": [{
    "data": [5996, 4605, 1288, 3463, 1537, 152],
    ...
  }]
};

To get the product names displayed in the tooltip, you would have to define a label callback function as follows:

tooltips: {
  callbacks: {
    label: (tooltipItem, data) => {
      let i = tooltipItem.index;
      return data.productNames[i] + ': ' + data.datasets[0].data[i];
    }
  }
}

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

const data = {
  "labels": ["4380", "4311", "4571", "4588", "4557", "4373"],
  "productNames": ["GRAY-DARK-GRAY", "CANARY-YELLOW", "PINK-WHITE-GRAY", "SEAFOAM-WHITE-GRAY", "YELLOW-WHITE-GRAY", "WHITE-YELLOW"],
  "datasets": [{
    "data": [5996, 4605, 1288, 3463, 1537, 152],
    "backgroundColor": ["rgba(1,1,235,1)", "rgba(12,87,184,1)", "rgba(85,107,126,1)", "rgba(181,150,65,1)", "rgba(132,66,28,1)", "rgba(49,195,217,1)"],
    "borderColor": ["rgba(1,1,235,1)", "rgba(12,87,184,1)", "rgba(85,107,126,1)", "rgba(181,150,65,1)", "rgba(132,66,28,1)", "rgba(49,195,217,1)"]
  }]
};

var ctx = document.getElementById("inventorybarchart");
myBarChart2 = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    scales: {
      xAxes: [{
        gridLines: {
          display: false
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
    },
    legend: {
      display: false
    },
    tooltips: {
      callbacks: {
        label: (tooltipItem, data) => {
          let i = tooltipItem.index;
          return data.productNames[i] + ': ' + data.datasets[0].data[i];
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.0/Chart.min.js"></script>
<canvas id="inventorybarchart" height="90"></canvas>

Leave a comment