@coreui/react-chartjs
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.3 • Public • Published

    CoreUI logo

    CoreUI React.js wrapper for Chart.js

    Explore @coreui/react-chartjs docs & examples »

    Report bug · Request feature · Blog

    Status

    npm package NPM downloads

    install:
    npm install @coreui/react-chartjs
    
    # or
    
    yarn add @coreui/react-chartjs
    import:
    import { CChart } from '@coreui/react-chartjs'

    or

    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: 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<HTMLCanvasElement>,
    ) => void
    /**
     * Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
     */
    getElementAtEvent?: (
      element: InteractionItem[],
      event: React.MouseEvent<HTMLCanvasElement>,
    ) => void
    /**
     * Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.
     */
    getElementsAtEvent?: (
      elements: InteractionItem[],
      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?: 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:
    ...
    class CoreUICharts extends Component {
    ...
    render() {
        return (
          <CChart
            type='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
              }
            }}
          />
        )
    }
    ...

    Install

    npm i @coreui/react-chartjs

    DownloadsWeekly Downloads

    9,003

    Version

    2.0.3

    License

    MIT

    Unpacked Size

    3.8 MB

    Total Files

    14

    Last publish

    Collaborators

    • coreui