Vue.js OHLC Chart

Download Vue.js Chart Samples

Example shows Vuejs OHLC Chart with Open, High, Low & Closing price of the stock.

/* App.vue */
<script>
  export default {
    data() {
      return {
        chart: null,
        options: {
          animationEnabled: true,
          theme: "dark2",
          exportEnabled: true,
          title:{
            text: "Litcoin Price"
          },
          axisX: {
            interval:1,
            intervalType: "month",
            valueFormatString: "MMM"
          },
          axisY: {
            prefix: "$",
            title: "Price in USD"
          },
          data: [{
            type: "ohlc",
            yValueFormatString: "$###0.00", 
            xValueFormatString: "MMM YYYY",
            dataPoints: [
              { x: new Date(2020, 0, 1),y: [41.326534, 69.738029, 39.450844, 67.879494] },
              { x: new Date(2020, 1, 1),y: [67.908516, 83.689163, 57.804031, 58.543262] },
              { x: new Date(2020, 2, 1),y: [58.530544, 63.773266, 25.573105, 39.299103] },
              { x: new Date(2020, 3, 1),y: [39.284687, 50.921558, 37.445934, 46.71402] },
              { x: new Date(2020, 4, 1),y: [46.714264, 50.044678, 40.135761, 45.591885] },
              { x: new Date(2020, 5, 1),y: [45.57423, 49.761257, 40.754646, 41.467793] },
              { x: new Date(2020, 6, 1),y: [41.43354, 58.738693, 40.65646, 57.998138] },
              { x: new Date(2020, 7, 1),y: [57.998138, 68.519516, 52.322857, 61.113796] },
              { x: new Date(2020, 8, 1),y: [61.105076, 64.18396, 42.54327, 46.37146] },
              { x: new Date(2020, 9, 1),y: [46.426956, 60.302204, 44.201286, 55.59026] },
              { x: new Date(2020, 10, 1),y: [55.59026, 93.576019, 51.60656, 87.574631] },
              { x: new Date(2020, 11, 1),y: [87.576599, 138.319717, 70.231308, 124.690323] }
            ]
          }]
        },
        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

OHLC charts can be converted to candlestick charts by changing the type to "candlestick". Other commonly used customization options are zoomEnabled, exportEnabled, etc.

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