Pie Chart
- Carl Richter
- Tero Kuitunen (Unlicensed)
On this page you will find instructions on how to set up a Pie Chart.
A Pie Chart shows the composition of data in a data collection by a category of the same data collection (e.g. participants by gender). It shows how much an item of a chosen category represents the data collection.
How to add a configuration
If your needed configuration is not listed here, check out https://nivo.rocks/
Open the edit mode of the chart
click on the type of chart you selected,
click on settings and the chart editor opens.
When opening the Chart Editor, you have the possibility to change the chart configuration by entering code snippets in the Configuration.
The changes will be displayed in the Preview on the right.
Configuration must always be enclosed in curly brackets and if there more configurations than one seperated by a comma.
Example:
{
indexBy: 'value',
colorBy: 'index'
}Colors
Change the colors for each element of a data series. If there are more elements than colors, the color selection starts from the top.
New matching color palettes can be created here: coolers.co
{
indexBy: 'value',
colorBy: 'index',
colors: [
'#003874',
'#8fbd3e',
'#A7C6DA',
'#A53F2B',
'#A68383',
'#9BC28C'
]
}Margins
Change the margins on any site of the Chart.
{
margin: {
top: 50,
right: 50,
bottom: 50,
left:50
}
}Change color of labels
The color needs to be in the Hex format.
arcLabelsTextColor: '#2216d0'Add absolute/percentage value switch
{
showPercentageToggle: true,
indexBy: 'value',
colorBy: 'index',
arcLabelsTextColor: '#FFFFFF',
axisLeft: {
tickValues: 5
}
}