Back to posts

Customizing colours for pie and doughnut charts

We’ve released a new feature for the pie and doughnut charts that lets you customize the colours for each segment.

Changing the colours is really simple to achieve. Each segment in the pie and doughnut charts is represented by a <tr>. You can apply a data-fm-color attribute to each <tr>. The attribute’s value can be any valid CSS colour.

Here’s an example pie chart and doughnut chart that both use data from the UK General Election, 2010. We’ve given each segment a colour appropriate to the party it is a representation of.

Party Seats won
Conservative 306
Labour 258
Liberal Democrat 57
DUP 8
SNP 6
Sinn Féin 5
Plaid Cymru 3
SDLP 3
Green 1
Alliance 1
Speaker 1
Independent 1

Party Seats won
Conservative 306
Labour 258
Liberal Democrat 57
DUP 8
SNP 6
Sinn Féin 5
Plaid Cymru 3
SDLP 3
Green 1
Alliance 1
Speaker 1
Independent 1

To find out more, please read our pie chart documentation and doughnut chart documentation.