On top of the series style, you can set special styles for some special meaningful data points. The data point styles can make data presentation more focused and charts more intuitive and efficient.
For different chart types, the data point style supports the following customizations
backColor - The solid or pattern background color of the data point or point marker.
backColorTransparency - The background color transparency of the data point or point marker.
border.color - The border color of the data point.
border.transparency - The border color transparency of the data point.
border.width - The border width of the data point.
border.lineType - The border line type of the data point.
You can customize the chart's data point style with the below code:
<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 '@mescius/spread-sheets-vue';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-shapes';
import '@mescius/spread-sheets-charts';
function initSpread(spread) {
let chartType = [{
type: GC.Spread.Sheets.Charts.ChartType.columnClustered,
desc: "columnClustered",
position: [15, 100, 1300, 400],
dataArray: [
["", 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov',
'Dec'
],
["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 146.0, 135.6, 148.5, 256.4, 155.1,
95.6, 54.4
],
["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 199.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, 186.2, 59.3,
51.2
],
["Berlin", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 178.6, 39.1, 46.8, 51.1]
],
dataFormula: "A1:M5",
dataPoinsStyle: [{
8: {
backColor: "red",
backColorTransparency: 0.1,
border: {
color: 'rgb(120, 180, 240)',
width: 5,
}
},
},
{
5: {
backColor: "black",
backColorTransparency: 0.1,
border: {
color: 'rgb(240, 160, 80)',
width: 5,
}
}
},
{
9: {
backColor: "black",
backColorTransparency: 0.1,
border: {
color: 'rgb(140, 240, 120)',
width: 5,
}
},
},
{
8: {
backColor: "black",
backColorTransparency: 0.1,
border: {
color: 'rgb(120, 150, 190)',
width: 5,
}
}
}
],
changeStyle: function (chart, dataPoinsStyle) {
changeChartTitle(chart, "The Average Monthly Rainfall");
changChartDataLabels(chart);
chart.axes({
primaryValue: {
title: {
text: "Rainfall(mm)"
}
}
});
changeChartSeriesColor(chart);
changeChartSeriesDataPointStyle(chart, dataPoinsStyle);
changeChartSeriesGapWidthAndOverLap(chart);
}
},
{
type: GC.Spread.Sheets.Charts.ChartType.barClustered,
desc: "barClustered",
position: [15, 100, 1300, 400],
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",
dataPoinsStyle: [, ,
{
0: {
backColor: "red",
backColorTransparency: 0.1,
border: {
color: 'gray',
width: 5,
}
}
}
],
changeStyle: function (chart, dataPoinsStyle) {
changeChartTitle(chart, "The Average Quarterly Rainfall");
changChartDataLabels(chart);
changeChartSeriesColor(chart);
changeChartSeriesDataPointStyle(chart, dataPoinsStyle);
changeChartSeriesGapWidthAndOverLap(chart);
}
},
{
type: GC.Spread.Sheets.Charts.ChartType.pie,
desc: "pie",
position: [15, 100, 700, 400],
dataArray: [
["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
],
dataFormula: "A1:H2",
dataPoinsStyle: [{
0: {
backColor: {
type: GC.Spread.Sheets.Charts.PatternType.wideUpwardDiagonal,
foregroundColor: "white",
backgroundColor: "LightBlue",
},
backColorTransparency: 0.1,
},
},],
changeStyle: function (chart, dataPoinsStyle) {
changeChartTitle(chart, "Browser Market Share");
changChartDataLabels(chart);
changeChartSeriesDataPointStyle(chart, dataPoinsStyle);
}
},
{
type: GC.Spread.Sheets.Charts.ChartType.sunburst,
desc: "sunburst",
position: [300, 50, 700, 400],
dataArray: [
['Region', 'Subregion', 'Country', 'Population'],
['Asia', 'Southern', 'India', 1354051854],
[, , 'Pakistan', 200813818],
[, , 'Bangladesh', 166368149],
[, , 'Others', 170220300],
[, 'Eastern', 'China', 1415045928],
[, , 'Japan', 127185332],
[, , 'Others', 111652273],
[, 'South-Eastern', , 655636576],
[, 'Western', , 272298399],
[, 'Central', , 71860465],
['Africa', 'Eastern', , 433643132],
[, 'Western', , 381980688],
[, 'Northern', , 237784677],
[, 'Others', , 234512021],
['Europe', , , 742648010],
['Others', , , 1057117703]
],
dataFormula: "A1:D17",
dataPoinsStyle: [{
6: {
backColor: "limegreen ",
border: {
color: 'lightcyan ',
width: 9,
}
}
},],
changeStyle: function (chart, dataPoinsStyle) {
changeChartTitle(chart, "World Population");
changeChartSeriesDataPointStyle(chart, dataPoinsStyle);
}
}
];
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, chartType[i].position); //add chart
chartType[i].changeStyle(chart, chartType[i].dataPoinsStyle);
}
spread.resumePaint();
}
function initSheet(sheet, sheetName, dataArray) {
sheet.name(sheetName);
//prepare data for chart
sheet.setArray(0, 0, dataArray);
sheet.setColumnCount(100);
}
function addChart(sheet, chartType, dataFormula, position) {
//add chart
return sheet.charts.add((sheet.name() + 'Chart1'), chartType, position[0], position[1], position[2], position[3], dataFormula, GC
.Spread.Sheets.Charts.RowCol.rows);
}
function changeChartTitle(chart, title) {
chart.title({
text: title
});
}
// show dataLabels
function changChartDataLabels(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 point style
function changeChartSeriesDataPointStyle(chart, dataPoinsStyle) {
let series = chart.series().get();
for (let i = 0; i < series.length; i++) {
if (dataPoinsStyle[i]) {
chart.series().set(i, {
dataPoints: dataPoinsStyle[i]
});
}
}
}
//change color
function changeChartSeriesColor(chart) {
let series = chart.series().get();
let colorArray = ['rgb(120, 180, 240)', 'rgb(240, 160, 80)', 'rgb(140, 240, 120)', 'rgb(120, 150, 190)'];
for (let i = 0; i < series.length; i++) {
chart.series().set(i, {
backColor: colorArray[i]
});
}
}
function changeChartSeriesGapWidthAndOverLap(chart) {
let seriesItem = chart.series().get(0);
seriesItem.gapWidth = 2;
seriesItem.overlap = -0.5;
chart.series().set(0, seriesItem);
}
</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>
(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);
