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/spacing, 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/spacing, format, numberFormatLinked, crosses, orientation,title, and gridline for these four axis using the following code.
var axes = chart.axes();
// the style of the axis: color, fontFamily, fontSize
axes.primaryCategory.style.color = '#f15353';
// the line style of the axis: color, width
axes.primaryCategory.lineStyle.width = 0;
// the tick position of the axis: majorTickPosition and minorTickPosition
axes.primaryCategory.majorTickPosition = GC.Spread.Sheets.Charts.TickMark.none
// the tick label position of the axis
axes.primaryCategory.tickLabelPosition = GC.Spread.Sheets.Charts.TickLabelPosition.none;
// the tick label spacing of the axis
axes.primaryCategory.tickLabelSpacing = 3;
// the format of the axis
axes.primaryCategory.numberFormatLinked = true;
// the title of the axis: text, color, fontFamily and font size
axes.primaryCategory.title.text = 'Test Axis Title';
axes.primaryCategory.title.fontSize = 14;
chart.axes(axes);
You can get or set the gridline’s color, width and visibility.
axes.primaryCategory.majorGridLine.color = '#f15353';
axes.primaryCategory.majorGridLine.visible = true;
Logarithmic Axes: SpreadJS supports logarithmic scales for the value axis.
var axes = chart.axes();
axes.primaryValue.scaling = {
logBase: 10
};
chart.axes(axes);
Axis Label Position: SpreadJS supports set label position for axis as below enum type GC.Spread.Sheets.Charts.TickLabelPosition.
- high
- low
- nextToAxis
- none
var axes = chart.axes();
axes.primaryCategory.tickLabelPosition = GC.Spread.Sheets.Charts.TickLabelPosition.high;
chart.axes(axes);
Axis Orientation: SpreadJS supports setting the orientation of an axis
var axes = chart.axes();
axes.primaryValue.scaling = {
orientation: GC.Spread.Sheets.Charts.AxisOrientation.maxMin;
};
chart.axes(axes);
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.
var axes = chart.axes();
axes.primaryValue.displayUnit = {
unit: GC.Spread.Sheets.Charts.DisplayUnit.thousands,
visible: true,
style: {
color: 'red',
transparency: 0.5,
fontFamily: 'Impact',
fontSize: 20
}
};
chart.axes(axes);
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
var axes = chart.axes();
axes.primaryCategory.baseUnit = GC.Spread.Sheets.Charts.TimeUnit.days;
axes.primaryCategory.majorUnit = 2;
axes.primaryCategory.majorUnitScale = GC.Spread.Sheets.Charts.TimeUnit.days;
chart.axes(axes);
Crosses: SpreadJS supports set axis crosses as number type or below axis crosses enum type GC.Spread.Sheets.Charts.AxisCrossPoint.
- automatic
- maximum
- minimum
var axes = chart.axes();
axes.primaryCategory.crossPoint = 3;
axes.primaryValue.crossPoint = GC.Spread.Sheets.Charts.AxisCrossPoint.maximum;
chart.axes(axes);
Feedback
Submit and view feedback for