[Chartjs]-ReactJS – Labeling multi dimension array with chartJS-2

by

2👍

✅

Have you tried using point Labels on the chart. Additional chart js contains a label plugin which allows for more customization.

You can install it using this – npm i chartjs-plugin-labels.

Heres a link to a few demo’s – https://emn178.github.io/chartjs-plugin-labels/samples/demo/

2👍

As per react-chartjs-2 examples there is a separate key named labels for that. You also have to use the tooltips options so you will be able to customize your labels. See the working example I made below:

var Doughnut = reactChartjs2.Doughnut;

const DummyChart = () => ( <Doughnut data={data} options = {options} width={360} height={360} />);

const data = {
  labels: [
    'Dummy 1',
    'Dummy 2',
    'Dummy 3',

  ],
  datasets: [{
      data: [487, 1000],
      backgroundColor: ["rgba(0, 193, 189)"],
      borderColor: ["rgba(0, 193, 189)"],
      borderWidth: 1
    },
    {
      data: [236, 1000],
      backgroundColor: ["rgba(0, 135, 136)"],
      borderColor: ["rgba(0, 135, 136)"],
      borderWidth: 1
    },
    {
      data: [811, 1000],
      backgroundColor: ["rgba(0, 193, 189)"],
      borderColor: ["rgba(0, 193, 189)"],
      borderWidth: 1
    }
  ]
};


const options = {
  responsive: true,
  legend: {
    display: false
  },
  rotation: Math.PI,
  circumference: Math.PI,
  cutout: 50,
  tooltips: {
    callbacks: {
      label: function(item, data) {
        return data.labels[item.datasetIndex] + ' ' + data.datasets[item.datasetIndex].data[0] + '/' + data.datasets[item.datasetIndex].data[1]
      }
    }
  }
};
ReactDOM.render( 
  <DummyChart /> ,
  document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src='https://unpkg.com/chart.js@2.6.0/dist/Chart.js'></script>
<script src='https://unpkg.com/react-chartjs-2@2.1.0/dist/react-chartjs-2.js'>
</script>
<div id='app'></div>

Leave a comment