Bespoke Charts

Note: This guide a stub

coral-charts exposes some primitives directly from Victory that consumers can use to build their own charts interfacing directly with the underlying Victory library.


export {
    VictoryBar as CoralBarPrimitive,
    VictoryChart as CoralChartPrimitive,
    VictoryTooltip as CoralTooltipPrimitive,
    VictoryAxis as CoralAxisPrimitive,
    VictoryContainer as CoralContainerPrimitive,
    VictoryLine as CoralLinePrimitive,
    VictoryPie as CoralPiePrimitive,
    VictoryStack as CoralStackPrimitive,
    VictoryGroup as CoralGroupPrimitive,
    VictoryLegend as CoralLegendPrimitive,
    VictoryLabel as CoralLabelPrimitive,
    VictoryVoronoiContainer as CoralVoronoiContainerPrimitive,
    VictoryCursorContainer as CoralCursorContainerPrimitive,
    Line as CoralChartLine,
} from 'victory';

You can get started with creating your own charts by:

Reading the Victory docs
Checking out Coral’s pre-built primitives to see how we are using Victory.
Reading through our Cookbook article on creating custom charts

Note that the same rules for theming still apply, you’ll just import your theme and apply it directly in CoralChartPrimitive rather than going through ChartsProvider:


import {
    CoralChartPrimitive
} from '@krakentech/coral-charts'
 
export const ChartsTheme: ChartThemeDefinition = {
    axis: {
        ...
    }
    ...
}
 
<CoralChartPrimitive theme={ChartsTheme}>