CoreUI React.js wrapper for Chart.js
Explore @coreui/react-chartjs docs & examples »
Report bug
·
Request feature
·
Blog
## Status
[![npm package][npm-badge]][npm]
[![NPM downloads][npm-download]][npm]
[npm-badge]: https://img.shields.io/npm/v/@coreui/react-chartjs/latest?style=flat-square
[npm]: https://www.npmjs.com/package/@coreui/react-chartjs
[npm-download]: https://img.shields.io/npm/dm/@coreui/react-chartjs.svg?style=flat-square
##### install:
```bash
npm install @coreui/react-chartjs
# or
yarn add @coreui/react-chartjs
```
##### import:
```jsx
import { CChart } from '@coreui/react-chartjs'
```
or
```js
import {
CChart,
CChartBar,
CChartHorizontalBar,
CChartLine,
CChartDoughnut,
CChartRadar,
CChartPie,
CChartPolarArea,
} from '@coreui/react-chartjs'
```
##### props:
```js
/**
* A string of all className you want applied to the base component.
*/
className?: string
/**
* Enables custom html based tooltips instead of standard tooltips.
*
* @default true
*/
customTooltips?: boolean
/**
* The data object that is passed into the Chart.js chart (more info).
*/
data: ChartData | ((canvas: HTMLCanvasElement) => ChartData)
/**
* A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.
*
* {@link https://www.chartjs.org/docs/latest/general/accessibility.html More Info}
*/
fallbackContent?: React.ReactNode
/**
* Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
*/
getDatasetAtEvent?: (
dataset: InteractionItem[],
event: React.MouseEvent,
) => void
/**
* Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
*/
getElementAtEvent?: (
element: InteractionItem[],
event: React.MouseEvent,
) => void
/**
* Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.
*/
getElementsAtEvent?: (
elements: InteractionItem[],
event: React.MouseEvent,
) => void
/**
* Height attribute applied to the rendered canvas.
*
* @default 150
*/
height?: number
/**
* ID attribute applied to the rendered canvas.
*/
id?: string
/**
* The options object that is passed into the Chart.js chart.
*
* {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
*/
options?: ChartOptions
/**
* The plugins array that is passed into the Chart.js chart (more info)
*
* {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
*/
plugins?: Plugin[]
/**
* If true, will tear down and redraw chart on all updates.
*
* @default false
*/
redraw?: boolean
/**
* Chart.js chart type.
*
* @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
*/
type: ChartType
/**
* Width attribute applied to the rendered canvas.
*
* @default 300
*/
width?: number
/**
* Put the chart into the wrapper div element.
*
* @default true
*/
wrapper?: boolean
```
##### usage:
```jsx
...
class CoreUICharts extends Component {
...
render() {
return (
)
}
...
```