Example shows Vuejs multi-series candlestick chart with animation.
/* App.vue */
<script>
export default {
data() {
return {
chart: null,
options: {
animationEnabled: true,
theme: "light1", // "light1", "light2", "dark1", "dark2"
exportEnabled: true,
title:{
text: "Stock Price: TSLA Vs GOOGL"
},
axisX: {
valueFormatString: "MMM YY"
},
axisY: {
prefix: "$",
title: "Price (in USD)"
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
itemclick: this.toggleDataSeries
},
data: [{
type: "candlestick",
showInLegend: true,
name: "TSLA",
yValueFormatString: "$###0.00",
xValueFormatString: "MMMM YYYY",
dataPoints: [
{ x: new Date(2020,0,1), y: [28.299999, 43.533333, 28.114, 43.371334] },
{ x: new Date(2020,1,1), y: [44.912666, 64.599335, 40.768002, 44.532665] },
{ x: new Date(2020,2,1), y: [47.417332, 53.798668, 23.367332, 34.933334] },
{ x: new Date(2020,3,1), y: [33.599998, 57.987999, 29.76, 52.125332] },
{ x: new Date(2020,4,1), y: [50.333332, 56.219334, 45.535999, 55.666668] },
{ x: new Date(2020,5,1), y: [57.200001, 72.512665, 56.939999, 71.987335] },
{ x: new Date(2020,6,1), y: [72.199997, 119.666, 72.033333, 95.384003] },
{ x: new Date(2020,7,1), y: [96.613335, 166.713333, 91, 166.106674] },
{ x: new Date(2020,8,1), y: [167.380005, 167.496674, 109.959999, 143.003326] },
{ x: new Date(2020,9,1), y: [146.919998, 155.300003, 126.370003, 129.346664] },
{ x: new Date(2020,10,1), y: [131.333328, 202.600006, 130.766663, 189.199997] },
{ x: new Date(2020,11,1), y: [199.196671, 239.573334, 180.403336, 235.223328] },
{ x: new Date(2021,0,1), y: [ 239.820007, 300.133331, 239.063339, 264.51001 ] },
{ x: new Date(2021,1,1), y: [ 271.429993, 293.5, 206.333328, 225.166672 ] },
{ x: new Date(2021,2,1), y: [ 230.036667, 240.369995, 179.830002, 222.643326 ] },
{ x: new Date(2021,3,1), y: [ 229.456665, 260.263336, 219.806671, 236.479996 ] },
{ x: new Date(2021,4,1), y: [ 234.600006, 235.333328, 182.32666, 208.406662 ] },
{ x: new Date(2021,5,1), y: [ 209.266663, 232.539993, 190.406662, 226.566666 ] },
{ x: new Date(2021,6,1), y: [ 227.973328, 233.333328, 206.820007, 229.066666 ] },
{ x: new Date(2021,7,1), y: [ 233.333328, 246.796661, 216.279999, 245.240005 ] },
{ x: new Date(2021,8,1), y: [ 244.693329, 266.333344, 236.28334, 258.493347 ] },
{ x: new Date(2021,9,1), y: [ 259.466675, 371.736664, 254.529999, 371.333344 ] },
{ x: new Date(2021,10,1), y: [ 381.666656, 414.496674, 326.200012, 381.58667 ] },
{ x: new Date(2021,11,1), y: [ 386.899994, 390.946655, 295.373322, 352.26001 ] }
]
},
{
type: "candlestick",
showInLegend: true,
name: "GOOGL",
yValueFormatString: "$###0.00",
dataPoints: [
{ x: new Date(2020,0,1), y: [67.420502, 75.028999, 67.324501, 71.639] },
{ x: new Date(2020,1,1), y: [73.082497, 76.537003, 63.4105, 66.962502] },
{ x: new Date(2020,2,1), y: [67.569504, 70.4095, 50.443501, 58.0975] },
{ x: new Date(2020,3,1), y: [56.200001, 68.0075, 53.754002, 67.334999] },
{ x: new Date(2020,4,1), y: [66.204498, 72.255501, 64.800499, 71.676003] },
{ x: new Date(2020,5,1), y: [71.285004, 73.789497, 67.582497, 70.902496] },
{ x: new Date(2020,6,1), y: [70.958504, 79.352501, 70.709, 74.397499] },
{ x: new Date(2020,7,1), y: [74.550003, 82.639503, 73.2015, 81.476501] },
{ x: new Date(2020,8,1), y: [81.608002, 86.305, 70.107498, 73.279999] },
{ x: new Date(2020,9,1), y: [74.182999, 84.066002, 71.661499, 80.805496] },
{ x: new Date(2020,10,1), y:[81.177002, 90.844498, 80.605499, 87.720001] },
{ x: new Date(2020,11,1), y:[88.333, 92.191498, 84.699997, 87.632004] },
{ x: new Date(2021,0,1), y: [88, 96.603996, 84.805, 91.367996] },
{ x: new Date(2021,1,1), y: [92.2295, 107.257004, 92.2295, 101.095497] },
{ x: new Date(2021,2,1), y: [102.400002, 105.686996, 99.699997, 103.125999] },
{ x: new Date(2021,3,1), y: [104.612503, 121.569, 104.571503, 117.675003] },
{ x: new Date(2021,4,1), y: [118.245499, 119.452499, 109.681, 117.842499] },
{ x: new Date(2021,5,1), y: [118.722, 123.095497, 116.475998, 122.0895] },
{ x: new Date(2021,6,1), y: [121.724998, 138.296997, 121.531502, 134.726501] },
{ x: new Date(2021,7,1), y: [135.117004, 145.970505, 133.319504, 144.697495] },
{ x: new Date(2021,8,1), y: [145, 146.253998, 133.556, 133.675995] },
{ x: new Date(2021,9,1), y: [134.447495, 148.649994, 131.050003, 148.046005] },
{ x: new Date(2021,10,1), y: [148.046005, 150.966507, 141.601501, 141.897507] },
{ x: new Date(2021,11,1), y: [144, 149.100006, 139.320999, 144.852005] }
]
}]
},
styleOptions: {
width: "100%",
height: "360px"
}
}
},
methods: {
toggleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
e.chart.render();
}
}
}
</script>
<template>
<CanvasJSChart :options="options" :style="styleOptions" />
</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');
You can enable export feature of the chart by setting the exportEnabled property to true. You can also export the chart programmatically by using the exportChart() method. Some other frequently used customization options are animationEnabled, type, etc.
Note For step by step instructions, follow our Vuejs Integration Tutorial