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

    2.0.0 • Public • Published

    CoreUI logo

    CoreUI Vue.js wrapper for Chart.js

    Explore @coreui/vue-chartjs docs & examples »

    Report bug · Request feature · Blog

    Status

    npm package NPM downloads

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

    or

    import {
      CChart,
      CChartBar,
      CChartHorizontalBar,
      CChartLine,
      CChartDoughnut,
      CChartRadar,
      CChartPie,
      CChartPolarArea,
    } from '@coreui/vue-chartjs'
    props:
    /**
     * Enables custom html based tooltips instead of standard tooltips.
     *
     * @default true
     */
    customTooltips: {
      type: Boolean,
      default: true,
      required: false,
    },
    /**
     * The data object that is passed into the Chart.js chart (more info).
     */
    data: {
      type: [Object, Function] as PropType<ChartData | ((canvas: HTMLCanvasElement) => ChartData)>,
      required: true,
    },
    /**
     * Height attribute applied to the rendered canvas.
     *
     * @default 150
     */
    height: {
      type: Number,
      default: 150,
      required: false,
    },
    /**
     * ID attribute applied to the rendered canvas.
     */
    id: {
      type: String,
      default: undefined,
      required: false,
    },
    /**
     * The options object that is passed into the Chart.js chart.
     *
     * {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
     */
    options: {
      type: Object as PropType<ChartOptions>,
      default: undefined,
      required: false,
    },
    /**
     * 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: {
      type: Array as PropType<Plugin[]>,
      default: undefined,
    },
    /**
     * If true, will tear down and redraw chart on all updates.
     */
    redraw: Boolean,
    /**
     * Chart.js chart type.
     *
     * @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
     */
    type: {
      type: String as PropType<ChartType>,
      default: 'bar',
      required: false,
    },
    /**
     * Width attribute applied to the rendered canvas.
     *
     * @default 300
     */
    width: {
      type: Number,
      default: 300,
      required: false,
    },
    /**
     * Put the chart into the wrapper div element.
     *
     * @default true
     */
    wrapper: {
      type: Boolean,
      default: true,
      required: false,
    },
    usage:
    <CChartLine
      :wrapper="false"
      :data="{
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'My First dataset',
            backgroundColor: 'rgba(220, 220, 220, 0.2)',
            borderColor: 'rgba(220, 220, 220, 1)',
            pointBackgroundColor: 'rgba(220, 220, 220, 1)',
            pointBorderColor: '#fff',
            data: [40, 20, 12, 39, 10, 40, 39]
          },
          {
            label: 'My Second dataset',
            backgroundColor: 'rgba(151, 187, 205, 0.2)',
            borderColor: 'rgba(151, 187, 205, 1)',
            pointBackgroundColor: 'rgba(151, 187, 205, 1)',
            pointBorderColor: '#fff',
            data: [50, 12, 28, 29, 7, 25, 12]
          }
        ]
      }"
    />

    Install

    npm i @coreui/vue-chartjs

    DownloadsWeekly Downloads

    11,010

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    810 kB

    Total Files

    17

    Last publish

    Collaborators

    • coreui