SciChart.js has a rich and configurable axis API. We believe you won't find a JavaScript Chart in the world with as many options for axis as SciChart!
This page we're going to give you an overview of what the Axis APIs can do and then show you where to look next for more detail.
What can SciChart.js Do with Axis?
Heres a quick list of what SciChart.js can do with axis configuration, and where to go next.
Above: The JavaScript Axis Layout Options example from the SciChart.js Demo, showing a variety of axis configurations in SciChart.js.
1. Many Axis Types
There are several axis types in SciChart.js. Although they all differ in types of data values that can be rendered, the most fundamental difference is in their behavior.
By that, the axes can be divided into two groups, Category and Value axis types.
The axis types provided by SciChart.js are listed below:
| Axis Type | Value or Category Axis |
| NumericAxis | Value Axis / Numeric Types |
| DateTimeNumericAxis | Value Axis with additional features for Dates and Time formatting |
| CategoryAxis | Category Axis - measures using index - Numeric Types or Dates |
| LogarithmicAxis | Logarithmic Axis supporting Base2, BaseE, Base10 with or without scientific notation |
| Text / String Axis | Use LabelProviders to format axis labels as text |
Above: The Axis Types example in SciChart.js demo.
2. Axis Layout (Multiple Axis, Axis Alignment)
Many axis configurations are possible, including:
- Aligning Axis on the Left, Right
- Adding a Secondary Axis
- Adding Multiple X and Y Axis
- Rotating a chart 90 degrees (Vertical charts)
- Drawing Series behind axis
- Placing axis in the centre of a chart, or inside a chart surface
- Vertically Stacking Axis - to create complex layouts
- Horizontally Stacking Axis - more complex layouts
Above: The Multiple X Axis example in SciChart.js demo.
3. Axis Label Configuration
SciChart.js has a number of label APIs, including:
- Formatting labels the easy way (using built-in flags)
- Formatting labels - using custom code (fine grained label format)
- Having a text axis e.g. "Apples" "Pears" "Oranges" not 1, 2, 3
- Turning native (WebGL) text labels on or off
- Spacing gridlines and labels the easy way
- Spacing gridlines and labels - using custom code (fine grained control)
- Rotating Labels / Multiline Labels / Image Labels
- Label Style, Alignment, Positioning
Above: The Multiline Axis Labels example in SciChart.js demo.q
4. Axis Ranging and Scaling
It's possible to programmatically control axis ranging, scaling and auto-fitting of data.
- AutoRange (auto fitting of data)
- Setting/Getting range programatically
- Listening to axis range changes (callbacks on zoom)
5. Axis Styling
Finally, SciChart.js supports Axis styling, including:
- Styling of Gridlines, Labels, Titles and Bands
- Styling of Axis Borders and Background
- Showing or Hiding of Axis parts