React Chart.js Component API

Chart.js API

Explore the API reference for the React Chart.js component and discover how to effectively utilize its props for customization.

On this page

CChart#

import { CChart } from '@coreui/react-chartjs'
// or
import CChart from '@coreui/react-chartjs/src/CChart'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the base component.
customTooltips#	`true`	`boolean`
Enables custom html based tooltips instead of standard tooltips.
data#	-	`ChartData<keyof ChartTypeRegistry, (number \| [number, number] \| Point \| BubbleDataPoint)[], unknown>`, `((canvas: HTMLCanvasElement) => ChartData<...>)`
The data object that is passed into the Chart.js chart (more info).
fallbackContent#	-	`React.ReactNode`
A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.
getDatasetAtEvent#	-	`(dataset: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void`
Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
getElementAtEvent#	-	`(element: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void`
Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
getElementsAtEvent#	-	`(elements: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void`
Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.
height#	`150`	`number`
Height attribute applied to the rendered canvas.
id#	-	`string`
ID attribute applied to the rendered canvas.
options#	-	`_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>`
The options object that is passed into the Chart.js chart.
plugins#	`[]`	`Plugin<keyof ChartTypeRegistry, AnyObject>[]`
The plugins array that is passed into the Chart.js chart (more info)
redraw#	`false`	`boolean`
If true, will tear down and redraw chart on all updates.
type#	`bar`	`{'line' \| 'bar' \| 'radar' \| 'doughnut' \| 'polarArea' \| 'bubble' \| 'pie' \| 'scatter'}`
Chart.js chart type.
width#	`300`	`number`
Width attribute applied to the rendered canvas.
wrapper#	`true`	`boolean`
Put the chart into the wrapper div element.