Pre loader
Try wave

High-Performance JavaScript Chart & Graph Library

Discover the ultimate solution for your JS applications with SciChart’s JavaScript Chart Library.

Using WebGL to create dynamic, high-speed charts and graphs, perfect for handling complex data visualization in real-time. Elevate your JavaScript projects with our robust and flexible JS charting tools.

JavaScript Charts with a Difference

This is not your standard JavaScript Chart Library! With tens of thousands of properties on over 1,000 exported types, we’ve built SciChart.js to handle the most demanding JS charting & graphing requirements in ScientificMedical, Financial, AerospaceMotorsport & F1, or Oil & Gas.

JavaScript Chart Performance

SciChart’s incredible JavaScript Chart performance is enabled by our proprietary, in-house, C++ cross platform 3D graphics engine, Visual Xccelerator™. The engine is entirely hardware accelerated targeting WebGL & WebAssembly in the browser.

With SciChart’s JavaScript chart library, it is now possible to display millions of data-points in JavaScript line, scatter, or candlestick charts and update in real-time. It’s also possible to plot thousands of series, or hundreds of fast JavaScript Graphs on a single webpage without stalling your user interface.

Learn MoreSee Performance Demo

JavaScript Charts for Complex Requirements

For complex, demanding charts in Aerospace, Motorsport & F1, or Oil & Gas, you need to take the interactions in your JS graphs to a new level.

With SciChart.js you can get callbacks on series hover, series selection, data-point selection and even update chart data via the mouse.

Don’t struggle to create complex requirements, use SciChart.js to achieve more, in less time.

Learn MoreSee Interactions Demo

JavaScript Charts Linked for Interactive Dashboards

Create rich dashboards with linked multiple charts. SciChart.js provides the building blocks to create JS Dashboards, complex financial or stock charts or apps with dynamic add/removal of linked chart panes.

Add two charts to your application, link them together in a group to synchronize zooming, sync cursors and optionally sync chart sizes. Multiple JS charts can act as one

Learn MoreSee Linked Charts Demo

Testimonials & Reviews

star starstarstarstarstar 4.84 Average - 419 Reviews

SciChart’s chart libraries are trusted by thousands of developers worldwide and we have customers in over 90 countries from sectors including Pharmaceutical, Oil & Gas, Medical, Instrumentation, Defence, Aerospace, Motorsport, Process Automation, Mining, Investment Banking, Trading and more. See what our customers say about their experience with SciChart’s JavaScript Chart library.

View Testimonials
quote
JS Dev in Oil/Gas
star
star
star
star
star

The best JS charting functionality that's offered anywhere, with performance in a different league thanks to their use of WebAssembly. The best thing about SciChart, though, is their support.

quote
JS Tech Lead, Automation
star
star
star
star
star

Simply put the best JS charting software available, and they back it up with excellent service. Been a customer for over eight years and their only get better.

quote
JS Dev at a Trading Company
star
star
star
star
star

SciChartJS is an amazing library and blazing fast. The APIs are extremely well defined, documented and easy to use. We are displaying multiple charts with each one having around 6-7 million data-points without any issues.

quote
JS Tech Lead in Oil Exploration
star
star
star
star
star

I work with it daily, and it is a very good product! It's very performant, and I can customize my charts the way I want them. I like the responsiveness of the SciChart team and they embrace feedback

quote
Alef D
star
star
star
star
star
Great software, very fast, can easily handle large amounts of data. I've been using it for javascript and whenever I need help they answer right away, it's one of the best support I have seen.

Learn the SciChart.js Features

Our JavaScript Charts and Graphs feature list is so huge, we had to create this ridiculously detailed webpage. If you have a question about our Charts in JS, don’t get lost in our docs/demos, just ask!

Unlimited Multiple X, Y Axis

Our JavaScript Chart Library features unlimited, multiple X and Y axis.

Place many X-axis at the Top or Bottom and Y axis on the Left or Right. Several axes on one side are also possible. You can place X, Y axis in the centre. You can have hidden axis to scale data independently.

Create vertical charts by displaying X axis on the Left/Right and Y axis on the Top/Bottom. Stack axis vertically or horizontally to create an ECG chart. Mix Linear, Logarithmic or Category axis on the same chart and have unlimited custom layouts in our JavaScript Charts and graphs.

Read the DocsSee a Demo

Annotations & Markers

Our JavaScript Chart Library features a powerful Annotations API that allows you to place annotations and markers over the chart at specific Xy data-points, or relative coordinates (%, pixel)

There are plenty of Annotations ready out of the box, e.g. line, box, text, and more. Custom annotations are possible if you want to display custom markers or points of interest.

SciChart’s JavaScript chart library supports interaction with annotations, where you can allow users to click on annotation, drag and resize.

Read the DocsSee a Demo

Cursors, Tooltips & Legends

Add Tooltips to your JS charts and graphs with our range of behaviour modifiers. SciChart supports optional crosshairs, draggable vertical lines, placeable cursors, tooltips and legends out of the box.

Configure what’s displayed in the tooltip, format text and include additional metadata. React to legend interactions to show/hide series or toggle application state.

Read the DocsSee a Demo

Advanced Zooming & Panning

Our JavaScript Charts provide you with APIs to zoom, pan, and scroll charts. You can allow your users to pan or zoom chart in X or Y directions or both; set or animate axis.visibleRange programmatically to pan or scale.

Listen to visibleRangeChanged events which callback on zoom. Scale or mousewheel axis independently. Or, develop custom mouse interactivity extensions via our powerful ChartModifier API within our JavaScript charting library.

Read the DocsSee a Demo

Styling, Theming, Animating

Our JavaScript Charting Controls ship with 3 stunning themes in a Theme Manager, which you can apply to your charts with a single line of code. Themes affect default cursor, zoom, axis, grid and series colors.

You may customize your JavaScript charts even further and create your own custom theme.

Furthermore, anything can be animated including styles, data and transitions on mouse-hover or click.

Read the DocsSee a Demo

Financial / Stock Charts in JS

Our JS Charts support multiple financial chart types out of the box, including candlestick, ohlc, mountain (area), column for volume bars and bands (range high/low fill)

SciChart allows linking multiple JS charts (multi-pane apps), several axis types (logarithmic, date, numeric) and more. Using our flexible building blocks for charts – you can create rich, custom finance and trading apps. You can also white-label our charts to create precisely the experience your users want.

Learn MoreSee Demo

JavaScript 3D Charts

SciChart.js supports WebGL powered JavaScript 3D Charts including a Realtime 3D Surface mesh, 3D Point cloud chart, 3D Scatter chart, 3D Bubble chart and 3D Point line chart.

Our 3D Charts in JS are both real-time and interactive allowing dynamic updates and seamless zooming, panning and rotating of the 3D scene inside your charting application.

See Demo #1See Demo #2

Advanced JavaScript Chart API: Extensible and Customizable

SciChart’s JavaScript Chart API has been refined over ten years with feedback from thousands of developers and end-users. Our Chart API has amazingly rich features which allow you to extend, customize or otherwise bend the chart control to your will.

Annotations
Annotations
Animations
Animations
Axis APIs
Axis APIs
Axis Types
Axis Types
Chart Series APIs
Chart Series APIs
Cursors and Tooltips
Cursors and Tooltips
Data Labels
Data Labels
Data APIs
Data APIs
Documentation & Help
Documentation & Help
Filters & Data Transforms API
Filters & Data Transforms API
Multi Chart Linking
Multi Chart Linking
Retina Support & DPI
Retina Support & DPI
Serialization & Builder API
Serialization & Builder API
Selection & Hit-Test
Selection & Hit-Test
Theming
Theming
Voiceover, Accessibility
Voiceover, Accessibility
Zooming / Panning
Zooming / Panning

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)
  • 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

 

See Axis Types Docs

 

Chart Series APIs

  • All 2D Chart Types 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
  • Continuous Delivery
    • Actively developed with regular publishing to npm / JSDelivr
    • Online changelogs
  • Help & Support

 

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 <div>
    • 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

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

JavaScript Charts Built For Developers

Continous Delivery

SciChart.js keeps growing and improving with new JavaScript Charts features and updates. Report a bug and we often fix it that day and push to npm (see changelog). SciChart.js customers benefit from code changes within hours and can apply them straight to their build.

Searchable, Online Documentation

With hundreds of documentation pages online, tutorials, code samples and thousands of forum questions all indexed by Google, find what you need about our JavaScript chart library fast just by searching the web.

See Changelog Read Documentation

Ready to get started?

Choose your licence and you’re good to go. If you’re a commercial enterprise and need
help choosing the right product, you can always speak to our team for advice.

Get started

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Get Started Free TodayView Demo