CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedCustomize
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedTemplates
  • undefinedMigration
  • undefined
  • undefined
  • undefined
undefinedDownloadundefinedHire Us Get CoreUI PRO

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Hire Us! We create stunning designs, high-conversion landing pages, functional mobile apps and reliable web services – everything you need to offer your products or services online and always stay a tap away from your customers.
  • Give us a star ⭐️ on Github.

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
1

Yarn #

yarn add @coreui/vue-chartjs
1

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

<!-- use <CChart type="line"> or <CChartLine> component -->
<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]
      }
    ]
  }"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

<!-- use <CChart type="bar"> or <CChartBar> component -->
<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"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

<!-- use <CChart type="radar"> or <CChartRadar> component -->
<CChartRadar
  :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],
      },
    ],
  }"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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

<!-- use <CChart type="doughnut"> or <CChartDoughnut> component -->
<CChart
  type="doughnut"
  :data="{
    labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
    datasets: [
      {
        backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
        data: [40, 20, 80, 10],
      },
    ],
  }"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- use <CChart type="pie"> or <CChartPie> component -->
<CChart
  type="pie"
  :data="{
    labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
    datasets: [
      {
        backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
        data: [40, 20, 80, 10],
      },
    ],
  }"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13

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

<!-- use <CChart type="polarArea"> or <CChartPolarArea> component -->
<CChart
  type="polarArea"
  :data="{
    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
    datasets: [
      {
        data: [11, 16, 7, 3, 14],
        backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
      },
    ],
  }"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13

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

<!-- use <CChart type="bubble"> or <CChartBubble> component -->
<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)'
    }]
  }"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Scatter 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. Scatter Chart properties

<!-- 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="{
    scales: {
      x: {
        type: 'linear',
        position: 'bottom'
      }
    }
  }"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

API #

CChart #

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

Props #

Prop nameDescriptionTypeValuesDefault
custom-tooltipsEnables custom html based tooltips instead of standard tooltips.
@default true
boolean-true
dataThe data object that is passed into the Chart.js chart (more info).ChartData | ((canvas: HTMLCanvasElement) => ChartData)-
heightHeight attribute applied to the rendered canvas.
@default 150
number-150
idID attribute applied to the rendered canvas.string--
optionsThe options object that is passed into the Chart.js chart.

{@link https://www.chartjs.org/docs/latest/general/options.html More Info}
ChartOptions--
pluginsThe 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[]--
redrawIf true, will tear down and redraw chart on all updates.boolean-
typeChart.js chart type.
@type 'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'
ChartType-'bar'
widthWidth attribute applied to the rendered canvas.
@default 300
number-300
wrapperPut the chart into the wrapper div element.
@default true
boolean-true

Events #

Event nameDescriptionProperties
get-dataset-at-eventProxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
get-element-at-eventProxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
get-elements-at-eventProxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.
On this page
  • Installation
    • Npm
    • Yarn
  • Chart Types
    • Line Chart
    • Bar Chart
    • Radar Chart
    • Doughnut and Pie Charts
    • Polar Area Chart
    • Bubble Chart
    • Scatter Chart
  • API
    • CChart
  • GitHub
  • Twitter
  • CoreUI (Vanilla)
  • CoreUI for Angular
  • CoreUI for React.js

CoreUI for Vue is Open Source UI Components Library for Vue.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.