Example shows Vuejs line chart that animates from left to right side of the chart.
/* App.vue */
<script>
export default {
data() {
return {
chart: null,
options: {
theme: "light2", // "light1", "dark1", "dark2"
animationEnabled: true, // change to true
animationDuration: 3000,
title:{
text: "BTC/USD"
},
axisY: {
title: "Closing Price in USD",
prefix: "$"
},
data: [{
type: "line", // Change type to "bar", "area", "spline", "pie",etc.
xValueFormatString: "MMM DD, YYYY",
yValueFormatString: "$#,###.00",
markerSize: 0,
dataPoints: [
{ x: new Date("2020-01-01"), y: 8163.692383 },
{ x: new Date("2020-01-08"), y: 8827.764648 },
{ x: new Date("2020-01-15"), y: 8745.894531 },
{ x: new Date("2020-01-22"), y: 9358.589844 },
{ x: new Date("2020-01-29"), y: 9180.962891 },
{ x: new Date("2020-02-05"), y: 10208.23633 },
{ x: new Date("2020-02-12"), y: 10141.99609 },
{ x: new Date("2020-02-19"), y: 9341.705078 },
{ x: new Date("2020-02-26"), y: 8787.786133 },
{ x: new Date("2020-03-04"), y: 7909.729492 },
{ x: new Date("2020-03-11"), y: 5225.629395 },
{ x: new Date("2020-03-18"), y: 6734.803711 },
{ x: new Date("2020-03-25"), y: 6438.644531 },
{ x: new Date("2020-04-01"), y: 7176.414551 },
{ x: new Date("2020-04-08"), y: 6842.427734 },
{ x: new Date("2020-04-15"), y: 6880.323242 },
{ x: new Date("2020-04-22"), y: 7807.058594 },
{ x: new Date("2020-04-29"), y: 9003.070313 },
{ x: new Date("2020-05-06"), y: 8804.477539 },
{ x: new Date("2020-05-13"), y: 9729.038086 },
{ x: new Date("2020-05-20"), y: 8835.052734 },
{ x: new Date("2020-05-27"), y: 9529.803711 },
{ x: new Date("2020-06-03"), y: 9795.700195 },
{ x: new Date("2020-06-10"), y: 9538.024414 },
{ x: new Date("2020-06-17"), y: 9629.658203 },
{ x: new Date("2020-06-24"), y: 9137.993164 },
{ x: new Date("2020-07-01"), y: 9252.277344 },
{ x: new Date("2020-07-08"), y: 9243.213867 },
{ x: new Date("2020-07-15"), y: 9374.887695 },
{ x: new Date("2020-07-22"), y: 10912.82324 },
{ x: new Date("2020-07-29"), y: 11205.89258 },
{ x: new Date("2020-08-05"), y: 11410.52539 },
{ x: new Date("2020-08-12"), y: 11991.2334 },
{ x: new Date("2020-08-19"), y: 11366.13477 },
{ x: new Date("2020-08-26"), y: 11970.47852 },
{ x: new Date("2020-09-02"), y: 10131.5166 },
{ x: new Date("2020-09-09"), y: 10796.95117 },
{ x: new Date("2020-09-16"), y: 10538.45996 },
{ x: new Date("2020-09-23"), y: 10844.64063 },
{ x: new Date("2020-09-30"), y: 10604.40625 },
{ x: new Date("2020-10-07"), y: 11425.89941 },
{ x: new Date("2020-10-14"), y: 11916.33496 },
{ x: new Date("2020-10-21"), y: 13654.21875 },
{ x: new Date("2020-10-28"), y: 13950.30078 },
{ x: new Date("2020-11-04"), y: 15290.90234 },
{ x: new Date("2020-11-11"), y: 17645.40625 },
{ x: new Date("2020-11-18"), y: 19107.46484 },
{ x: new Date("2020-11-25"), y: 18802.99805 },
{ x: new Date("2020-12-02"), y: 18321.14453 },
{ x: new Date("2020-12-09"), y: 19417.07617 },
{ x: new Date("2020-12-16"), y: 23783.0293 },
{ x: new Date("2020-12-23"), y: 27362.4375 },
{ x: new Date("2020-12-30"), y: 29001.7207 }
]
}]
},
styleOptions: {
width: "100%",
height: "360px"
}
}
},
methods: {
chartInstance(chart) {
this.chart = chart;
}
}
}
</script>
<template>
<CanvasJSChart :options="options" :style="styleOptions" @chart-ref="chartInstance"/>
</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');
animationDuration property can be used to change the time taken for animation. Some other commonly used customization options are zoomEnabled, theme, etc.
Note For step by step instructions, follow our Vuejs Integration Tutorial