Example shows Vuejs stacked area 100% chart with custom axis label & tooltip content formatting.
/* App.vue */
<script>
export default {
data() {
return {
chart: null,
options: {
theme: "light2",
animationEnabled: true,
exportEnabled: true,
title:{
text: "Global Plastic Wastage by Disposal"
},
subtitles: [{
text: "Estimated share of global plastic waste by disposal method"
}],
axisX: {
valueFormatString: "####"
},
axisY: {
suffix: "%"
},
toolTip: {
shared: true
},
data: [{
type: "stackedArea100",
xValueFormatString: "####",
yValueFormatString: "#,###.##'%'",
showInLegend: true,
name: "Discarded",
dataPoints: [
{ x: 1980, y: 100 },
{ x: 1981, y: 98.3 },
{ x: 1982, y: 97.6 },
{ x: 1983, y: 96.9 },
{ x: 1984, y: 96.2 },
{ x: 1985, y: 95.5 },
{ x: 1986, y: 94.8 },
{ x: 1987, y: 94.1 },
{ x: 1988, y: 92.8 },
{ x: 1989, y: 91.4 },
{ x: 1990, y: 90 },
{ x: 1991, y: 88.6 },
{ x: 1992, y: 87.2 },
{ x: 1993, y: 85.8 },
{ x: 1994, y: 84.4 },
{ x: 1995, y: 83 },
{ x: 1996, y: 81.6 },
{ x: 1997, y: 80.2 },
{ x: 1998, y: 78.8 },
{ x: 1999, y: 77.4 },
{ x: 2000, y: 76 },
{ x: 2001, y: 74.6 },
{ x: 2002, y: 73.2 },
{ x: 2003, y: 71.8 },
{ x: 2004, y: 70.4 },
{ x: 2005, y: 69 },
{ x: 2006, y: 67.6 },
{ x: 2007, y: 66.2 },
{ x: 2008, y: 64.8 },
{ x: 2009, y: 63.4 },
{ x: 2010, y: 62 },
{ x: 2011, y: 60.6 },
{ x: 2012, y: 59.2 },
{ x: 2013, y: 57.8 },
{ x: 2014, y: 56.4 },
{ x: 2015, y: 55 }
]
}, {
type: "stackedArea100",
yValueFormatString: "#,###.##'%'",
showInLegend: true,
name: "Incinerated",
dataPoints: [
{ x: 1980, y: 0 },
{ x: 1981, y: 1.7 },
{ x: 1982, y: 2.4 },
{ x: 1983, y: 3.1 },
{ x: 1984, y: 3.8 },
{ x: 1985, y: 4.5 },
{ x: 1986, y: 5.2 },
{ x: 1987, y: 5.9 },
{ x: 1988, y: 6.6 },
{ x: 1989, y: 7.3 },
{ x: 1990, y: 8 },
{ x: 1991, y: 8.7 },
{ x: 1992, y: 9.4 },
{ x: 1993, y: 10.1 },
{ x: 1994, y: 10.8 },
{ x: 1995, y: 11.5 },
{ x: 1996, y: 12.2 },
{ x: 1997, y: 12.9 },
{ x: 1998, y: 13.6 },
{ x: 1999, y: 14.3 },
{ x: 2000, y: 15 },
{ x: 2001, y: 15.7 },
{ x: 2002, y: 16.4 },
{ x: 2003, y: 17.1 },
{ x: 2004, y: 17.8 },
{ x: 2005, y: 18.5 },
{ x: 2006, y: 19.2 },
{ x: 2007, y: 19.9 },
{ x: 2008, y: 20.6 },
{ x: 2009, y: 21.3 },
{ x: 2010, y: 22 },
{ x: 2011, y: 22.7 },
{ x: 2012, y: 23.4 },
{ x: 2013, y: 24.1 },
{ x: 2014, y: 24.8 },
{ x: 2015, y: 25.5 }
]
}, {
type: "stackedArea100",
yValueFormatString: "#,###.##'%'",
showInLegend: true,
name: "Recycled",
dataPoints: [
{ x: 1980, y: 0 },
{ x: 1981, y: 0 },
{ x: 1982, y: 0 },
{ x: 1983, y: 0 },
{ x: 1984, y: 0 },
{ x: 1985, y: 0 },
{ x: 1986, y: 0 },
{ x: 1987, y: 0 },
{ x: 1988, y: 0.6 },
{ x: 1989, y: 1.3 },
{ x: 1990, y: 2 },
{ x: 1991, y: 2.7 },
{ x: 1992, y: 3.4 },
{ x: 1993, y: 4.1 },
{ x: 1994, y: 4.8 },
{ x: 1995, y: 5.5 },
{ x: 1996, y: 6.2 },
{ x: 1997, y: 6.9 },
{ x: 1998, y: 7.6 },
{ x: 1999, y: 8.3 },
{ x: 2000, y: 9 },
{ x: 2001, y: 9.7 },
{ x: 2002, y: 10.4 },
{ x: 2003, y: 11.1 },
{ x: 2004, y: 11.8 },
{ x: 2005, y: 12.5 },
{ x: 2006, y: 13.2 },
{ x: 2007, y: 13.9 },
{ x: 2008, y: 14.6 },
{ x: 2009, y: 15.3 },
{ x: 2010, y: 16 },
{ x: 2011, y: 16.7 },
{ x: 2012, y: 17.4 },
{ x: 2013, y: 18.1 },
{ x: 2014, y: 18.8 },
{ x: 2015, y: 19.5 },
]
}]
}
}
}
}
</script>
<template>
<CanvasJSChart :options="options"/>
</template>
/*main.js*/
import { createApp } from 'vue'
import App from './App.vue'
import CanvasJSChart from '@canvasjs/vue-charts';
const app = createApp(App);
app.use(CanvasJSChart); // install the CanvasJS Vuejs Chart Plugin
app.mount('#app');
In the above example, format of axis-labels are defined by setting valueFormatString property. Similarly, format of x-value & y-value displayed in tooltip are customized by setting xValueFormatString & yValueFormatString properties.
Note For step by step instructions, follow our Vuejs Integration Tutorial