Vue.js OHLC Chart with JSON Data

Download Vue.js Chart Samples

Example shows Vuejs OHLC chart plotted using JSON data. Similarly you can render Charts using other data-sources like CSV or XML.

/* App.vue */
<script>
  import msftData from './assets/msft2020.json';
  export default {
    data() {
      var dataPoints = [];
      msftData.forEach(data => {
        dataPoints.push({ x: new Date(data["date"]), y: [ data["open"], data["high"], data["low"], data["close"]] });
      });
      return {
        chart: null,
        options: {
          animationEnabled: true,
          theme: "light2",
          title:{
            text: "MSFT Stock Price - 2020"
          },
          axisX: {
            interval: 1,
            intervalType: "month",
            valueFormatString: "MMM"
          },
          axisY: {
            prefix: "$",
            title: "Price in USD"
          },
          data: [{
            type: "ohlc",
            yValueFormatString: "$###0.00", 
            xValueFormatString: "DD MMM YYYY",
            dataPoints: dataPoints
          }]
        },
        styleOptions: {
          width: "100%",
          height: "360px"
        }
      }
    }
  }
</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');

Chart Customizations

Color of entire dataseries can be changed by setting color property. At the same time, color of individual datapoint can be changed by setting color property at datapoint level. Other commonly used customization options are exportEnabled, animationEnabled, etc.

Note   For step by step instructions, follow our Vuejs Integration Tutorial