SpreadJS supports columnClustered, columnStacked, and columnStacked100 column charts. You can use the GC.Spread.Sheets.Charts.ChartType.columnClustered property to get the chart type.
For example, you can insert a columnClustered chart type and change the chart style using the chart API.
The column chart can be stacked normally or 100 percent using the columnStacked and columnStacked100 chart types.
The columnStacked chart type stacks the series vertically.
The ColumnStacked100 chart type stacks the series vertically and equalizes the values to meet 100 percent.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import '@mescius/spread-sheets-shapes';
import '@mescius/spread-sheets-charts';
const colorArray = ['rgb(120, 180, 240)', 'rgb(240, 160, 80)', 'rgb(140, 240, 120)', 'rgb(120, 150, 190)'];
export function AppFunc() {
const initSpread = (spread) => {
let chartType = [{
type: GC.Spread.Sheets.Charts.ChartType.columnClustered,
desc: "columnClustered",
dataArray: [
["", 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],
["London", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2],
["Berlin", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
],
dataFormula: "A1:M5",
changeStyle: function (chart) {
changeChartTitle(chart, "The Average Monthly Rainfall");
changColumnChartDataLabels(chart);
chart.axes({primaryValue: {title: {text: "Rainfall(mm)"}}});
changeChartSeriesColor(chart);
changeChartSeriesGapWidthAndOverLap(chart);
}
}, {
type: GC.Spread.Sheets.Charts.ChartType.columnStacked,
desc: "columnStacked",
dataArray: [
["", 'Tokyo', 'New York', 'London', 'Berlin'],
["The First Quarter", 227.8, 260.9, 127, 110.1],
["The Second Quarter", 449.2, 283.9, 136.7, 167.8],
["The Third Quarter", 500.5, 300.5, 171, 165.4],
["The Fourth Quarter", 344.1, 282.4, 175.7, 137]
],
dataFormula: "A1:E5",
changeStyle: function (chart) {
changeChartTitle(chart, "The Average Quarterly Rainfall");
changColumnChartDataLabels(chart);
chart.axes({primaryValue: {title: {text: "Rainfall(mm)"}}});
changeChartSeriesColor(chart);
changeChartSeriesGapWidthAndOverLap(chart);
}
}, {
type: GC.Spread.Sheets.Charts.ChartType.columnStacked100,
desc: "columnStacked100",
dataArray: [
["", 'Tokyo', 'New York', 'London', 'Berlin'],
["The First Quarter", 227.8, 260.9, 127, 110.1],
["The Second Quarter", 449.2, 283.9, 136.7, 167.8],
["The Third Quarter", 500.5, 300.5, 171, 165.4],
["The Fourth Quarter", 344.1, 282.4, 175.7, 137]
],
dataFormula: "A1:E5",
changeStyle: function (chart) {
changeChartTitle(chart, "The Average Quarterly Rainfall");
changColumnChartDataLabels(chart);
chart.axes({primaryValue: {title: {text: "Rainfall(%)"}}});
changeChartSeriesColor(chart);
changeChartSeriesGapWidthAndOverLap(chart);
}
}];
let sheets = spread.sheets;
spread.suspendPaint();
for (let i = 0; i < chartType.length; i++) {
let sheet = sheets[i];
initSheet(sheet, chartType[i].desc, chartType[i].dataArray);
let chart = addChart(sheet, chartType[i].type, chartType[i].dataFormula);//add chart
chartType[i].changeStyle(chart);
}
spread.resumePaint();
}
const initSheet = (sheet, sheetName, dataArray) => {
sheet.name(sheetName);
//prepare data for chart
sheet.setArray(0, 0, dataArray);
sheet.setColumnWidth(0, 120);
}
const addChart = (sheet, chartType, dataFormula) => {
//add chart
return sheet.charts.add((sheet.name() + 'Chart1'), chartType, 30, 100, 900, 400, dataFormula, GC.Spread.Sheets.Charts.RowCol.rows);
}
const changeChartTitle = (chart, title) => {
chart.title({text: title});
}
// show dataLabels
const changColumnChartDataLabels = (chart) => {
let dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
let dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels.position = dataLabelPosition.outsideEnd;
chart.dataLabels(dataLabels);
}
//change color
const changeChartSeriesColor = (chart) => {
let series = chart.series().get();
for (let i = 0; i < series.length; i++) {
chart.series().set(i, {backColor: colorArray[i]});
}
}
const changeChartSeriesGapWidthAndOverLap = (chart) => {
let seriesItem = chart.series().get(0);
seriesItem.gapWidth = 2;
seriesItem.overlap = 0.1;
chart.series().set(0, seriesItem);
}
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet/>
<Worksheet/>
<Worksheet/>
</SpreadSheets>
</div>
</div>);
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import '@mescius/spread-sheets-shapes';
import '@mescius/spread-sheets-charts';
const Component = React.Component;
const colorArray = ['rgb(120, 180, 240)', 'rgb(240, 160, 80)', 'rgb(140, 240, 120)', 'rgb(120, 150, 190)'];
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
}
render() {
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet/>
<Worksheet/>
<Worksheet/>
</SpreadSheets>
</div>
</div>);
}
initSpread(spread) {
let self = this;
let chartType = [{
type: GC.Spread.Sheets.Charts.ChartType.columnClustered,
desc: "columnClustered",
dataArray: [
["", 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],
["London", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2],
["Berlin", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
],
dataFormula: "A1:M5",
changeStyle: function (chart) {
self.changeChartTitle(chart, "The Average Monthly Rainfall");
self.changColumnChartDataLabels(chart);
chart.axes({primaryValue: {title: {text: "Rainfall(mm)"}}});
self.changeChartSeriesColor(chart);
self.changeChartSeriesGapWidthAndOverLap(chart);
}
}, {
type: GC.Spread.Sheets.Charts.ChartType.columnStacked,
desc: "columnStacked",
dataArray: [
["", 'Tokyo', 'New York', 'London', 'Berlin'],
["The First Quarter", 227.8, 260.9, 127, 110.1],
["The Second Quarter", 449.2, 283.9, 136.7, 167.8],
["The Third Quarter", 500.5, 300.5, 171, 165.4],
["The Fourth Quarter", 344.1, 282.4, 175.7, 137]
],
dataFormula: "A1:E5",
changeStyle: function (chart) {
self.changeChartTitle(chart, "The Average Quarterly Rainfall");
self.changColumnChartDataLabels(chart);
chart.axes({primaryValue: {title: {text: "Rainfall(mm)"}}});
self.changeChartSeriesColor(chart);
self.changeChartSeriesGapWidthAndOverLap(chart);
}
}, {
type: GC.Spread.Sheets.Charts.ChartType.columnStacked100,
desc: "columnStacked100",
dataArray: [
["", 'Tokyo', 'New York', 'London', 'Berlin'],
["The First Quarter", 227.8, 260.9, 127, 110.1],
["The Second Quarter", 449.2, 283.9, 136.7, 167.8],
["The Third Quarter", 500.5, 300.5, 171, 165.4],
["The Fourth Quarter", 344.1, 282.4, 175.7, 137]
],
dataFormula: "A1:E5",
changeStyle: function (chart) {
self.changeChartTitle(chart, "The Average Quarterly Rainfall");
self.changColumnChartDataLabels(chart);
chart.axes({primaryValue: {title: {text: "Rainfall(%)"}}});
self.changeChartSeriesColor(chart);
self.changeChartSeriesGapWidthAndOverLap(chart);
}
}];
let sheets = spread.sheets;
spread.suspendPaint();
for (let i = 0; i < chartType.length; i++) {
let sheet = sheets[i];
this.initSheet(sheet, chartType[i].desc, chartType[i].dataArray);
let chart = this.addChart(sheet, chartType[i].type, chartType[i].dataFormula);//add chart
chartType[i].changeStyle(chart);
}
spread.resumePaint();
}
initSheet(sheet, sheetName, dataArray) {
sheet.name(sheetName);
//prepare data for chart
sheet.setArray(0, 0, dataArray);
sheet.setColumnWidth(0, 120);
}
addChart(sheet, chartType, dataFormula) {
//add chart
return sheet.charts.add((sheet.name() + 'Chart1'), chartType, 30, 100, 900, 400, dataFormula, GC.Spread.Sheets.Charts.RowCol.rows);
}
changeChartTitle(chart, title) {
chart.title({text: title});
}
// show dataLabels
changColumnChartDataLabels(chart) {
let dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
let dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels.position = dataLabelPosition.outsideEnd;
chart.dataLabels(dataLabels);
}
//change color
changeChartSeriesColor(chart) {
let series = chart.series().get();
for (let i = 0; i < series.length; i++) {
chart.series().set(i, {backColor: colorArray[i]});
}
}
changeChartSeriesGapWidthAndOverLap(chart) {
let seriesItem = chart.series().get(0);
seriesItem.gapWidth = 2;
seriesItem.overlap = 0.1;
chart.series().set(0, seriesItem);
}
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.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%;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
