Theming

To update the styling for any of the primitives, you should pass a theme value to the config of your <ChartsProvider />. You can either pass this as an object, or build your own theme typed to ChartThemeDefinition (which is provided by coral-charts) and pass that in directly, instead. Note that there is a default theme that is bundled in, so your theme config will overwrite any definitions, rather than replacing the theme entirely. Any values that are not passed will default to whatever styling is defined in the default theme.

The following properties cover any that the charts use, the structure of which you can see by viewing the types .


<ChartsProvider
    config={{
        theme: {
            axis: { ... },
            bar: { ... },
            legend: { ... },
            line: { ... },
            stack: { ... },
            tooltip: { ... }
        }
    }}
/>


import type { ChartThemeDefinition } from '@krakentech/coral-charts';
 
export const CustomTheme: ChartThemeDefinition = {
    axis: {
        ...
    }
    ...
}
 
<ChartsProvider
    config={{
        theme: CustomTheme
    }}
/>

Here is the default theme file that you can copy into your consuming app so you can overwrite the values, where required.


// https://formidable.com/open-source/victory/guides/themes/
 
import { octopusTheme } from '@krakentech/coral';
import type { ChartThemeDefinition } from '@krakentech/coral-charts';
 
const colors = [
    octopusTheme.color.tertiary.light,
    octopusTheme.color.primary.main,
    octopusTheme.color.secondary.main,
    octopusTheme.color.base.dark,
    octopusTheme.color.primary.main,
];
 
/**
 * Typography
 */
const sansSerif = octopusTheme.typography.fontFamily;
const letterSpacing = 'normal';
const fontSize = 15;
 
/**
 * Labels
 */
const baseLabelStyles = {
    fontFamily: sansSerif,
    fontSize,
    letterSpacing,
    padding: 8,
    fill: octopusTheme.color.text.main,
    stroke: 'transparent',
};
 
const centeredLabelStyles = Object.assign(
    { textAnchor: 'middle' },
    baseLabelStyles
);
 
export const ChartsTheme: ChartThemeDefinition = {
    area: {
        style: {
            data: {
                fill: octopusTheme.color.tertiary.light,
            },
            labels: baseLabelStyles,
        },
    },
    axis: {
        style: {
            axis: {
                fill: 'transparent',
                stroke: octopusTheme.color.text.main,
                strokeWidth: 2,
                strokeLinecap: 'round',
                strokeLinejoin: 'round',
            },
            axisLabel: Object.assign({}, centeredLabelStyles, {
                padding: 0,
            }),
            grid: {
                fill: 'none',
                stroke: octopusTheme.color.text.main,
                strokeOpacity: 0.3,
                strokeLinejoin: 'round',
                strokeDasharray: 3,
                pointerEvents: 'painted',
            },
            ticks: {
                size: 5,
                stroke: 'transparent',
            },
            tickLabels: baseLabelStyles,
        },
    },
    bar: {
        style: {
            data: {
                fill: octopusTheme.color.tertiary.light,
                padding: 8,
                strokeWidth: 0,
            },
            labels: baseLabelStyles,
        },
    },
    group: {
        colorScale: colors,
    },
    legend: {
        colorScale: colors,
        gutter: 20,
        orientation: 'horizontal',
        titleOrientation: 'top',
        style: {
            data: {
                type: 'circle',
            },
            labels: Object.assign({}, baseLabelStyles, { fontWeight: 300 }),
            title: Object.assign({}, baseLabelStyles, { padding: 5 }),
        },
    },
    line: {
        style: {
            data: {
                stroke: octopusTheme.color.tertiary.light,
                padding: 8,
                strokeWidth: 2,
            },
            labels: baseLabelStyles,
        },
    },
    pie: {
        colorScale: colors,
        style: {
            labels: baseLabelStyles,
        },
    },
    stack: {
        colorScale: colors,
    },
    tooltip: {
        style: Object.assign({}, baseLabelStyles, {
            pointerEvents: 'none',
            fill: octopusTheme.color.text.light,
            fontSize: '12px',
            fontWeight: 300,
        }),
        flyoutStyle: {
            strokeWidth: 0,
            fill: octopusTheme.color.secondary.dark,
            pointerEvents: 'none',
        },
        flyoutPadding: { top: 8, bottom: 8, left: 12, right: 12 },
        cornerRadius: 4,
        pointerLength: 5,
    },
};