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');
OHLC charts can be converted to candlestick charts by changing the type to "candlestick". Other commonly used customization options are zoomEnabled, exportEnabled, etc.