JSPM – @coreui/vue-chartjs@3.0.0

Package Exports

@coreui/vue-chartjs
@coreui/vue-chartjs/dist/cjs/index.js
@coreui/vue-chartjs/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@coreui/vue-chartjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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'

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