CoreUI Vue.js wrapper for Chart.js

Explore @coreui/vue-chartjs docs & examples »

Report bug · Request feature · Blog

Status

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]
      }
    ]
  }"
/>