@coreui/react-chartjs forCoreUI for React

install:

npm install @coreui/react-chartjs@next# oryarn add @coreui/react-chartjs@next

import:

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

import{CChart,CChartBar,CChartHorizontalBar,CChartLine,CChartDoughnut,CChartRadar,CChartPie,CChartPolarArea,}from'@coreui/react-chartjs'

props:

/** * 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:Chart.ChartData|((canvas:HTMLCanvasElement)=>Chart.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:Array<{}>,event:React.MouseEvent<HTMLCanvasElement>)=>void/** * Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event. */getElementAtEvent?:(element:[{}],event:React.MouseEvent<HTMLCanvasElement>)=>void/** * Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event. */getElementsAtEvent?:(elements:Array<{}>,event:React.MouseEvent<HTMLCanvasElement>)=>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?:Chart.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?:Chart.PluginServiceRegistrationOptions[]/** * If true, will tear down and redraw chart on all updates. * *@default false */redraw?:boolean/** * Chart.js chart type. * *@type {'line' | 'bar' | 'horizontalBar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'} */type:Chart.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:

...classCoreUIChartsextendsComponent{...render(){return(<CCharttype='line'data={{labels:['January','February','March','April','May','June','July'],datasets:[{label:'2019',backgroundColor:'rgba(179,181,198,0.2)',borderColor:'rgba(179,181,198,1)',pointBackgroundColor:'rgba(179,181,198,1)',pointBorderColor:'#fff',pointHoverBackgroundColor:'#fff',pointHoverBorderColor:'rgba(179,181,198,1)',tooltipLabelColor:'rgba(179,181,198,1)',data:[65,59,90,81,56,55,40]},{label:'2020',backgroundColor:'rgba(255,99,132,0.2)',borderColor:'rgba(255,99,132,1)',pointBackgroundColor:'rgba(255,99,132,1)',pointBorderColor:'#fff',pointHoverBackgroundColor:'#fff',pointHoverBorderColor:'rgba(255,99,132,1)',tooltipLabelColor:'rgba(255,99,132,1)',data:[28,48,40,19,96,27,100]}],}}options={{aspectRatio:1.5,tooltips:{enabled:true}}}/>)}...

npm run scripts