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>
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