How to use the vue-chartjs.Doughnut.extend function in vue-chartjs
To help you get started, we’ve selected a few vue-chartjs examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
harryho / vue2crm / src / components / chart / Doughnut.js View on Github 
// import 'chart.js'
import {Doughnut} from 'vue-chartjs'
export default Doughnut.extend({
mounted () {
this.renderChart({
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
]
}, {responsive: true, maintainAspectRatio: false})
}datasets: [
{
data: [heapFree, heapUsed],
backgroundColor: [
"#36A2EB",
"#FF6384",
],
hoverBackgroundColor: [
"#36A2EB",
"#FF6384",
]
}]
};
}
let doughnut = Doughnut.extend({
mixins: [reactiveProp],
props: ['options'],
mounted() {
this.renderChart(this.chartData, {
title: {
display: true,
text: 'Process Memory Stat',
},
tooltips: {
callbacks: {
label: (item, data) => {
let val = data.datasets[item.datasetIndex].data[item.index];
return Math.floor(val * 100) / 100 + ' MB';
}
}
},vue-chartjs
Vue.js wrapper for chart.js for creating beautiful charts.
