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.

<p>There are four types of axis: primary category axis, primary value axis, secondary category axis, and secondary value axis.</p> <p>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.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> axes = chart.axes(); <span class="hljs-comment">// the style of the axis: color, fontFamily, fontSize</span> axes.primaryCategory.style.color = <span class="hljs-string">'#f15353'</span>; <span class="hljs-comment">// the line style of the axis: color, width</span> axes.primaryCategory.lineStyle.width = <span class="hljs-number">0</span>; <span class="hljs-comment">// the tick position of the axis: majorTickPosition and minorTickPosition</span> axes.primaryCategory.majorTickPosition = GC.Spread.Sheets.Charts.TickMark.none <span class="hljs-comment">// the tick label position of the axis</span> axes.primaryCategory.tickLabelPosition = GC.Spread.Sheets.Charts.TickLabelPosition.none; <span class="hljs-comment">// the format of the axis</span> axes.primaryCategory.format = <span class="hljs-string">'General'</span>; <span class="hljs-comment">// the title of the axis: text, color, fontFamily and font size</span> axes.primaryCategory.title.text = <span class="hljs-string">'Test Axis Title'</span>; axes.primaryCategory.title.fontSize = <span class="hljs-number">14</span>; chart.axes(axes); </code></pre> <p>You can get or set the gridline’s color, width and visibility.</p> <pre><code class="hljs js language-js"> axes.primaryCategory.majorGridLine.color = <span class="hljs-string">'#f15353'</span>; axes.primaryCategory.majorGridLine.visible = <span class="hljs-literal">true</span>; </code></pre> <p><strong>Logarithmic Axes</strong>: SpreadJS supports logarithmic scales for the value axis.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> axes = chart.axes(); axes.primaryValue.scaling = { <span class="hljs-attr">logBase</span>: <span class="hljs-number">10</span> }; chart.axes(axes); </code></pre> <p><strong>Display Unit</strong>: 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.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> axes = chart.axes(); axes.primaryValue.displayUnit = { <span class="hljs-attr">unit</span>: GC.Spread.Sheets.Charts.DisplayUnit.thousands, <span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">style</span>: { <span class="hljs-attr">color</span>: <span class="hljs-string">'red'</span>, <span class="hljs-attr">transparency</span>: <span class="hljs-number">0.5</span>, <span class="hljs-attr">fontFamily</span>: <span class="hljs-string">'Impact'</span>, <span class="hljs-attr">fontSize</span>: <span class="hljs-number">20</span> } }; chart.axes(axes); </code></pre> <p><strong>Date axis</strong>: SpreadJS supports date axis by below property, you can adjust date unit and date unit scale.</p> <ul> <li><strong>baseUnit</strong></li> <li><strong>majorUnit</strong></li> <li><strong>majorUnitScale</strong></li> <li><strong>minorUnit</strong></li> <li><strong>minorUnitScale</strong></li> </ul> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> axes = chart.axes(); axes.primaryCategory.baseUnit = GC.Spread.Sheets.Charts.TimeUnit.days; axes.primaryCategory.majorUnit = <span class="hljs-number">2</span>; axes.primaryCategory.majorUnitScale = GC.Spread.Sheets.Charts.TimeUnit.days; chart.axes(axes); </code></pre>
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; }