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, crosses, orientation,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. Axis Label Position: SpreadJS supports set label position for axis as below enum type GC.Spread.Sheets.Charts.TickLabelPosition. high low nextToAxis none Axis Orientation: SpreadJS supports setting the orientation of an 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 using a date axis with the below properties. You can adjust the date unit and date unit scale. baseUnit majorUnit majorUnitScale minorUnit minorUnitScale Crosses: SpreadJS supports set axis crosses as number type or below axis crosses enum type GC.Spread.Sheets.Charts.AxisCrossPoint. automatic maximum minimum
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)); } } var dataArray = [ ["Month", 'Fund Income', 'Stock Income', 'Bank Interest Income'], [1, 100, 2, 9], [2, -96, 15, 2], [3, 53, 88, 8], [4, -15, 150, 1], [5, 77, -52, 3], [6, 20, 66, 6], ]; sheet.setArray(0, 6, dataArray); sheet.getRange(1, 7, 6, 3).formatter("$#,##0.00"); //add chart var Charts = GC.Spread.Sheets.Charts; var columnChart = sheet.charts.add('columnChart', Charts.ChartType.columnClustered, 10, 100, 400, 350); var xyScatterChart = sheet.charts.add('xyScatterChart', GC.Spread.Sheets.Charts.ChartType.xyScatterSmooth, 420, 100, 400, 350, 'G1:J7'); var orientationChart = sheet.charts.add('orientationChart', Charts.ChartType.columnClustered, 830, 100, 400, 350,'A1:D4'); var series = columnChart.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 = columnChart.axes(); axes.primaryCategory.style.color = 'orange'; axes.primaryCategory.title.color = 'orange'; axes.primaryCategory.title.text = 'Primary Category Axis'; axes.primaryValue.style.color = 'red'; axes.primaryValue.title.color = 'red'; axes.primaryValue.title.text = 'Primary Value Logarithmic Axis'; 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 Axis'; 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 Axis'; var columnChartTitle = columnChart.title(); columnChartTitle.text = "Product Sales"; columnChart.title(columnChartTitle); columnChart.axes(axes); var axes1 = xyScatterChart.axes(); var xyScatterChartTitle = xyScatterChart.title(); xyScatterChartTitle.text = "First Half Financial Income"; xyScatterChart.title(xyScatterChartTitle); axes1.primaryCategory.crossPoint = 3; xyScatterChart.axes(axes1); var axes2 = orientationChart.axes(); var orientationChartTitle = orientationChart.title(); orientationChartTitle.text = "Product Sales(reverse order)"; orientationChart.title(orientationChartTitle); axes2.primaryValue.scaling = { orientation: GC.Spread.Sheets.Charts.AxisOrientation.maxMin }; orientationChart.axes(axes2); 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/@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 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; }