CoreUI Vue.js wrapper for Chart.js

Status

install:

npm install @coreui/vue-chartjs# oryarn 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]asPropType<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:ObjectasPropType<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:ArrayasPropType<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:StringasPropType<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]      }    ]  }"/>