Axis Styling - Title and Labels
Each and Every aspect of the axis can be styled. The Axis is responsible for drawing the following parts:
- Title
- Axis Labels
- Tick Lines - small marks on the outside of an axis next to labels
- Gridlines - major and minor
- Axis Bands - shading between the major gridlines
In this article we are going to focus on Axis Title and Axis Labels styling.
Note
In SciChart, almost all styling methods expect an instance of either PenStyle or BrushStyle to be passed in. Those that deal with text styling, expect an instance of a FontStyle. To learn more about how to utilize them, please refer to the PenStyle, BrushStyle and FontStyle article.
Axis Title
The FontStyle object can be applied to axis labels via the titleStyle property.
In addition to font style, there are several options available for positioning of the title, including inside the axis area:
- axisTitlePlacement - allows placing a title inside or outside the axis area via the AxisTitlePlacement.
- axisTitleOrientation - changes the orientation of the title, making it horizontal or vertical via the AxisTitleOrientation enum.
- axisTitleGravity - the desired alignment of the title via the Gravity.
- axisTitleMargins - margins could be applied to omit overlapping with labels, while using AxisTitlePlacement.Inside mode.
Axis Labels
The tick labels can be hidden or shown on an axis via the drawLabels property. To make the labels at the edges to always appear inside the axis area, use the autoFitMarginalLabels property.
The FontStyle object can be applied to axis labels via the tickLabelStyle property.
Also, there is AxisTickLabelStyle available for controlling alignment, margin and rotation angle of each Label during rendering.
Let's try to modify our Multiple X-Axis Chart Example with the following code, and see what we can achieve:
final NumericAxis xTopAxis = new NumericAxis(getContext());
xTopAxis.setAxisId("TopAxisId");
xTopAxis.setAxisAlignment(AxisAlignment.Top);
xTopAxis.setAxisTitle("Top Axis");
xTopAxis.setAxisTitleGravity(Gravity.BOTTOM);
xTopAxis.setTitleStyle(new FontStyle(18, 0xFF279B27));
xTopAxis.setTickLabelStyle(new FontStyle(12, 0xFF279B27));
final NumericAxis xBottomAxis = new NumericAxis(getContext());
xBottomAxis.setAxisId("BottomAxisId");
xBottomAxis.setAxisAlignment(AxisAlignment.Bottom);
xBottomAxis.setAxisTitle("Bottom Axis");
xBottomAxis.setTitleStyle(new FontStyle(18, 0xFFFF1919));
xBottomAxis.setTickLabelStyle(new FontStyle(12, 0xFFFF1919));
final NumericAxis yLeftAxis = new NumericAxis(getContext());
yLeftAxis.setAxisId("LeftAxisId");
yLeftAxis.setGrowBy(new DoubleRange(0.1, 0.1));
yLeftAxis.setAxisAlignment(AxisAlignment.Left);
yLeftAxis.setAxisTitle("Left Axis");
yLeftAxis.setAxisTitleGravity(Gravity.TOP);
yLeftAxis.setAxisTitlePlacement(AxisTitlePlacement.Inside);
yLeftAxis.setAxisTitleMargins(20, 5, 0, 0);
yLeftAxis.setTitleStyle(new FontStyle(18, 0xFFFC9C29));
yLeftAxis.setTickLabelStyle(new FontStyle(12, 0xFFFC9C29));
yLeftAxis.setAxisTickLabelStyle(new AxisTickLabelStyle(Gravity.CENTER, 5, 0, 5, 0));
final NumericAxis yRightAxis = new NumericAxis(getContext());
yRightAxis.setAxisId("RightAxisId");
yRightAxis.setGrowBy(new DoubleRange(0.1, 0.1));
yRightAxis.setAxisAlignment(AxisAlignment.Right);
yRightAxis.setIsCenterAxis(true);
yRightAxis.setAxisTitle("Right Axis");
yRightAxis.setAxisTitleGravity(Gravity.BOTTOM);
yRightAxis.setAxisTitlePlacement(AxisTitlePlacement.Left);
yRightAxis.setTitleStyle(new FontStyle(18, 0xFF4083B7));
yRightAxis.setTickLabelStyle(new FontStyle(12, 0xFF4083B7));
Note
You might notice, that Right Axis title, labels and ticks are placed inside the chart area. This behaviour is controlled by isCenterAxis. To learn more, please refer to Axis Placement article.