React Chart.js Component API
Chart.js API
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.
Explore the API reference for the React Chart.js component and discover how to effectively utilize its props for customization.
CChart#
import { CChart } from '@coreui/react-chartjs'// orimport 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. | ||