JavaScript Chart - Examples
SciChart.js ships with over 80 JavaScript Chart demos which you can browse, view the source code and see related documentation. Build incredible complex dashboards with SciChart.js, our High Performance JavaScript Chart Library.
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
See the Axis documentation for more details
See the Axis Types documentation over at scichart.com/javascript-chart-documentation for more details!