Intro

Kyber's Chart components are built on top of Highcharts. The BaseChart is a basic React wrapper around Highcharts that supports any Highcharts configuration options. The BaseChart component is used by all other chart components to render the chart.

Colors

Chart colors are based on an accessible set of 18 different colors. Each color is spaced far enough apart to be easily distinguishable by users with color vision deficiencies. The colors are also ordered in a way that makes it easy to distinguish between them when used in a series. The colors are also dynamically set depending on the data length to ensure that there is always enough contrast between the colors.

Kyber exposes a function to get chart colors:

import { getChartColors } from '@emoney/kyber';

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// The getChartColors function takes 2 arguments, the data array and the type of chart.
// The type of chart is only applicable for treemap and pie charts.
// Colors will be an array of colors with correctly spaced colors for the data length.
const colors = getChartColors(data, 'donut');