CoralGroupBarChart

Basic Usage


import { CoralGroupBarChart } from '@krakentech/coral-charts';
 
<CoralGroupBarChart
    data={
        [
            { x: '00', y: 1000 },
            { x: '01', y: 800 },
            ...
        ],
        [
            { x: '00', y: 2300 },
            { x: '01', y: 1100 },
            ...
        ],
        [
            { x: '00', y: 20 },
            { x: '01', y: 20 },
            ...
        ],
        [
            { x: '00', y: -2300 },
            { x: '01', y: -1100 },
            ...
        ]
    }
    modifiers={{
        bar: {
            barWidth: 10,
        },
        chart: { domainPadding: { x: 40 } },
        bargroup: {
            offset: 12,
            colorScale: [
                token('primitives.color.dark.voltage.aquamarine'),
                token('colors.background.primary.500'),
                token('colors.background.secondary.500'),
                token('colors.background.tertiary.500'),
            ],
        },
        sm: {
            bar: {
                barWidth: 16,
            },
            bargroup: {
                offset: 18,
            }
        }
    }}
/>

There is a full article on creation of custom flyouts available on the Coral Cookbook .

Modifiers

placementModifier sets labels in the tooltip to be positioned with a const to handle their top offset. The more group items you have on your chart, the lower this number should be (i.e. 6 items would be around 2.3, rather than 2.8)

Default modifiers

CoralGroupBarChart has the following additional modifiers set by default.


modifiers: {
    group: {
        offset: 20,
        placementModifier: 2.8
    },
},

Full API

Name	Type	Default
`modifiers`	`ChartModifiers & { bargroup?: BarGroupDefinition; bar?: BarDefinition & { horizontal?: boolean; }; }`
`chartDescription`	`ReactNode` The description of the chart, which will be read by screen readers. This should be a short description of the chart’s purpose or content, as well as any relevant data points.
`events.onClick`	`(props: any) => void` Callback fired when the user clicks on a chart element. `props` The properties of the clicked chart element.
`events.onMouseOver`	`(props: any) => void` Callback fired when the user hovers over a chart element. `props` The properties of the hovered chart element.
`events.onMouseOut`	`(props: any) => void` Callback fired when the user stops hovering over a chart element. `props` The properties of the chart element that was hovered over.
`data`	`ChartData[][]`
`xs`	`GroupBarChartModifiers`
`sm`	`GroupBarChartModifiers`
`md`	`GroupBarChartModifiers`
`lg`	`GroupBarChartModifiers`
`xl`	`GroupBarChartModifiers`

modifiers API

Name	Type	Default
`height`	`number`
`legend.showLegend`	`boolean` Should the legend show?	`false`
`legend.renderedWidth`	`number` When horizontalPosition is set to `center` or `right`, renderedWidth must be defined to ensure that the legend is correctly positioned.
`legend.horizontalPosition`	`"center" \| "right" \| "left"` The position of the legend on the horizontal axis.
`legend.verticalPosition`	`"top" \| "bottom"` Set whether the legend be positioned above or below the chart.
`legend.verticalPositionAdjustment`	`number` When assigning verticalPosition to `bottom` this prop allows granular control of the offset of the legend to the bottom of the chart.
`legend.legendData`	`readonly any[] \| undefined` The series data to be displayed in the legend.
`legend.legendColorScale`	`ColorScalePropType` The color scale to be used for the legend. This will be mapped to the series data.
`legend.itemsPerRow`	`number` Define how many items to show per row on the legend, the default will run all series on one line without wrapping them.
`legend.dataComponent`	`React.ReactElement` Provide a custom series data icon, rather than the default coloured square.
`yAxis.orientation`	`"right" \| "left"` Set the position of the y-axis to the left or right of the chart.	`left`
`yAxis.axisLabel`	`string` Provides a label for the y-axis.
`yAxis.axisLabelPadding`	`number` Provide offset padding to the axis label from the y-axis line.
`yAxis.tickFormat`	`any[] \| ((tick: any, index: number, ticks: any[]) => string \| number) \| undefined` Specify how tick values should be formatted. This is likely to be function that takes a value and returns a formatted string, i.e. `tickFormat={(x) => {}}`.
`yAxis.domain`	`[number, number]` Manually specify the range of data the chart will include, given as an array of the minimum and maximum expected values. This will override the default domain calculation which works out the minimum and maximum values from the supplied data. If you pass a minimum or maximum value that is more or less than the minimum or maximum value in the data, the chart will still include the minimum or maximum value from the data.
`xAxis.orientation`	`"top" \| "bottom"` Set the position of the x-axis to the top or bottom of the chart.	`top`
`xAxis.fixTickLabelOverlap`	`boolean` Dynamically adjust how many ticks show to prevent collision of ticks.
`xAxis.axisLabel`	`string` Provides a label for the x-axis.
`xAxis.axisLabelPadding`	`number` Provide offset padding to the axis label from the x-axis line.
`xAxis.tickCount`	`number` Define approximately how many ticks to show on the x-axis. Prioritizes returning “nice” values and evenly spaced ticks over an exact number of ticks.
`xAxis.tickFormat`	`any[] \| ((tick: any, index: number, ticks: any[]) => string \| number) \| undefined` Specify how tick values should be formatted. This is likely to be function that takes a value and returns a formatted string, i.e. `tickFormat={(x) => {}}`.
`xAxis.tickPadding`	`number` Specify how many pixels apart the ticks should be spaced..
`xAxis.tickAngle`	`number` Specify an angle that the ticks should be rotated to.	`0`
`xAxis.textAnchor`	`"start" \| "middle" \| "end" \| "inherit"` Specify the point within the text that should align with the x-coordinate of the label’s position.
`xAxis.domain`	`[number, number]` Manually specify the range of data the chart will include, given as an array of the minimum and maximum expected values. Note you should only attempt to apply this property if your independent domain is numeric.
`xAxis.offsetY`	`number` Manually specify how far from the edge of its calculated position an axis should be offset in the y direction.
`chart.domainPadding`	`ForAxes<PaddingType>` Specify a number of pixels of padding to add to the beginning or end of a domain. This prop is useful for explicitly spacing data elements farther from the beginning or end of a domain to prevent axis crowding. https://formidable.com/open-source/victory/docs/common-props#domainpadding
`chart.padding`	`PaddingProps` Amount of padding in number of pixels between the edge of the chart and any rendered child components https://formidable.com/open-source/victory/docs/common-props#padding
`tooltip.showTooltips`	`boolean` Should the tooltip be shown on hover?	`true`
`tooltip.labelFormat`	`string[] \| number[] \| ((data: any) => string \| number \| string[] \| number[] \| null) \| undefined` Specify how labels values should be formatted. This is likely to be function that takes a value and returns a formatted string, i.e. `({ datum }) => {}`.
`bargroup.offset`	`number` In the case of bars, this should be equal to the width of the bar plus desired spacing between bars, otherwise defines how far each element should be offset from its position on the x axis.
`bargroup.colorScale`	`ColorScalePropType` An array of CSS colours, which are assigned by index. Note that colours will repeat when there are more children than colours.
`bargroup.placementModifier`	`number` The labels in the tooltip are positioned with a const to handle their top offset. The more group items you have on your chart, the lower this number should be (i.e. 6 items would be around 2.3, rather than 2.8).	`2.8`
`bargroup.customFlyout`	`Element` Provide a custom flyout to be rendered on hover.
`bar`	`BarDefinition & { horizontal?: boolean; }`