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.

Reframe Knowledge Base

Pie Chart

How to add a configuration

Colors

Margins

Change color of labels

Add absolute/percentage value switch