JavaScript Chart Axis Types

SciChart.js supports many axis types out of the box. Numeric Value axis, Category Axis, Date/Time Axis and Logarithmic Axis are supported with a variety of configurations. This example showcases the different axis types and how they behave.

Axis Configurations in SciChart

Date Axis

• Accepts values as Unix time stamps
• Unix Timestamps be converted to/from JavaScript Date
• Can format dates e.g. DD MMM YYYY or hh:mm:ss
• Custom formatting possible

Numeric Axis

• Use for normal displaying of X,Y numeric values
• Accepts numeric values
• Uses value-scaling e.g. values are used to place points
• Format to N decimal places or custom formatting available

Category Axis

• Use where you want to collapse large gaps in X-values
• Accepts indexes instead of numeric values
• Uses category-scaling e.g. indexes are used to place points not x-Values
• Converts index to data values and formats to N decimal places
• Custom formatting available

Logarithmic Axis

• Use for Log2, LogE, Log10 scaling of numeric values
• Accepts numeric values
• Applies logarithmic scaling on base-2, base-E or base-10
• Can format labels as scientific notation with superscript e.g. 10^3 or engineering notation e.g. 10E3

All axis types

• Support placement on left/top/right/bottom of the chart
• Support multi-axis
• Can be hidden or shown. Can have labels hidden, gridlines hidden or titles hidden independently.
• Allow configuration of gridline, label spacing (see TickProvider API)
• Allow configuration of label formatting (see LabelProvider API)
• Allow custom styling of borders, titles, labels, gridlines and tick marks