High-Performance JavaScript Chart & Graph Library

Annotations API Features

Annotations allow placement of any shape, marker, text or line on the chart at Xy coordinates or relative (%) coordinates.

• Annotation (Marker) Types
  • LineAnnotation
  • BoxAnnotation
  • TextAnnotation (Text / label)
  • VerticalLineAnnotation (line with draggable axis marker)
  • HorizontalLineAnnotation (line with draggable axis marker)
  • AxisMarkerAnnotation (Text or image on Axis)
  • CustomAnnotation (any SVG Shape placed on the chart)
  • [NEW] ArcAnnotation (arc on Cartesian or Polar chart)
  • [NEW] PolarPointerAnnotation (pointer for gauges)
• Annotation Placement API
  • Absolute Placement at Xy Data Values, SciChart Updates Positions Automatically
  • Relative Placement e.g. Top 5%, Left 10%
  • Pixel Placement e.g. Top: 20px, Left: 40px
  • Placement above series, or below (as background)
• Annotation Interactions API
  • Optional Dragging / Resizing via mouse
  • Events (callbacks) on drag & resize
  • Show / hide (change visibility)

See Annotations Docs

Animations API Features

• Series Startup Animations
  • Four animation types on first-load
  • Wave, Sweep, Fade and Scale
  • Customise delay, duration and easing function
• Style Transition Animations
  • Animate a style transition on a chart series
  • Animate StrokeThickness, Stroke Color, Fill
  • Animate Pointmarker style
  • Can be used to animate style on hover, selection
  • Customise delay, duration and easing function
• Dataset Animations
  • Can be used to animate from one dataset to another
  • All series Xy points are interpolated from dataset A to B
  • Can be combined with Style animations
  • Customise delay, duration and easing function
• Generic Animations
  • Literally animate anything on the chart including Dom elements, markers or overlays
  • Animate axis.visibleRange changes which control zoom, pan
  • Customise delay, duration and easing function

See Animations Docs

Axis API Features

• Axis Placement
  • Unlimited, Multiple X and Y Axis on the left/right/top/bottom of the chart
  • Axis inside, outside or in the centre of chart
  • Rotate Charts (vertical charts) for Oil & Gas Industry
  • Stacked axis layouts vertically or horizontally
• Axis Titles, Labels
  • Customize Axis Titles and Axis Label Formatting
  • Dynamically adjust Label Formatting on zoom
  • Supports Rotated Axis Labels, as well as Image Labels
  • Supports Scientific or Engineering Notation in Labels e.g. 1.23E5 or 1.23⁵
• Axis Styling, Configuration
  • Toggle Gridlines, Ticks, Labels and Bands On or Off
  • Configure axis gridline interval precisely via TickProvider
  • Style Axis Borders, Background, Gridlines, Ticks and Labels
• Axis Misc APIs
  • AutoRanging (auto fitting of data) on specific axis
  • Toggle Axis visibility, or dynamically add/remove axis
  • Synchronize Axis Sizes across linked charts
  • Programmatic Axis Pixel-Data Conversion API
  • Set, Get axis.visibleRange programmatically or be notified on range change

See Axis Docs

Axis Types

• NumericAxis
  • Integer, Floating point values
  • Customise number of decimal places or label format prefix / postfix
  • Value-axis type (measures using X-value)
• DateTimeNumericAxis
  • Sub-type of NumericAxis which formats Unix Timestamps as Dates
  • Choose from a selection of Date / Time formats out of the box
  • Dynamic vary date / time formats on zoom to show more detail
• LogarithmicAxis
  • Integer, Floating point values
  • Log2, LogE, Log10 support
  • Scientific or Engineering notation e.g. 1.23E5 or 1.23⁵
  • Major Gridlines obey logarithmic scale
  • Minor Gridlines obey linear or logarithmic scale
• CategoryAxis
  • Special X-axis type measures using X-index
  • Can be used to close gaps in data
  • Customise number of decimal places or label format
  • Format Unix timestamps as dates
• [NEW] PolarNumericAxis
  • Integer, Floating point values for Polar charts
• [NEW] PolarCategoryAxis
  • Special X-axis type measures using X-index for Polar charts

See Axis Types Docs

Chart Series APIs

• All 2D Chart Types and Polar support
  • Gaps in series via Y=NAN
  • Closed lines in series via Y=NAN
  • PaletteProvider API for per-point colouring
  • Show/hide series
  • Select/deselect series
  • DataLabels
  • Metadata (JS Objects on Xy point)
  • Hit-Test (programmatic API for is mouse over a point)
• All 3D Chart Types support
  • Metadata (JS Objects on Xy point)
  • Hit-Test (programmatic API for is mouse over a point)
  • Vertex colouring for per-point colouring

See Chart Series Docs

Cursor/Tooltip Features

• CursorModifier
  • Crosshairs which tracks the mouse with optional vertical/horizontal line
  • Optional axis labels on the crosshair
  • Optional configurable tooltip next to the crosshair
  • Optional active legend shown on hover of a series data-point
• RolloverModifier
  • Vertical line which tracks the mouse with
  • Hoverable Trackballs and active legends
  • Optional configurable tooltip next to the vertical line
• VerticalSliceModifier
  • Drag & Position Vertical Lines which slice your data
  • Lines show tooltips on series intersection with data
• Tooltip Misc APIs
  • Customisable Tooltip content on Hover
  • Showing Latest Series Values on the YAxis
  • Templatable, Active Chart Legends
  • Pass Business-objects (Metadata) through to Tooltips
  • Style Tooltips according to your application style

See Cursor/Tooltip Docs

DataLabels API Features

• Fast WebGL Xy Datapoint Labels
  • In-built Data Labels can be placed at Xy datapoints
  • Labels rendered with WebGL for impressive performance with thousands of labels
• DataLabel Formatting
  • Format Data Labels with numeric precision or text-formatting rules
  • Position labels above/below datapoints
  • Custom multi-line labels output X, Y or Metadata from the datapoint
• DataLabel Culling
  • Skip modes / culling modes detects overlapping Data Labels and hides
  • Toggle DataLabels on/off

See DataLabels Docs

Data API Features

• Dynamic Data Updates
  • Dynamically update data with Append, Insert, Update, Remove, Clear functions
  • In-built FIFO (First-in-first-out) mode for scrolling / discarding old data
  • In-build Sweeping mode for ECG / wrap-around charts
  • Supports bulk updates for high performance applications
• Data Formats
  • Optimised data structures for big-data & performance-intensive apps
  • Tag Xy points with JS objects, so you can show metadata on the point
  • Supports full Float64 precision throughout the pipeline
  • Supports Dates/Times by Unix Timestamps
• Reactive JavaScript charts
  • Redraw the chart on property or data change, so the chart automatically updates

See DataSeries DocsSee PointMetadata API Docs

Documentation & Help Resources

• Documentation
  • 100s of hand-written documentation pages
  • Embedded codepens on many docs that you can copy & edit in-browser
  • Source code of all documentation samples published to Github
• Getting Started Resources
  • Getting started guides
  • Over 100 examples/demos with the source code
  • Video Tutorials for npm developers
  • Tutorials for vanilla JS devs
  • Typedoc for the entire library
  • Boilerplate demos for popular frameworks (React, Vue, Angular)
  • Official scichart-react React Component
• Continuous Delivery
  • Actively developed with regular publishing to npm / JSDelivr
  • Online changelogs
• Help & Support
  • Community forums
  • Support desk for premium customers

See Getting Started Resources

Filters API Features

• Transform and Manipulate Data pre-render
  • Filters allow daisy-chaining data series with functions/transforms
  • When underlying data updates, filters are recalculated
• Built-in Filters
  • Scale & Offset a series/charts (linear transformation)
  • Linear trendlines
  • Moving averages
  • Ratio (series A / B)
  • Spline Interpolation
• Custom Filters
  • Create custom functions
  • Can be anything from filters to aggregations
  • Transform data on the fly

See Filters API Docs

Multi Chart Linking API Features

• Multi Charts
  • Charts are created inside a
  • Have unlimited charts on a webpage without hitting WebGL Context Limits
  • Synchronize multiple charts in a group
  • Synchronize zooming, panning
  • Synchronize cursors, tooltips
  • Synchronize axis sizes
• SubCharts
  • Subcharts API – Grouping charts on the same canvas for better performance
  • Allows for complex visualisations – charts within charts

See Linking Charts Docs

Retina Support & DPI Features

• Responds to monitor DPI
  • Macbook Retina support
  • Windows high DPI support
  • Lines, strokes, and shapes look sharper and clearer on higher DPI displays
  • Text is rendered at a higher resolution
• Responds to Browser Zoom 
  • Browser zoom support (CTRL+Mousewheel)
  • Text scales with browser zoom (used for Accessibility)
  • Stroke thickness (line pen) increases with Browser zoom

See DPI Docs

Serialization / Builder API Features

• API Choice for Developers
  • SciChart.js ships with two APIs
  • Programmatic APIs let you create a chart in code
  • JSON Builder API lets you define a chart with JSON / JavaScript objects
• JSON Builder API
  • Define entire charts with either code, or JSON / JavaScript objects
  • Define chart parts e.g. axis, series, or layout only
  • Integrate data into your JSON or send it after
  • Once a chart is created via JSON, you can manipulate it in code
• Serialization
  • Serialize charts and chart parts to JSON
  • Deserialize charts and chart parts from JSON

See Serialization Docs

Selection API Features

• SeriesSelectionModifier
  • Select series with the mouse or programatically
  • Events/callbacks on series selection/hover
  • Animate style or state on series selection/hover
• DatapointSelectionModifier
  • Select individual datapoints with the mouse or programatically
  • Supports single or multi select
  • Events/callbacks on datapoint selection
  • Get a list of selected datapoints
  • Change visual of selected datapoints
• Hit-Test API
  • Get nearest point to mouse / Is Over point via Hit-Test API
  • Combine with ChartModifier API – override MouseDown, MouseMove, MouseUp, Touch for custom behaviours on the chart

See Selection DocsSee Hit-Test Docs

Theme API Features

• 3 Stunning Themes to choose from
  • Auto generate series colors based on theme palette
  • Create Custom Themes easily
  • Inherit in-built themes and change some properties
• Styling and Customisation
  • Override style in code, e.g. Background, Gridlines, Text Color, Series Stroke and Fill
  • Supports transparent background
  • Toggle visibility of chart parts: Series, Axis, Labels, Legends, Gridlines
  • Styling for Chart components, RenderableSeries, Tooltips, Legends and more
• Create Stunning looking Charts with Modern Styles!

See Themes Docs

Accessibility API Features

• Visual Accessibility
  • Supports VoiceOver via SpeechSynthesisUtterance / Web Speech API
  • Add VoiceOver on data-points
  • Add VoiceOver on Axis labels
  • Color and Contrast may be changed via Themes
• Keyboard Accessibility
  • Create custom keyboard interactions e.g. Scroll on +/-
• Misc
  • Supports Browser Zoom with Font / Series scaling

See Themes Docs

Zooming / Panning API Features

• Built-in Zooming, Panning behaviours
  • RubberBandXyZoomModifier: Drag a rectangle to animate-zoom
  • X/YAxisDragModifier: Pan or Zoom via Axis Drag
  • MouseWheelZoomModifier: Pan or Zoom via mousewheel
  • PinchZoomModifier: Touch screen support including Pinch to Zoom
  • ZoomExtentsModifier: Double-click to animate zoom extents
  • ZoomPanModifier: Pan horizontally or vertically via mouse-drag. Also supports pinch to zoom
• Misc Zooming/Panning APIs
  • Scrollbars and Overview controls
  • Get / Set or animate axis.visibleRange programmatically
  • APIs to Programmatically pan or scale
  • Powerful custom ChartModifier API for developing custom mouse interactivity extensions

See ChartModifier Docs