Vue Chart.js Component

Vue wrapper for Chart.js 3.0, the most popular charting library.

Installation

If you want to use our Chart.js Vue wrapper you have to install an additional package.

Npm

npm install @coreui/vue-chartjs

Yarn

yarn add @coreui/vue-chartjs

Chart Types

Line Chart

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets. Line Chart properties

<CChart
  type="line"
  :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]
      }
    ]
  }"
/>

Bar Chart

A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. Bar Chart properties

<CChart
  type="bar"
  :data="{
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'GitHub Commits',
        backgroundColor: '#f87979',
        data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
      },
    ],
  }"
  labels="months"
/>

Radar Chart

A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. Radar Chart properties

<CChart
  type="radar"
  :data="{
    labels: [
      'Eating',
      'Drinking',
      'Sleeping',
      'Designing',
      'Coding',
      'Cycling',
      'Running',
    ],
    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',
        pointHighlightFill: '#fff',
        pointHighlightStroke: 'rgba(220, 220, 220, 1)',
        data: [65, 59, 90, 81, 56, 55, 40],
      },
      {
        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',
        pointHighlightFill: '#fff',
        pointHighlightStroke: 'rgba(151, 187, 205, 1)',
        data: [28, 48, 40, 19, 96, 27, 100],
      },
    ],
  }"
/>

Doughnut and Pie Charts

Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. Doughnut and Pie Charts properties

<CChart
  type="doughnut"
  :data="{
    labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
    datasets: [
      {
        backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
        data: [40, 20, 80, 10],
      },
    ],
  }"
/>

<CChart
  type="pie"
  :data="{
    labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
    datasets: [
      {
        backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
        data: [40, 20, 80, 10],
      },
    ],
  }"
/>

Polar Area Chart

Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. Polar Area Chart properties

<CChart
  type="polarArea"
  :data="{
    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
    datasets: [
      {
        data: [11, 16, 7, 3, 14],
        backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
      },
    ],
  }"
/>

Bubble Chart

A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. Bubble Chart properties

<CChart
  type="bubble"
  :data="{
    datasets: [{
      label: 'First Dataset',
      data: [{
        x: 20,
        y: 30,
        r: 15
      }, {
        x: 40,
        y: 10,
        r: 10
      }],
      backgroundColor: 'rgb(255, 99, 132)'
    }]
  }"
/>

Scatter Chart

<!-- use <CChart type="scatter"> or <CChartScatter> component -->
<CChart
  type="scatter"
  :data="{
    datasets: [{
      label: 'Scatter Dataset',
      data: [{
        x: -10,
        y: 0
      }, {
        x: 0,
        y: 10
      }, {
        x: 10,
        y: 5
      }, {
        x: 0.5,
        y: 5.5
      }],
      backgroundColor: 'rgb(255, 99, 132)'
    }],
  }"
  :options="{
    plugins: {
      legend: {
        labels: {
          color: getStyle('--cui-body-color'),
        }
      }
    },
    scales: {
      x: {
        grid: {
          color: getStyle('--cui-border-color-translucent'),
        },
        position: 'bottom',
        ticks: {
          color: getStyle('--cui-body-color'),
        },
        type: 'linear',
      },
      y: {
        grid: {
          color: getStyle('--cui-border-color-translucent'),
        },
        ticks: {
          color: getStyle('--cui-body-color'),
        },
      },
    },
  }"
/>

API

CChart

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

Props

Prop name	Description	Type	Values	Default
custom-tooltips	Enables custom html based tooltips instead of standard tooltips. `@default` true	boolean	-	true
data	The data object that is passed into the Chart.js chart (more info).	ChartData \| ((canvas: HTMLCanvasElement) => ChartData)	-	-
height	Height attribute applied to the rendered canvas. `@default` 150	number	-	150
id	ID attribute applied to the rendered canvas.	string	-	-
options	The options object that is passed into the Chart.js chart. {@link https://www.chartjs.org/docs/latest/general/options.html More Info}	ChartOptions	-	-
plugins	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}	Plugin[]	-	-
redraw	If true, will tear down and redraw chart on all updates.	boolean	-	-
type	Chart.js chart type. `@type` 'line' \| 'bar' \| 'radar' \| 'doughnut' \| 'polarArea' \| 'bubble' \| 'pie' \| 'scatter'	ChartType	-	'bar'
width	Width attribute applied to the rendered canvas. `@default` 300	number	-	300
wrapper	Put the chart into the wrapper div element. `@default` true	boolean	-	true

Events

Event name	Description	Properties
get-dataset-at-event	Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
get-element-at-event	Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
get-elements-at-event	Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.

On this page

Vue Chart.js Component

Installation #

Npm #

Yarn #

Chart Types #

Line Chart #

Bar Chart #

Radar Chart #

Doughnut and Pie Charts #

Polar Area Chart #

Bubble Chart #

Scatter Chart #

API #

CChart #

Props #

Events #