-1

I'm creating a pie chart in a react project with chartjs. But I'm not able to show any values on the different segments. I've tried different plugins but all of them aren't supported anymore.

I'm open to any ideas. That's how I'm rendering the chart at the moment:

<Pie
  data={chartData}
  options={{
    responsive: true,
    plugins: {
        legend: {
            labels: {
                color: "white",
                font : {
                size: 16
            },
        }
      }
      },
    }}
/>
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Piepo
  • 1
  • 5
  • 1
    In order to help you better, it would be desirable to know if you're using chartjs in react or if you're using the react-chartjs npm package, or anything similar. – amda Jun 07 '21 at 16:21
  • im using the npm package :) – Piepo Jun 10 '21 at 07:12

1 Answers1

0

You can use the beta of the datalabels plugin by installing it like this:

YARN:
yarn add chartjs-plugin-datalabels@next

NPM:
npm i chartjs-plugin-datalabels@next

Live example with chart.js v3:

Chart.register(ChartDataLabels);

var options = {
  type: 'pie',
  data: {
    labels: ['orange', 'blue', 'gray'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      borderWidth: 1,
      backgroundColor: ['orange', 'blue', 'gray']
    }]
  },
  options: {
    plugins: {
      datalabels: {
        backgroundColor: function(context) {
          return context.dataset.backgroundColor;
        },
        borderColor: 'white',
        borderRadius: 25,
        borderWidth: 3,
        color: 'white',
        font: {
          weight: 'bold'
        },
        padding: 6,


      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>
</body>
LeeLenalee
  • 27,463
  • 6
  • 45
  • 69
  • im new to all of this. I have tried to register the plugin but failed to do so. By now i only imported from "react-chartjs-2". When i try to import from "chartjs" it says that it got no default export. So im not able to register the plugin properly. Hence it doesnt work. Thanks for the help – Piepo Jun 10 '21 at 07:44
  • Here is a react sample for the zoom plugin, it shows you how to register it, if you do it in the same way it will work: https://codesandbox.io/s/react-chart-js-forked-cn6wh?file=/src/components/Chart.js – LeeLenalee Jun 10 '21 at 07:50
  • Thank you so much! That helped a lot. Took me wy to long thou :D – Piepo Jun 10 '21 at 08:10