Axis

Horizontal and vertical chart axes of SpreadJS charts in workbooks can be customized with different style properties. Javascript code can be used to customize properties such as color, line style, tick and tick label positions, formatting, and title font size. It can be especially important to match styling across entire spreadsheets, particularly when implemented as dashboards or reports, so being able to customize axes in addition to other chart elements is useful.

There are four types of axis: primary category axis, primary value axis, secondary category axis, and secondary value axis. You can get or set the style, line style, tick position, tick label’s position, format, title, and gridline for these four axis using the following code. You can get or set the gridline’s color, width and visibility. Logarithmic Axes: SpreadJS supports logarithmic scales for the value axis. Display Unit: The Display Unit property allows you to display units like Million/Trillions as the value axis display instead of the actual large numbers. This feature is useful to conserve space and makes it easier to read. Date axis: SpreadJS supports date axis by below property, you can adjust date unit and date unit scale. baseUnit majorUnit majorUnitScale minorUnit minorUnitScale
var spread; window.onload = function () { spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); var sheet = spread.getActiveSheet(); sheet.suspendPaint(); sheet.setValue(0, 1, "Apple"); sheet.setValue(0, 2, "Banana"); sheet.setValue(0, 3, "Pear"); sheet.setValue(1, 0, "People1"); sheet.setValue(2, 0, "People2"); sheet.setValue(3, 0, "People3"); for (var r = 1; r <= 3; r++) { for (var c = 1; c <= 3; c++) { sheet.setValue(r, c, parseInt(Math.random() * 100)); } } //add chart var Charts = GC.Spread.Sheets.Charts; var chart = sheet.charts.add('Chart1', Charts.ChartType.columnClustered, 250, 0, 600, 550); var series = chart.series(); series.add({ chartType: Charts.ChartType.columnClustered, axisGroup: Charts.AxisGroup.primary, name: "Sheet1!$A$2", xValues: "Sheet1!$B$1:$D$1", yValues: "Sheet1!$B$2:$D$2" }); series.add({ chartType: Charts.ChartType.columnClustered, axisGroup: Charts.AxisGroup.primary, name: "Sheet1!$A$3", xValues: "Sheet1!$B$1:$D$1", yValues: "Sheet1!$B$3:$D$3" }); series.add({ chartType: Charts.ChartType.lineMarkers, axisGroup: Charts.AxisGroup.secondary, name: "Sheet1!$A$4", xValues: "Sheet1!$B$1:$D$1", yValues: "Sheet1!$B$4:$D$4" }); var axes = chart.axes(); axes.primaryCategory.style.color = 'orange'; axes.primaryCategory.title.color = 'orange'; axes.primaryCategory.title.text = 'Primary Category Axes'; axes.primaryValue.style.color = 'red'; axes.primaryValue.title.color = 'red'; axes.primaryValue.title.text = 'Primary Value Axes with Logarithmic Scaling'; axes.primaryValue.title.fontSize = 16; axes.primaryValue.scaling = { logBase: 2 }; axes.secondaryCategory.visible = true; axes.secondaryCategory.style.color = 'green'; axes.secondaryCategory.title.color = 'green'; axes.secondaryCategory.title.text = 'Secondary Category Axes'; axes.secondaryCategory.title.fontSize = 16; axes.secondaryValue.style.color = 'blue'; axes.secondaryValue.title.color = 'blue'; axes.secondaryValue.format = 'General'; axes.secondaryValue.title.text = 'Secondary Value Axes'; chart.axes(axes); sheet.resumePaint(); };
<!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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/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 class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> </div> </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; }