Customising a Chart

On this page, you will find the most important configurations for charts in the MIS.

If your needed configuration is not listed here, check out https://nivo.rocks/

For more configurations, check out https://nivo.rocks/

How to add a configuration

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'
}

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'
  ]
}

Change the margins on any site of the Chart.

{
  margin: {
    top: 50, 
    right: 50,
    bottom: 50,
    left:50
  }
}