Demos
Features
Charts
Chart Types
Stock

Stock Chart

A Stock Chart can show fluctuations in data, representing the fluctuations for stock (as the name implies), daily rainfall, annual temperatures, or other types of fluctuating data.

JavaScript
Angular
Vue
Vue3
React
Description
app.vue
index.html
data.js
Copy to CodeMine

SpreadJS supports High-Low-Close, Open-High-Low-Close, Volume-High-Low-Close, and Volume-Open-High-Low-Close chart types. Use the GC.Spread.Sheets.Charts.ChartType.stockHLC to get the chart type.

A High-Low-Close chart can be added to Spread, and the chart style can be changed using the chart API. The stockHLC chart requires that the data be organized as high, low, and close, with the close value in between the high and low values.

     var chart = sheet.charts.add('stockHLC', GC.Spread.Sheets.Charts.ChartType.stockHLC, 0, 100, 400, 300, 'A1:D4')
     var title = chart.title()
     chart.title(title);

The Open-High-Low-Close chart adds the Open data to the stockHLC data. The values are organized as: open, high, low, and then close.

The Volume-High-Low-Close chart can be added to Spread, and the chart style can be changed using the chart API. The stockVHLC adds the volume data to the stockVHLC data. The values are organized in the following order: volume, high, low, and then close. The volume series' chart type is columnStacked, and you can change that series' style.

     var chart = sheet.charts.add('stockVHLC', GC.Spread.Sheets.Charts.ChartType.stockVHLC, 0, 100, 400, 300, 'A1:D4');
     var series = chart.series().get();
     var ser = series[0];
     var ser.backColor = 'red';
     chart.series().set(0, ser);

The Volume-Open-High-Low-Close chart adds all the data. The values are organized in the following the order: column, open, high, low, and then close.

SpreadJS supports High-Low-Close, Open-High-Low-Close, Volume-High-Low-Close, and Volume-Open-High-Low-Close chart types. Use the GC.Spread.Sheets.Charts.ChartType.stockHLC to get the chart type. A High-Low-Close chart can be added to Spread, and the chart style can be changed using the chart API. The stockHLC chart requires that the data be organized as high, low, and close, with the close value in between the high and low values. The Open-High-Low-Close chart adds the Open data to the stockHLC data. The values are organized as: open, high, low, and then close. The Volume-High-Low-Close chart can be added to Spread, and the chart style can be changed using the chart API. The stockVHLC adds the volume data to the stockVHLC data. The values are organized in the following order: volume, high, low, and then close. The volume series' chart type is columnStacked, and you can change that series' style. The Volume-Open-High-Low-Close chart adds all the data. The values are organized in the following the order: column, open, high, low, and then close.
<template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread"> <gc-worksheet /> <gc-worksheet /> <gc-worksheet /> <gc-worksheet /> </gc-spread-sheets> </div> </template> <script setup> import GC from "@mescius/spread-sheets"; import { ref } from "vue"; import "@mescius/spread-sheets-vue"; import "@mescius/spread-sheets-charts"; import { getData } from './data.js'; const spreadRef = ref(null); const data = getData(); function initSpread(spread) { spreadRef.value = spread; spread.suspendPaint(); spread.options.tabStripRatio = 0.7; let chartTypeStr = ['stockHLC', 'stockOHLC', 'stockVHLC', 'stockVOHLC']; let chartType = [{ type: GC.Spread.Sheets.Charts.ChartType.stockHLC, desc: chartTypeStr[0], }, { type: GC.Spread.Sheets.Charts.ChartType.stockOHLC, desc: chartTypeStr[1], }, { type: GC.Spread.Sheets.Charts.ChartType.stockVHLC, desc: chartTypeStr[2], }, { type: GC.Spread.Sheets.Charts.ChartType.stockVOHLC, desc: chartTypeStr[3], }]; let sheets = spread.sheets; let sheet = sheets[sheets.length - 1]; sheet.suspendPaint(); sheet.name(chartTypeStr[chartTypeStr.length - 1]); sheet.setArray(0, 0, data); sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy'); sheet.setColumnWidth(0, 80); sheet.resumePaint(); initStockHLCChartSheetData(sheets[0], chartTypeStr[0]); initStockOHLCChartSheetData(sheets[1], chartTypeStr[1]); initStockVHLCChartSheetData(sheets[2], chartTypeStr[2]); for (let i = 0; i < chartType.length; i++) { sheet = sheets[i]; initChart(sheet, chartType[i].type, i); //add chart } spread.resumePaint(); } function initStockHLCChartSheetData(sheet, sheetName) { sheet.name(sheetName); sheet.suspendPaint(); let formula = "='stockVOHLC'!"; for (let i = 0; i < data.length - 1; i++) { let formula1 = formula + 'A' + (i + 1); sheet.setFormula(i, 0, formula1); formula1 = formula + 'D' + (i + 1); sheet.setFormula(i, 1, formula1); formula1 = formula + 'E' + (i + 1); sheet.setFormula(i, 2, formula1); formula1 = formula + 'F' + (i + 1); sheet.setFormula(i, 3, formula1); } sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy'); sheet.setColumnWidth(0, 80); sheet.resumePaint(); } function initStockOHLCChartSheetData(sheet, sheetName) { sheet.name(sheetName); sheet.suspendPaint(); let formula = "='stockVOHLC'!"; for (let i = 0; i < data.length - 1; i++) { let formula1 = formula + 'A' + (i + 1); sheet.setFormula(i, 0, formula1); formula1 = formula + 'C' + (i + 1); sheet.setFormula(i, 1, formula1); formula1 = formula + 'D' + (i + 1); sheet.setFormula(i, 2, formula1); formula1 = formula + 'E' + (i + 1); sheet.setFormula(i, 3, formula1); formula1 = formula + 'F' + (i + 1); sheet.setFormula(i, 4, formula1); } sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy'); sheet.setColumnWidth(0, 80); sheet.resumePaint(); } function initStockVHLCChartSheetData(sheet, sheetName) { sheet.name(sheetName); sheet.suspendPaint(); let formula = "='stockVOHLC'!"; for (let i = 0; i < data.length - 1; i++) { let formula1 = formula + 'A' + (i + 1); sheet.setFormula(i, 0, formula1); formula1 = formula + 'B' + (i + 1); sheet.setFormula(i, 1, formula1); formula1 = formula + 'D' + (i + 1); sheet.setFormula(i, 2, formula1); formula1 = formula + 'E' + (i + 1); sheet.setFormula(i, 3, formula1); formula1 = formula + 'f' + (i + 1); sheet.setFormula(i, 4, formula1); } sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy'); sheet.setColumnWidth(0, 80); sheet.resumePaint(); } function initChart(sheet, chartType, index) { sheet.suspendPaint(); let rangeIndex = ['A1:D61', 'A1:E61', 'A1:E61', 'A1:F61']; //add chart sheet.charts.add('Chart1', chartType, 270, 60, 615, 270, rangeIndex[index]); sheet.resumePaint(); } </script> <style scoped> .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #app { height: 100%; } </style>
<!DOCTYPE html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>SpreadJS VUE</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script> <script src="./systemjs.config.js"></script> <script src="./compiler.js" type="module"></script> <script> var System = SystemJS; System.import("./src/app.js"); System.import('$DEMOROOT$/en/lib/vue3/license.js'); </script> </head> <body> <div id="app"></div> </body> </html>
export function getData() { return [["Date", "Volume", "Open", "High", "Low", "Close"], [new Date("2008-08-31"), 46085, 17587.94, 17592.76, 17482.76, 17577.94], [new Date("2008-09-01"), 40314, 17508.94, 17538.76, 17400.76, 17518.94], [new Date("2008-09-02"), 45308, 17551.94, 17584.76, 17517.76, 17554.94], [new Date("2008-09-03"), 53401, 17600.94, 17698.76, 17428.76, 17618.94], [new Date("2008-09-04"), 57500, 17748.94, 17786.76, 17623.76, 17718.94], [new Date("2008-09-05"), 43756, 17712.94, 17754.71, 17600.76, 17718.94], [new Date("2008-09-06"), 55737, 17686.94, 17797.76, 17647.76, 17718.94], [new Date("2008-09-07"), 61668, 17858.94, 17867.76, 17657.76, 17818.94], [new Date("2008-09-08"), 47815, 17748.94, 17832.76, 17721.76, 17778.94], [new Date("2008-09-09"), 45085, 17748.94, 17795.76, 17639.76, 17688.94], [new Date("2008-09-10"), 42314, 17661.94, 17768.76, 17530.76, 17638.94], [new Date("2008-09-11"), 35308, 17545.94, 17798.76, 17511.76, 17518.94], [new Date("2008-09-12"), 51401, 17698.94, 17722.76, 17541.76, 17598.94], [new Date("2008-09-13"), 55500, 17699.94, 17788.76, 17591.76, 17668.94], [new Date("2008-09-14"), 43756, 17576.94, 17662.76, 17455.76, 17566.94], [new Date("2008-09-15"), 47737, 17655.94, 17692.76, 17493.76, 17608.94], [new Date("2008-09-16"), 45668, 17512.94, 17588.76, 17494.76, 17518.94], [new Date("2008-09-17"), 47815, 17548.94, 17584.76, 17482.76, 17555.94], [new Date("2008-09-18"), 57232, 17671.94, 17698.76, 17389.76, 17658.94], [new Date("2008-09-19"), 46085, 17600.94, 17608.76, 17419.76, 17558.94], [new Date("2008-09-20"), 42314, 17698.94, 17722.76, 17555.76, 17598.94], [new Date("2008-09-21"), 45308, 17690.94, 17727.76, 17649.76, 17681.94], [new Date("2008-09-22"), 53401, 17838.94, 17954.76, 17619.76, 17758.94], [new Date("2008-09-23"), 60500, 17938.94, 17982.76, 17773.76, 17888.94], [new Date("2008-09-24"), 53756, 17780.94, 17965.76, 17737.76, 17818.94], [new Date("2008-09-25"), 55737, 17818.94, 17862.76, 17701.76, 17778.94], [new Date("2008-09-26"), 45668, 17748.94, 17916.76, 17656.76, 17778.94], [new Date("2008-09-27"), 49815, 17698.94, 17928.76, 17601.76, 17778.94], [new Date("2008-09-28"), 46085, 17690.94, 17798.76, 17569.76, 17688.94], [new Date("2008-09-29"), 42314, 17681.94, 17662.76, 17488.76, 17638.94], [new Date("2008-09-30"), 45308, 17454.94, 17499.76, 17411.76, 17444.94], [new Date("2008-10-01"), 43401, 17428.94, 17538.76, 17362.76, 17458.94], [new Date("2008-10-02"), 47500, 17500.94, 17592.76, 17476.76, 17518.94], [new Date("2008-10-03"), 51756, 17608.94, 17711.76, 17576.76, 17618.94], [new Date("2008-10-04"), 55737, 17676.94, 17832.76, 17566.76, 17666.94], [new Date("2008-10-05"), 45668, 17677.94, 17772.76, 17567.76, 17678.94], [new Date("2008-10-06"), 47815, 17545.94, 17867.76, 17508.76, 17570.94], [new Date("2008-10-07"), 46085, 17556.94, 17674.76, 17467.76, 17518.94], [new Date("2008-10-08"), 42314, 17554.94, 17692.76, 17410.76, 17554.94], [new Date("2008-10-09"), 45308, 17611.94, 17644.76, 17300.76, 17568.94], [new Date("2008-10-10"), 53401, 17328.94, 17424.76, 17261.76, 17368.94], [new Date("2008-10-11"), 57500, 17423.94, 17488.76, 17292.76, 17444.94], [new Date("2008-10-12"), 43756, 17538.94, 17572.76, 17412.76, 17438.94], [new Date("2008-10-13"), 55737, 17428.94, 17429.76, 17308.76, 17368.94], [new Date("2008-10-14"), 45668, 17461.94, 17481.76, 17374.76, 17401.94], [new Date("2008-10-15"), 47815, 17500.94, 17672.76, 17367.76, 17518.94], [new Date("2008-10-16"), 46085, 17530.94, 17744.76, 17487.76, 17570.94], [new Date("2008-10-17"), 42314, 17468.94, 17524.76, 17341.76, 17368.94], [new Date("2008-10-18"), 45308, 17434.94, 17488.76, 17292.76, 17444.94], [new Date("2008-10-19"), 61401, 17578.94, 17592.76, 17442.76, 17478.94], [new Date("2008-10-20"), 53500, 17418.94, 17429.76, 17358.76, 17378.94], [new Date("2008-10-21"), 36756, 17456.94, 17481.76, 17314.76, 17401.94], [new Date("2008-10-22"), 55737, 17330.94, 17512.76, 17227.76, 17300.94], [new Date("2008-10-23"), 45668, 17262.94, 17380.76, 17237.76, 17270.94], [new Date("2008-10-24"), 47815, 17448.94, 17479.76, 17312.76, 17438.94], [new Date("2008-10-25"), 40085, 17345.94, 17429.76, 17205.76, 17398.94], [new Date("2008-10-26"), 34314, 17321.94, 17421.76, 17277.76, 17371.94], [new Date("2008-10-27"), 45308, 17411.94, 17422.76, 17357.76, 17400.94], [new Date("2008-10-28"), 53401, 17250.94, 17454.76, 17227.76, 17270.94], [new Date("2008-10-29"), 57500, 17468.94, 17654.76, 17251.76, 17368.94], [new Date("2008-10-30"), 33756, 17544.94, 17548.76, 17232.76, 17444.94]] };
(function (global) { SystemJS.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, packageConfigPaths: [ './node_modules/*/package.json', "./node_modules/@mescius/*/package.json", "./node_modules/@babel/*/package.json", "./node_modules/@vue/*/package.json" ], map: { 'vue': "npm:vue/dist/vue.esm-browser.js", 'tiny-emitter': 'npm:tiny-emitter/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', "systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js", '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-resources-en': 'npm:@mescius/spread-sheets-resources-en/index.js', '@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js', '@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js', '@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js', }, meta: { '*.css': { loader: 'systemjs-plugin-css' }, '*.vue': { loader: "../plugin-vue/index.js" } } }); })(this);