Example shows Vuejs candlestick chart that's formed by a column with vertical lines. They represent open, high, low & close values of a datapoint.
/* App.vue */
<script>
export default {
data() {
return {
chart: null,
options: {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
exportEnabled: true,
title: {
text: "Bitcoin Price"
},
subtitles: [{
text: "Weekly Average"
}],
axisX: {
interval: 1,
intervalType: "month",
valueFormatString: "MMM"
},
axisY: {
prefix: "$",
title: "Price in USD"
},
toolTip: {
content: "Date: {x}<br /><strong>Price:</strong><br />Open: {y[0]}, Close: {y[3]}<br />High: {y[1]}, Low: {y[2]}"
},
data: [{
type: "candlestick",
yValueFormatString: "$##0.00",
xValueFormatString: "DD MMM YYYY",
dataPoints: [
{ x: new Date(2020, 0, 1), y: [7194.89209, 8178.21582, 6914.996094, 8163.692383] },
{ x: new Date(2020, 0, 8), y: [8161.935547, 8879.511719, 7726.77492, 8827.764648] },
{ x: new Date(2020, 0, 15), y: [8825.34375, 9164.362305, 8544.520508, 8745.894531] },
{ x: new Date(2020, 0, 22), y: [8744.210938, 9358.589844, 8266.84082, 9358.589844] },
{ x: new Date(2020, 0, 29), y: [9357.47073, 9553.125977, 9112.811523, 9180.962891] },
{ x: new Date(2020, 1, 5), y: [9183.416016, 10210.05273, 9163.70412, 10208.23633] },
{ x: new Date(2020, 1, 12), y: [10202.3877, 10457.62695, 9507.637695, 10141.99609] },
{ x: new Date(2020, 1, 19), y: [10143.79883, 10191.67578, 9305.021484, 9341.705078] },
{ x: new Date(2020, 1, 26), y: [9338.290039, 9354.77832, 8471.212891, 8787.786133] },
{ x: new Date(2020, 2, 4), y: [8788.541992, 9167.695313, 7690.098145, 7909.729492] },
{ x: new Date(2020, 2, 11), y: [7910.089844, 7950.814453, 4106.980957, 5225.629395] },
{ x: new Date(2020, 2, 18), y: [5227.11377, 6844.261719, 5069.335938, 6734.803711] },
{ x: new Date(2020, 2, 25), y: [6738.716797, 6892.51123, 5903.234375, 6438.644531] },
{ x: new Date(2020, 3, 1), y: [6437.319336, 7427.939453, 6202.373535, 7176.414551] },
{ x: new Date(2020, 3, 8), y: [7179.28323, 7356.223633, 6668.259766, 6842.427734] },
{ x: new Date(2020, 3, 15), y: [6845.561523, 7280.521973, 6555.504395, 6880.323242] },
{ x: new Date(2020, 3, 22), y: [6879.44043, 7814.527344, 6867.781738, 7807.058594] },
{ x: new Date(2020, 3, 29), y: [7806.71242, 9440.650391, 7786.049316, 9003.070313] },
{ x: new Date(2020, 4, 6), y: [9007.441406, 9996.743164, 8374.323242, 8804.477539] },
{ x: new Date(2020, 4, 13), y: [8805.387695, 9906.030273, 8805.387695, 9729.038086] },
{ x: new Date(2020, 4, 20), y: [9725.32912, 9804.793945, 8719.667969, 8835.052734] },
{ x: new Date(2020, 4, 27), y: [8837.380859, 10199.56543, 8834.157227, 9529.803711] },
{ x: new Date(2020, 5, 3), y: [9533.760742, 9887.610352, 9458.150391, 9795.700195] },
{ x: new Date(2020, 5, 10), y: [9794.119141, 9938.297852, 8990.175781, 9538.024414] },
{ x: new Date(2020, 5, 17), y: [9533.78418, 9670.541016, 9247.379883, 9629.658203] },
{ x: new Date(2020, 5, 24), y: [9632.149414, 9680.367188, 8975.525391, 9137.993164] },
{ x: new Date(2020, 6, 1), y: [9145.985352, 9375.474609, 8977.015625, 9252.277344] },
{ x: new Date(2020, 6, 8), y: [9253.020508, 9450.335938, 9118.001953, 9243.213867] },
{ x: new Date(2020, 6, 15), y: [9241.897461, 9407.262695, 9088.947266, 9374.887695] },
{ x: new Date(2020, 6, 22), y: [9375.080078, 11298.22168, 9319.65332, 10912.82324] },
{ x: new Date(2020, 6, 29), y: [10912.95313, 12034.14453, 10856.1416, 11205.89258] },
{ x: new Date(2020, 7, 5), y: [11203.82324, 12045.14063, 11158.28516, 11410.52539] },
{ x: new Date(2020, 7, 12), y: [11404.59668, 12359.05664, 11216.87207, 11991.2334] },
{ x: new Date(2020, 7, 19), y: [11990.88477, 12028.92383, 11189.85059, 11366.13477] },
{ x: new Date(2020, 7, 26), y: [11366.89453, 12067.08106, 11185.94141, 11970.47852] },
{ x: new Date(2020, 8, 2), y: [11964.82324, 11964.82324, 9916.493164, 10131.5166] },
{ x: new Date(2020, 8, 9), y: [10134.15137, 10938.63184, 10017.25098, 10796.95117] },
{ x: new Date(2020, 8, 16), y: [10797.76172, 11134.09277, 10380.26074, 10538.45996] },
{ x: new Date(2020, 8, 23), y: [10535.49219, 10945.34766, 10197.86523, 10844.64063] },
{ x: new Date(2020, 8, 30), y: [10843.87109, 10933.6242, 10416.68945, 10604.40625] },
{ x: new Date(2020, 9, 7), y: [10603.35547, 11698.46777, 10562.50684, 11425.89941] },
{ x: new Date(2020, 9, 14), y: [11429.04785, 11999.91797, 11223.0127, 11916.33496] },
{ x: new Date(2020, 9, 21), y: [11913.07715, 13759.66895, 11900.92871, 13654.21875] },
{ x: new Date(2020, 9, 28), y: [13654.21484, 14028.21387, 12932.25098, 13950.30078] },
{ x: new Date(2020, 10, 4), y: [13950.48828, 15903.4375, 13580.47168, 15290.90234] },
{ x: new Date(2020, 10, 11), y: [15290.90918, 17782.91992, 15290.00684, 17645.40625] },
{ x: new Date(2020, 10, 18), y: [17645.19141, 19348.27148, 17352.90625, 19107.46484] },
{ x: new Date(2020, 10, 25), y: [19104.41016, 19845.97461, 16351.03516, 18802.99805] },
{ x: new Date(2020, 11, 2), y: [18801.74414, 19566.19141, 18269.94531, 18321.14453] },
{ x: new Date(2020, 11, 9), y: [18320.88477, 19525.00781, 17619.5332, 19417.07617] },
{ x: new Date(2020, 11, 16), y: [19418.81836, 24209.66016, 19298.31641, 23783.0293] },
{ x: new Date(2020, 11, 23), y: [23781.97461, 28288.83984, 22777.59766, 27362.4375] },
{ x: new Date(2020, 11, 30), y: [27360.08984, 29600.62695, 27360.08984, 29374.15234] }
]
}]
},
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');
risingColor & fallingColor properties can be used to show rise and fall in prices. Also crosshair can be enabled for more detailed analysis of the chart. Other commonly used customization options are showInLegend, exportEnabled, animationEnabled, etc.
Note For step by step instructions, follow our Vuejs Integration Tutorial