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>
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