CoreUI Vue.js wrapper for Chart.js

Explore @coreui/vue-chartjs docs & examples »

Report bug · Request feature · Blog

Status

install:

1npm install @coreui/vue-chartjs
2
3# or
4
5yarn add @coreui/vue-chartjs

import:

1import { CChart } from '@coreui/vue-chartjs'

or

1import {
2  CChart,
3  CChartBar,
4  CChartHorizontalBar,
5  CChartLine,
6  CChartDoughnut,
7  CChartRadar,
8  CChartPie,
9  CChartPolarArea,
10} from '@coreui/vue-chartjs'

props:

1/**
2 * Enables custom html based tooltips instead of standard tooltips.
3 *
4 * @default true
5 */
6customTooltips: {
7  type: Boolean,
8  default: true,
9  required: false,
10},
11/**
12 * The data object that is passed into the Chart.js chart (more info).
13 */
14data: {
15  type: [Object, Function] as PropType<ChartData | ((canvas: HTMLCanvasElement) => ChartData)>,
16  required: true,
17},
18/**
19 * Height attribute applied to the rendered canvas.
20 *
21 * @default 150
22 */
23height: {
24  type: Number,
25  default: 150,
26  required: false,
27},
28/**
29 * ID attribute applied to the rendered canvas.
30 */
31id: {
32  type: String,
33  default: undefined,
34  required: false,
35},
36/**
37 * The options object that is passed into the Chart.js chart.
38 *
39 * {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
40 */
41options: {
42  type: Object as PropType<ChartOptions>,
43  default: undefined,
44  required: false,
45},
46/**
47 * The plugins array that is passed into the Chart.js chart (more info)
48 *
49 * {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
50 */
51plugins: {
52  type: Array as PropType<Plugin[]>,
53  default: undefined,
54},
55/**
56 * If true, will tear down and redraw chart on all updates.
57 */
58redraw: Boolean,
59/**
60 * Chart.js chart type.
61 *
62 * @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
63 */
64type: {
65  type: String as PropType<ChartType>,
66  default: 'bar',
67  required: false,
68},
69/**
70 * Width attribute applied to the rendered canvas.
71 *
72 * @default 300
73 */
74width: {
75  type: Number,
76  default: 300,
77  required: false,
78},
79/**
80 * Put the chart into the wrapper div element.
81 *
82 * @default true
83 */
84wrapper: {
85  type: Boolean,
86  default: true,
87  required: false,
88},

usage:

1<CChartLine
2  :wrapper="false"
3  :data="{
4    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
5    datasets: [
6      {
7        label: 'My First dataset',
8        backgroundColor: 'rgba(220, 220, 220, 0.2)',
9        borderColor: 'rgba(220, 220, 220, 1)',
10        pointBackgroundColor: 'rgba(220, 220, 220, 1)',
11        pointBorderColor: '#fff',
12        data: [40, 20, 12, 39, 10, 40, 39]
13      },
14      {
15        label: 'My Second dataset',
16        backgroundColor: 'rgba(151, 187, 205, 0.2)',
17        borderColor: 'rgba(151, 187, 205, 1)',
18        pointBackgroundColor: 'rgba(151, 187, 205, 1)',
19        pointBorderColor: '#fff',
20        data: [50, 12, 28, 29, 7, 25, 12]
21      }
22    ]
23  }"
24/>