A Pie chart can be added to Spread, and the chart style can be changed using the chart API. The pie chart can only display one group of data, so use the chart.series().get() function to get the series information. Pie charts show the size of items in one data series, and the data points are shown as a percentage of the whole pie.
A Doughnut chart can be added to Spread, and the chart style can be changed using the chart API. The doughnut chart can display all series, with each shown as a ring that represents a data series.
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
createRoot(document.getElementById('app')).render(<AppFunc />);
// 2. Class Component sample
// createRoot(document.getElementById('app')).render(<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';
export function AppFunc() {
let spread = null;
const initSpread = (spread) => {
spread.suspendPaint();
let sheets = spread.sheets;
initPieSheet(sheets[0]);
initPieChart(sheets[0]);
initDoughnutSheet(sheets[1]);
initDoughnutChart(sheets[1]);
spread.resumePaint();
}
const initPieSheet = (sheet) => {
sheet.name('Pie');
//prepare data for chart
let dataArray = [
["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
];
sheet.setArray(0, 0, dataArray);
}
const initPieChart = (sheet) => {
let chart = sheet.charts.add('PieChart1', GC.Spread.Sheets.Charts.ChartType.pie, 0, 50, 600, 400, "A1:H2");
showPieDataLabels(chart);
changePieStyle(chart);
changeChartTitle(chart);
}
const changeChartTitle = (chart) => {
let title = chart.title();
title.text = "Browser Market Share";
title.fontSize = 18;
chart.title(title);
}
// show dataLabels
const showPieDataLabels = (chart) => {
let dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = true;
dataLabels.format = "0.00%";
let dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels.position = dataLabelPosition.bestFit;
chart.dataLabels(dataLabels);
}
//change pie color
const changePieStyle = (chart) => {
chart.legend({ position: GC.Spread.Sheets.Charts.LegendPosition.right });
let seriesItem = chart.series().get(0);
seriesItem.dataPoints = {
0: {
backColor: "rgb(91, 155, 213)"
},
1: {
backColor: "rgb(237, 125, 49)"
},
2: {
backColor: "rgb(165, 165, 165)"
},
3: {
backColor: "rgb(255, 192, 0)"
},
4: {
backColor: "rgb(68, 114, 196)"
},
5: {
backColor: "rgb(112, 173, 71)"
},
6: {
backColor: "rgb(255,20,128)"
}
}
seriesItem.border.width = 3;
chart.series().set(0, seriesItem);
}
const initDoughnutSheet = (sheet) => {
sheet.name('Doughnut');
sheet.suspendPaint();
//prepare data for chart
let dataArray = [
["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
["2014", 0.4966, 0.1801, 0.2455, 0.0470, 0.0, 0.0150, 0.0158],
["2015", 0.5689, 0.1560, 0.1652, 0.0529, 0.0158, 0.0220, 0.0192],
["2016", 0.6230, 0.1531, 0.1073, 0.0464, 0.0311, 0.0166, 0.0225],
["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
];
sheet.setArray(0, 0, dataArray);
sheet.resumePaint();
}
const initDoughnutChart = (sheet) => {
let chart = sheet.charts.add('DoughnutChart1', GC.Spread.Sheets.Charts.ChartType.doughnut, 0, 100, 600, 320, "A1:H5");
changeDoughnutColor(chart);
changeDoughnutLegendPosition(chart);
changeDoughnutHoleSize(chart);
changeChartTitle(chart);
}
//change doughnut color
const changeDoughnutColor = (chart) => {
let series = chart.series().get();
for (let i = 0; i < series.length; i++) {
let seriesItem = series[i];
seriesItem.dataPoints = {
0: {
backColor: "rgb(91, 155, 213)"
},
1: {
backColor: "rgb(237, 125, 49)"
},
2: {
backColor: "rgb(165, 165, 165)"
},
3: {
backColor: "rgb(255, 192, 0)"
},
4: {
backColor: "rgb(68, 114, 196)"
},
5: {
backColor: "rgb(112, 173, 71)"
},
6: {
backColor: "rgb(255,20,128)"
}
}
chart.series().set(i, seriesItem);
}
}
const changeDoughnutHoleSize = (chart) => {
let seriesItem = chart.series().get(0);
seriesItem.doughnutHoleSize = 0.3;
chart.series().set(0, seriesItem);
}
const changeDoughnutLegendPosition = (chart) => {
chart.legend({ position: GC.Spread.Sheets.Charts.LegendPosition.right });
}
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<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;
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 />
</SpreadSheets>
</div>
</div>);
}
initSpread(spread) {
spread.suspendPaint();
let sheets = spread.sheets;
this.initPieSheet(sheets[0]);
this.initPieChart(sheets[0]);
this.initDoughnutSheet(sheets[1]);
this.initDoughnutChart(sheets[1]);
spread.resumePaint();
}
initPieSheet(sheet) {
sheet.name('Pie');
//prepare data for chart
let dataArray = [
["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
];
sheet.setArray(0, 0, dataArray);
}
initPieChart(sheet) {
let chart = sheet.charts.add('PieChart1', GC.Spread.Sheets.Charts.ChartType.pie, 0, 50, 600, 400, "A1:H2");
this.showPieDataLabels(chart);
this.changePieStyle(chart);
this.changeChartTitle(chart);
}
changeChartTitle(chart) {
let title = chart.title();
title.text = "Browser Market Share";
title.fontSize = 18;
chart.title(title);
}
// show dataLabels
showPieDataLabels(chart) {
let dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = true;
dataLabels.format = "0.00%";
let dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels.position = dataLabelPosition.bestFit;
chart.dataLabels(dataLabels);
}
//change pie color
changePieStyle(chart) {
chart.legend({ position: GC.Spread.Sheets.Charts.LegendPosition.right });
let seriesItem = chart.series().get(0);
seriesItem.dataPoints = {
0: {
backColor: "rgb(91, 155, 213)"
},
1: {
backColor: "rgb(237, 125, 49)"
},
2: {
backColor: "rgb(165, 165, 165)"
},
3: {
backColor: "rgb(255, 192, 0)"
},
4: {
backColor: "rgb(68, 114, 196)"
},
5: {
backColor: "rgb(112, 173, 71)"
},
6: {
backColor: "rgb(255,20,128)"
}
}
seriesItem.border.width = 3;
chart.series().set(0, seriesItem);
}
initDoughnutSheet(sheet) {
sheet.name('Doughnut');
sheet.suspendPaint();
//prepare data for chart
let dataArray = [
["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
["2014", 0.4966, 0.1801, 0.2455, 0.0470, 0.0, 0.0150, 0.0158],
["2015", 0.5689, 0.1560, 0.1652, 0.0529, 0.0158, 0.0220, 0.0192],
["2016", 0.6230, 0.1531, 0.1073, 0.0464, 0.0311, 0.0166, 0.0225],
["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
];
sheet.setArray(0, 0, dataArray);
sheet.resumePaint();
}
initDoughnutChart(sheet) {
let chart = sheet.charts.add('DoughnutChart1', GC.Spread.Sheets.Charts.ChartType.doughnut, 0, 100, 600, 320, "A1:H5");
this.changeDoughnutColor(chart);
this.changeDoughnutLegendPosition(chart);
this.changeDoughnutHoleSize(chart);
this.changeChartTitle(chart);
}
//change doughnut color
changeDoughnutColor(chart) {
let series = chart.series().get();
for (let i = 0; i < series.length; i++) {
let seriesItem = series[i];
seriesItem.dataPoints = {
0: {
backColor: "rgb(91, 155, 213)"
},
1: {
backColor: "rgb(237, 125, 49)"
},
2: {
backColor: "rgb(165, 165, 165)"
},
3: {
backColor: "rgb(255, 192, 0)"
},
4: {
backColor: "rgb(68, 114, 196)"
},
5: {
backColor: "rgb(112, 173, 71)"
},
6: {
backColor: "rgb(255,20,128)"
}
}
chart.series().set(i, seriesItem);
}
}
changeDoughnutHoleSize(chart) {
let seriesItem = chart.series().get(0);
seriesItem.doughnutHoleSize = 0.3;
chart.series().set(0, seriesItem);
}
changeDoughnutLegendPosition(chart) {
chart.legend({ position: GC.Spread.Sheets.Charts.LegendPosition.right });
}
}
<!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/cjs/react.production.js',
'react-dom': 'npm:react-dom/cjs/react-dom.production.js',
'react-dom/client': 'npm:react-dom/cjs/react-dom-client.production.js',
'scheduler': 'npm:scheduler/cjs/scheduler.production.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);
