Legend for Chart.js doughnut style chart

Need help Plugins
1

Does anyone know of a way to show a legend for the doughnut style of chart in the chart.js plugin? Currently, it only shows tool tips, and a user has to hover to expose the tool tip. I would like to add a legend that shows the labels of the pie chart, with the corresponding label color, upon page load. Thanks in advance.

2 Likes
2

Did you ever find the solution to this? I’m having the same issue :slight_smile:

3

Hi. I did find a way to implement a corresponding legend:

  1. First, I determined what the color order for the corresponding chart would be (I’m using the donut style chart). You can customize the colors, but the order will always be the same. For example, If my chart lists two items, the first item is red, the second item is green. Or, If I list five items, the first item is red, the second item is green, the third item is yellow, the fourth item is blue, and the fifth item is brown. This color order will always be the same.

  2. Next, I added a repeating group that used the same data source as the donut chart. One of the elements in the repeating group is “shape”, and it is in the shape of a square. I applied conditional formatting to the shape to take on a background color according to the index number it is within the repeating group. The background color corresponds to the same order as the donut chart. So, if the current cell’s index is 1, the background color of the shape is red. If the current cell’s index is 2, the background color of the shape is green, and so forth (same order as you determined your chart follows).

Note: I had to apply a filter to the repeating group to ensure that the order of the repeating group always matches the chart. So, in my case, my chart represents a percentage of something, and the biggest percentage is always the first item represented in the chart, then goes in descending order. Therefore, I had to apply a filter to the repeating group so that the largest percentage item was the first item in the repeating group, and goes in descending order.

Here’s the result:

Hope this helps. Let me know if you have any questions about it.

1 Like