How to display label inside pie chart in Chartkick?

Question

I'm using Haml.

So the code is this:

 = pie_chart @chart_ratings, donut: true, suffix: "%", loading: "Generating charts...", download: true, width: "350px", library: {plotOptions: { pie: { dataLabels: { enabled: true }}}}

But the library doesn't include the labels.

Is there anything missing?

Does this perhaps answer your question? https://stackoverflow.com/a/45525644/2358409 — uminder, Feb 23 '22 at 06:34
It didn't work. I tried that before. I think it's just incompatible with Chart.js. I will try another library for chart and see what it shows. — Thanks for all the fish, Feb 23 '22 at 14:59

score 0 · Answer 1 · answered Feb 23 '22 at 15:27

I found the solution.

Chart.js doesn't support labels inside of the chart. So instead, I'm using Highcharts.

Install the highchart. You can have both libraries in the Chartkick installation.

yarn add highchart
Then you add the following into the application.js file.

import "chartkick/highcharts"
Then in the view for the pie chart, you append this.

= pie_chart @data, donut: true, library: { pieSliceText: 'value-and-percentage', plotOptions: {pie: {dataLabels: {enabled: true,format: '{point.name}:
{point.percentage:.1f} %',}}}}

How to display label inside pie chart in Chartkick?

1 Answers1