Data labels help users read chart values directly from the plotted series. They can display category names, series names, and values, then apply text formatting so key chart information is easier to scan.
This sample demonstrates series data labels for different chart types. Select a chart, change the options in the side panel, and click Set to apply the data label settings to the selected chart series.
The series data labels support the following customizations:
showCategoryName - Displays the category name in the data label.
showSeriesName - Displays the series name in the data label.
showValue - Displays the data point value in the data label.
color - Sets the data label text color.
separator - Sets the separator between multiple label parts.
fontFamily - Sets the data label font family.
fontSize - Sets the data label font size.
fontBold - Sets whether the data label text is bold.
fontItalic - Sets whether the data label text is italic.
fontUnderline - Sets the data label underline type.
fontStrikethrough - Sets whether the data label text uses strikethrough.
You can customize a chart series data label style with the below code:
var spread;
var activeChart;
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
sheetCount: 12
});
initSpread(spread);
initEvents();
};
var defaultDataLabels = {
showCategoryName: false,
showSeriesName: false,
showValue: true,
color: "#243b53",
separator: ", ",
fontFamily: "Calibri",
fontSize: 11,
fontBold: false,
fontItalic: false,
fontUnderline: GC.Spread.Sheets.Charts.TextUnderlineType.none,
fontStrikethrough: false
};
function initSpread(spread) {
var sheets = spread.sheets;
spread.suspendPaint();
createStandardChart(sheets[0], "Area", GC.Spread.Sheets.Charts.ChartType.area);
createStandardChart(sheets[1], "Bar", GC.Spread.Sheets.Charts.ChartType.barClustered);
createStandardChart(sheets[2], "Column", GC.Spread.Sheets.Charts.ChartType.columnClustered);
createComboChart(sheets[3]);
createFunnelChart(sheets[4]);
createStandardChart(sheets[5], "Line", GC.Spread.Sheets.Charts.ChartType.lineMarkers);
createPieChart(sheets[6]);
createStandardChart(sheets[7], "Radar", GC.Spread.Sheets.Charts.ChartType.radarMarkers);
createScatterChart(sheets[8]);
createHierarchyChart(sheets[9], "Sunburst", GC.Spread.Sheets.Charts.ChartType.sunburst);
createHierarchyChart(sheets[10], "Treemap", GC.Spread.Sheets.Charts.ChartType.treemap);
createWaterfallChart(sheets[11]);
spread.options.tabStripRatio = 0.8;
spread.setActiveSheetIndex(0);
activeChart = getFirstChart(spread.getActiveSheet());
readSetting(activeChart);
spread.resumePaint();
}
function initEvents() {
spread.bind(GC.Spread.Sheets.Events.FloatingElementSelected, function () {
var chart = getActiveChart(spread.getActiveSheet());
if (chart) {
activeChart = chart;
readSetting(chart);
}
});
spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function () {
activeChart = getFirstChart(spread.getActiveSheet());
readSetting(activeChart);
});
document.getElementById("apply").addEventListener("click", applySetting);
document.getElementById("fontSize").addEventListener("blur", normalizeFontSizeInput);
}
function createStandardChart(sheet, name, chartType) {
setupSheet(sheet, name);
setSalesData(sheet);
var chart = sheet.charts.add(name + "Chart", chartType, 260, 25, 700, 390, "A1:E5", GC.Spread.Sheets.Charts.RowCol.rows);
chart.title({ text: name + " Chart" });
setAxes(chart);
setSeriesDataLabels(chart, getInitialDataLabels(name));
}
function createComboChart(sheet) {
setupSheet(sheet, "Combo");
setSalesData(sheet);
var chart = sheet.charts.add("ComboChart", GC.Spread.Sheets.Charts.ChartType.columnClustered, 260, 25, 700, 390, "A1:E4", GC.Spread.Sheets.Charts.RowCol.rows);
chart.series().add({
chartType: GC.Spread.Sheets.Charts.ChartType.lineMarkers,
name: "A5",
xValues: "B1:E1",
yValues: "B5:E5",
border: { width: 3 }
});
chart.title({ text: "Combo Chart" });
setAxes(chart);
setSeriesDataLabels(chart, getInitialDataLabels("Combo"));
}
function createFunnelChart(sheet) {
setupSheet(sheet, "Funnel");
var data = [
["Stage", "Users"],
["Visits", 12000],
["Trials", 7800],
["Quotes", 4200],
["Orders", 2100],
["Renewals", 1200]
];
sheet.setArray(0, 0, data);
styleDataRange(sheet, 6, 2);
var chart = sheet.charts.add("FunnelChart", GC.Spread.Sheets.Charts.ChartType.funnel, 260, 25, 700, 390, "A1:B6");
chart.title({ text: "Funnel Chart" });
setSeriesDataLabels(chart, getInitialDataLabels("Funnel"));
}
function createPieChart(sheet) {
setupSheet(sheet, "Pie");
var data = [
["Q1", "Q2", "Q3", "Q4"],
[31, 25, 28, 34]
];
sheet.setArray(0, 0, data);
styleDataRange(sheet, 2, 4);
var chart = sheet.charts.add("PieChart", GC.Spread.Sheets.Charts.ChartType.pie, 260, 25, 700, 390, "A1:D2");
chart.title({ text: "Pie Chart" });
setSeriesDataLabels(chart, getInitialDataLabels("Pie"));
}
function createScatterChart(sheet) {
setupSheet(sheet, "Scatter");
var data = [
["Month", "Leads", "Revenue"],
[1, 12, 18],
[2, 19, 24],
[3, 24, 31],
[4, 31, 35],
[5, 35, 46],
[6, 45, 52],
[7, 48, 57],
[8, 57, 66],
[9, 63, 71]
];
sheet.setArray(0, 0, data);
styleDataRange(sheet, 10, 3);
var chart = sheet.charts.add("ScatterChart", GC.Spread.Sheets.Charts.ChartType.xyScatterLines, 260, 25, 700, 390, "A1:C10", GC.Spread.Sheets.Charts.RowCol.columns);
chart.title({ text: "Scatter Chart" });
setAxes(chart);
setSeriesDataLabels(chart, getInitialDataLabels("Scatter"));
}
function createHierarchyChart(sheet, name, chartType) {
setupSheet(sheet, name);
setHierarchyData(sheet);
var chart = sheet.charts.add(name + "Chart", chartType, 260, 25, 700, 390, "A1:D16");
chart.title({ text: name + " Chart" });
setSeriesDataLabels(chart, getInitialDataLabels(name));
}
function createWaterfallChart(sheet) {
setupSheet(sheet, "Waterfall");
var data = [
["Item", "Amount"],
["Start", 5000],
["Product", 2300],
["Services", 1700],
["Discounts", -900],
["Returns", -500],
["Tax", -650],
["End", 6950]
];
sheet.setArray(0, 0, data);
styleDataRange(sheet, 8, 2);
var chart = sheet.charts.add("WaterfallChart", GC.Spread.Sheets.Charts.ChartType.waterfall, 260, 25, 700, 390, "A1:B8");
var series = chart.series().get(0);
series.subtotals = [0, 7];
series.showConnectorLines = true;
chart.series().set(0, series);
chart.title({ text: "Waterfall Chart" });
setSeriesDataLabels(chart, getInitialDataLabels("Waterfall"));
}
function setupSheet(sheet, name) {
sheet.name(name);
sheet.suspendPaint();
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
sheet.setColumnWidth(0, 95);
sheet.setColumnWidth(1, 85);
sheet.setColumnWidth(2, 85);
sheet.setColumnWidth(3, 85);
sheet.setColumnWidth(4, 85);
sheet.resumePaint();
}
function setSalesData(sheet) {
var data = [
["Product", "Q1", "Q2", "Q3", "Q4"],
["Bike", 42, 48, 53, 61],
["Helmet", 27, 31, 36, 40],
["Jersey", 18, 24, 30, 33],
["Shoes", 22, 28, 34, 39]
];
sheet.setArray(0, 0, data);
styleDataRange(sheet, 5, 5);
}
function setHierarchyData(sheet) {
var data = [
["Region", "Subregion", "Country", "Revenue"],
["Asia", "East", "Japan", 420],
[, , "Korea", 310],
[, "South", "India", 520],
[, , "Singapore", 180],
["Europe", "West", "France", 280],
[, , "Germany", 450],
[, "North", "Sweden", 160],
[, , "Norway", 120],
["Americas", "North", "United States", 670],
[, , "Canada", 260],
[, "South", "Brazil", 350],
[, , "Chile", 140],
["Africa", "East", "Kenya", 150],
[, "West", "Ghana", 110]
];
sheet.setArray(0, 0, data);
styleDataRange(sheet, 16, 4);
}
function styleDataRange(sheet, rowCount, colCount) {
sheet.getRange(0, 0, rowCount, colCount).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet.getRange(0, 0, 1, colCount).font("bold normal 10pt Arial");
sheet.getRange(0, 0, rowCount, colCount).setBorder(
new GC.Spread.Sheets.LineBorder("#d9d9d9", GC.Spread.Sheets.LineStyle.thin),
{ all: true }
);
}
function setAxes(chart) {
var axes = chart.axes();
if (axes.primaryCategory && axes.primaryCategory.majorGridLine) {
axes.primaryCategory.majorGridLine.visible = false;
}
if (axes.primaryValue && axes.primaryValue.majorGridLine) {
axes.primaryValue.majorGridLine.visible = true;
}
chart.axes(axes);
}
function getInitialDataLabels(chartName) {
var labels = clone(defaultDataLabels);
if (chartName === "Pie" || chartName === "Funnel" || chartName === "Sunburst" || chartName === "Treemap") {
labels.showCategoryName = true;
}
if (chartName === "Sunburst" || chartName === "Treemap" || chartName === "Funnel") {
labels.color = "#ffffff";
labels.fontBold = true;
}
return labels;
}
function setSeriesDataLabels(chart, dataLabelsOption) {
var series = chart.series().get(0);
if (!series) {
return;
}
var dataLabels = clone(dataLabelsOption);
dataLabels.fontSize = clampFontSize(dataLabels.fontSize);
series.dataLabels = dataLabels;
chart.series().set(0, series);
}
function readSetting(chart) {
if (!chart) {
return;
}
var series = chart.series().get(0);
var dataLabels = series && series.dataLabels ? series.dataLabels : defaultDataLabels;
getElement("showCategoryName").checked = !!dataLabels.showCategoryName;
getElement("showSeriesName").checked = !!dataLabels.showSeriesName;
getElement("showValue").checked = dataLabels.showValue !== false;
getElement("color").value = normalizeColor(dataLabels.color || defaultDataLabels.color);
getElement("separator").value = dataLabels.separator === undefined ? defaultDataLabels.separator : dataLabels.separator;
getElement("fontFamily").value = dataLabels.fontFamily || defaultDataLabels.fontFamily;
getElement("fontSize").value = clampFontSize(dataLabels.fontSize);
getElement("fontBold").checked = !!dataLabels.fontBold;
getElement("fontItalic").checked = !!dataLabels.fontItalic;
getElement("fontUnderline").value = dataLabels.fontUnderline || GC.Spread.Sheets.Charts.TextUnderlineType.none;
getElement("fontStrikethrough").checked = !!dataLabels.fontStrikethrough;
}
function applySetting() {
var chart = getActiveChart(spread.getActiveSheet()) || activeChart || getFirstChart(spread.getActiveSheet());
if (!chart) {
return;
}
activeChart = chart;
var dataLabels = readPanel();
setSeriesDataLabels(chart, dataLabels);
readSetting(chart);
}
function normalizeFontSizeInput() {
getElement("fontSize").value = clampFontSize(getElement("fontSize").value);
}
function readPanel() {
return {
showCategoryName: getElement("showCategoryName").checked,
showSeriesName: getElement("showSeriesName").checked,
showValue: getElement("showValue").checked,
color: getElement("color").value,
separator: getElement("separator").value,
fontFamily: getElement("fontFamily").value,
fontSize: clampFontSize(getElement("fontSize").value),
fontBold: getElement("fontBold").checked,
fontItalic: getElement("fontItalic").checked,
fontUnderline: parseInt(getElement("fontUnderline").value, 10),
fontStrikethrough: getElement("fontStrikethrough").checked
};
}
function getActiveChart(sheet) {
var selectedChart = null;
sheet.charts.all().forEach(function (chart) {
if (chart.isSelected()) {
selectedChart = chart;
}
});
return selectedChart;
}
function getFirstChart(sheet) {
var charts = sheet.charts.all();
return charts.length ? charts[0] : null;
}
function normalizeColor(color) {
var match = /^rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(color || "");
if (!match) {
return color && color.charAt(0) === "#" ? color : defaultDataLabels.color;
}
return "#" + toHex(parseInt(match[1], 10)) + toHex(parseInt(match[2], 10)) + toHex(parseInt(match[3], 10));
}
function toHex(value) {
var hex = value.toString(16);
return hex.length === 1 ? "0" + hex : hex;
}
function clampFontSize(value) {
var fontSize = parseInt(value, 10);
if (isNaN(fontSize)) {
return defaultDataLabels.fontSize;
}
return Math.min(Math.max(fontSize, 1), 5333);
}
function clone(value) {
return JSON.parse(JSON.stringify(value));
}
function getElement(id) {
return document.getElementById(id);
}
<!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/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="panel-title">Series Data Labels</div>
<div class="field-group">
<div class="group-title">Label Contains</div>
<div class="checkbox-grid">
<label><input type="checkbox" id="showValue" /> Value</label>
<label><input type="checkbox" id="showSeriesName" /> Series Name</label>
<label><input type="checkbox" id="showCategoryName" /> Category Name</label>
</div>
</div>
<div class="field-group">
<div class="group-title">Text</div>
<div class="option-row">
<label for="color">Color</label>
<input id="color" type="color" />
</div>
<div class="option-row">
<label for="separator">Separator</label>
<select id="separator">
<option value=", ">, (comma)</option>
<option value="; ">; (semicolon)</option>
<option value=". "> . (period)</option>
<option value=" ">new line</option>
<option value=" ">space</option>
</select>
</div>
<div class="option-row">
<label for="fontFamily">Font Family</label>
<select id="fontFamily">
<option value="Calibri">Calibri</option>
<option value="Arial">Arial</option>
<option value="Cambria">Cambria</option>
<option value="Georgia">Georgia</option>
<option value="Segoe UI">Segoe UI</option>
</select>
</div>
<div class="option-row">
<label for="fontSize">Font Size</label>
<input id="fontSize" type="number" min="1" max="5333" step="1" />
</div>
</div>
<div class="field-group">
<div class="group-title">Style</div>
<div class="checkbox-grid style-grid">
<label><input type="checkbox" id="fontBold" /> Bold</label>
<label><input type="checkbox" id="fontItalic" /> Italic</label>
<label><input type="checkbox" id="fontStrikethrough" /> Strikethrough</label>
</div>
</div>
<div class="option-row">
<label for="fontUnderline">Underline Type</label>
<select id="fontUnderline">
<option value="0">none</option>
<option value="1">single</option>
</select>
</div>
<div class="option-row">
<input type="button" id="apply" class="apply-button" value="Set" />
</div>
</div>
</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: 14px 14px 16px;
height: 100%;
box-sizing: border-box;
background: #f7f8fa;
border-left: 1px solid #ddd;
overflow: auto;
}
.panel-title {
margin: 2px 0 12px;
font-weight: 600;
color: #333;
}
.option-row {
font-size: 14px;
padding-bottom: 8px;
}
.option-row label {
display: inline-block;
margin-bottom: 4px;
color: #333;
}
.option-row input,
.option-row select {
width: 100%;
min-height: 26px;
padding: 2px 6px;
box-sizing: border-box;
border: 1px solid #c9ced6;
border-radius: 3px;
background: #fff;
}
.field-group {
margin-bottom: 10px;
padding-bottom: 4px;
border-bottom: 1px solid #e4e7eb;
}
.group-title {
margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
color: #667085;
}
.checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 10px;
}
.checkbox-grid label {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: 13px;
}
.checkbox-grid input {
width: auto;
min-height: auto;
padding: 0;
border: 0;
background: transparent;
}
.style-grid {
grid-template-columns: 1fr 1fr 1fr;
}
.apply-button {
height: 30px;
color: #fff;
background: #2f6fed !important;
border-color: #2f6fed !important;
cursor: pointer;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
