You can customize the color scheme of the chart using the code such as the following:
You can customize your own color scheme using the code such as the following:
You can use static method to get a specified color by color scheme by using the code such as the following:
Please note that, change the color scheme will not change the current series or data points color.
It will only take effects when add new series or data points.
If you want the color scheme take effects immediately, you could reset the series or data points color using the code such as the following:
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 } from '@mescius/spread-sheets-react';
import '@mescius/spread-sheets-shapes';
import '@mescius/spread-sheets-charts';
function ColorSchemes ({colorSchemes, theme, onClick}) {
if (!colorSchemes || !theme) {
return <div id="built-in-color-schemes"/>;
}
const keys = Object.keys(colorSchemes);
const elements = keys.map((key) => {
let colorScheme = colorSchemes[key];
return <ColorScheme colorScheme={colorScheme} key={key} theme={theme} onClick={onClick} data={key} />
});
return (
<div id="built-in-color-schemes">
{elements}
</div>
);
}
function ColorScheme ({colorScheme, key, theme, onClick, data}) {
const handleClick = () => {
onClick(data);
};
return (
<div className="color-scheme" onClick={handleClick} key={data}>
<ColorSchemeItem color={theme.getColor(GC.Spread.Sheets.Charts.getColor(colorScheme, 0, 6))} key={key}/>
<ColorSchemeItem color={theme.getColor(GC.Spread.Sheets.Charts.getColor(colorScheme, 1, 6))} key={key}/>
<ColorSchemeItem color={theme.getColor(GC.Spread.Sheets.Charts.getColor(colorScheme, 2, 6))} key={key}/>
<ColorSchemeItem color={theme.getColor(GC.Spread.Sheets.Charts.getColor(colorScheme, 3, 6))} key={key}/>
<ColorSchemeItem color={theme.getColor(GC.Spread.Sheets.Charts.getColor(colorScheme, 4, 6))} key={key}/>
<ColorSchemeItem color={theme.getColor(GC.Spread.Sheets.Charts.getColor(colorScheme, 5, 6))} key={key}/>
</div>
)
}
function ColorSchemeItem ({color, key}) {
return <div className="color-item" style={{backgroundColor: color}} key={key}></div>;
}
function resetSeriesColor (chart, colorScheme) {
if (!chart || !colorScheme) {
return;
}
let series = chart.series().get();
for (let i = 0, len = series.length; i < len; i++) {
let seriesItem = series[i];
seriesItem.backColor = GC.Spread.Sheets.Charts.getColor(colorScheme, i, len);
chart.series().set(i, seriesItem);
}
}
function getActiveCharts (spread) {
if (!spread) {
return;
}
let sheet = spread.getActiveSheet();
let charts = sheet.charts.all(), selectedCharts = [];
for (let i = 0, len = charts.length; i < len; i++) {
if (charts[i].isSelected()) {
selectedCharts.push(charts[i]);
}
}
return selectedCharts;
}
function getBuiltInColorScheme (key) {
return GC.Spread.Sheets.Charts.ColorSchemes[key];
}
function resetChartsColorScheme (selectedCharts, colorScheme) {
if (!colorScheme || selectedCharts.length === 0) {
return;
}
selectedCharts.forEach((selectedChart) => {
selectedChart.colorScheme(colorScheme);
resetSeriesColor(selectedChart, colorScheme);
});
}
class FakeTheme {
getColor (color) {
return "black";
}
}
let spread = null;
export function AppFunc() {
const [colorOption, setColorOption] = React.useState({
colorSchemes: GC.Spread.Sheets.Charts.ColorSchemes,
theme: new FakeTheme()
});
const initSpread = (currSpread) => {
spread = currSpread;
let sheet = spread.getActiveSheet();
sheet.setArray(0, 0, [[null,'a1','a2','a3','a4','a5','a6','a7','a8','a9'],
['b1',3,4,7,8,10,12,14,16,18],
['b2',1,9,2,5,5.5,6,6.5,7,7.5]]);
let chart = sheet.charts.add("chart2", GC.Spread.Sheets.Charts.ChartType.columnClustered, 100, 100, 300, 300, "A1:J3", GC.Spread.Sheets.Charts.RowCol.columns, GC.Spread.Sheets.Charts.ColorSchemes.colorfulPalette2);
chart.isSelected(true);
setColorOption({...colorOption, theme: sheet.currentTheme()});
}
const handleChangeColorSchemeByBuiltInColorScheme = (key) => {
let colorScheme = getBuiltInColorScheme(key);
let selectedCharts = getActiveCharts(spread);
resetChartsColorScheme(selectedCharts, colorScheme);
}
return (
<div className="sample-tutorial">
<div className="sample-spreadsheets">
<SpreadSheets workbookInitialized={ initSpread }/>
</div>
<div className="options-container">
<p>Select a built in color scheme to reset the selected charts' color scheme.</p>
<ColorSchemes colorSchemes={colorOption.colorSchemes} theme={colorOption.theme} onClick={handleChangeColorSchemeByBuiltInColorScheme}/>
</div>
</div>
);
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets } from '@mescius/spread-sheets-react';
import '@mescius/spread-sheets-shapes';
import '@mescius/spread-sheets-charts';
const Component = React.Component;
function ColorSchemes ({colorSchemes, theme, onClick}) {
if (!colorSchemes || !theme) {
return <div id="built-in-color-schemes"/>;
}
const keys = Object.keys(colorSchemes);
const elements = keys.map((key) => {
let colorScheme = colorSchemes[key];
return <ColorScheme colorScheme={colorScheme} key={key} theme={theme} onClick={onClick} data={key} />
});
return (
<div id="built-in-color-schemes">
{elements}
</div>
);
}
function ColorScheme ({colorScheme, key, theme, onClick, data}) {
const handleClick = () => {
onClick(data);
};
return (
<div className="color-scheme" onClick={handleClick} key={data}>
<ColorSchemeItem color={theme.getColor(GC.Spread.Sheets.Charts.getColor(colorScheme, 0, 6))} key={key}/>
<ColorSchemeItem color={theme.getColor(GC.Spread.Sheets.Charts.getColor(colorScheme, 1, 6))} key={key}/>
<ColorSchemeItem color={theme.getColor(GC.Spread.Sheets.Charts.getColor(colorScheme, 2, 6))} key={key}/>
<ColorSchemeItem color={theme.getColor(GC.Spread.Sheets.Charts.getColor(colorScheme, 3, 6))} key={key}/>
<ColorSchemeItem color={theme.getColor(GC.Spread.Sheets.Charts.getColor(colorScheme, 4, 6))} key={key}/>
<ColorSchemeItem color={theme.getColor(GC.Spread.Sheets.Charts.getColor(colorScheme, 5, 6))} key={key}/>
</div>
)
}
function ColorSchemeItem ({color, key}) {
return <div className="color-item" style={{backgroundColor: color}} key={key}></div>;
}
function resetSeriesColor (chart, colorScheme) {
if (!chart || !colorScheme) {
return;
}
let series = chart.series().get();
for (let i = 0, len = series.length; i < len; i++) {
let seriesItem = series[i];
seriesItem.backColor = GC.Spread.Sheets.Charts.getColor(colorScheme, i, len);
chart.series().set(i, seriesItem);
}
}
function getActiveCharts (spread) {
if (!spread) {
return;
}
let sheet = spread.getActiveSheet();
let charts = sheet.charts.all(), selectedCharts = [];
for (let i = 0, len = charts.length; i < len; i++) {
if (charts[i].isSelected()) {
selectedCharts.push(charts[i]);
}
}
return selectedCharts;
}
function getBuiltInColorScheme (key) {
return GC.Spread.Sheets.Charts.ColorSchemes[key];
}
function resetChartsColorScheme (selectedCharts, colorScheme) {
if (!colorScheme || selectedCharts.length === 0) {
return;
}
selectedCharts.forEach((selectedChart) => {
selectedChart.colorScheme(colorScheme);
resetSeriesColor(selectedChart, colorScheme);
});
}
class FakeTheme {
getColor (color) {
return "black";
}
}
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.state = {
colorSchemes: GC.Spread.Sheets.Charts.ColorSchemes,
theme: new FakeTheme()
}
}
render() {
return (
<div className="sample-tutorial">
<div className="sample-spreadsheets">
<SpreadSheets workbookInitialized={ this.initSpread }/>
</div>
<div className="options-container">
<p>Select a built in color scheme to reset the selected charts' color scheme.</p>
<ColorSchemes colorSchemes={this.state.colorSchemes} theme={this.state.theme} onClick={this.handleChangeColorSchemeByBuiltInColorScheme}/>
</div>
</div>
);
}
initSpread = (spread) => {
this.spread = spread;
let sheet = spread.getActiveSheet();
sheet.setArray(0, 0, [[null,'a1','a2','a3','a4','a5','a6','a7','a8','a9'],
['b1',3,4,7,8,10,12,14,16,18],
['b2',1,9,2,5,5.5,6,6.5,7,7.5]]);
let chart = sheet.charts.add("chart2", GC.Spread.Sheets.Charts.ChartType.columnClustered, 100, 100, 300, 300, "A1:J3", GC.Spread.Sheets.Charts.RowCol.columns, GC.Spread.Sheets.Charts.ColorSchemes.colorfulPalette2);
chart.isSelected(true);
this.setState({theme: sheet.currentTheme()});
}
handleColorRuleChange = (event) => {
this.setState({colorRule: event.target.value});
}
handleChangeColorSchemeByBuiltInColorScheme = (key) => {
let self = this;
let colorScheme = getBuiltInColorScheme(key);
let selectedCharts = getActiveCharts(self.spread);
resetChartsColorScheme(selectedCharts, colorScheme);
}
}
<!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" style="height: 100%;"></div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
label {
display: inline-block;
width: 80px;
}
.settings-row {
width: 100%;
height: 30px;
font-size: 13px;
}
.settings-btn {
display: inline-block;
width: 220px;
height: 21px;
}
#built-in-color-schemes {
height: 80%;
overflow-y: scroll;
overflow-x: clip;
border: black 1px solid;
}
#colors-list {
min-height: 40px;
margin-bottom: 10px;
border: black 1px solid;
}
.color-scheme {
width: 256px;
height: 40px;
}
.color-scheme:hover {
background-color: #CCCCCC;
}
.color-item {
width: 34px;
height: 34px;
margin: 2px;
display: inline-block;
}
(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);
