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.
We have created an example that demonstrates how to create a JavaScript Scatter Chart using SciChart.js.
Scatter Charts in SciChart.js can render a number of predefined point types (Circle, Square, Triangle, Cross) at X Y locations on the chart. Custom shapes are possible, and you can vary the colors of scatter points, or even the sizes if you use our JavaScript Scatter Chart type.
Custom Color Maps
The customization potential of SciChart.js graphs is limitless: if you can imagine it, you can create it. Our PaletteProvider API makes it possible to give each scatter chart point a unique color, you can easily create custom markers and themes to make your charts stand out.
If you’re looking for a tool to create high-quality, high-performance branded charts, SciChart.js is just what you need.
Zooming, Panning and Interactions
You can zoom, pan or mouse-wheel our JavaScript scatter charts. We also support selection, hover events and tooltips to create rich interactive dashboards. Data can be updated dynamically, with animations and style changes available when data is changed. You can also onLoad.
Dealing with high amounts of data
Whatever project you’re embarking on, SciChart equips you with the tools to make it happen. Our software supports millions of data points and can load them all in seconds. With, SciChart.js your scatter charts can process millions of data points at interactive refresh rates – perfect for the most demanding applications.
Use Cases And Industries
Scatter charts (or plots) are ideal for determining whether two variables are correlated. Plotted correctly, scatter charts make it easy to determine whether or not different aspects of your data are connected, helping you solve problems and make informed decisions.
The range of potential use cases for our JavaScript scatter graphs is infinite! That’s why our solutions are used by so many different companies in so many different industries, from pharmaceutical, oil and gas, medical, instrumentation, defence, aerospace, motorsport, process automation, mining, investment banking, trading and more.
An example use case is to display data from sensors in real-time to show vehicle dynamics during a race. Scatter charts can also be used to display fitness and sleep data against time.
Ready To Create Your JavaScript Scatter Charts?
How Does It Work?
In SciChart.js, you can create a scatter chart using the XyScatterRenderableSeries type with the following code:
Learn How in the JavaScript Chart Documentation.
As with all our graph types, SciChart scatter graphs are fully customizable. It’s possible to render gaps in your data, add different point-markers, paint scatter points with different colors and more.
Explore the full range of functionality and sample code, or begin for free today.
How To Get Started
Getting started with your SciChart is simple. Our Getting Started guide tells you everything you need to know to get up to speed; read it to learn how to…
- Code a chart with NPM and Webpack, with step-by-step samples included.
- Compile our examples app and gain access to 80+ chart examples, including donut charts.
- Build a charting app of your own, with easy-to-follow tutorials.
It doesn’t matter how complex or specialist your project is: SciChart allows you to bring it to life. You’ll also gain access to our bank of documentation and a thriving online support forum. making it easy to get your questions answered and drive your project forward.
Why Use SciChart?
- Fast rendering for real-time data feeds
- Supports customizable, interactive features
- Five-star rated support for developers
- Winner of the Queen’s Award for Innovation
- Extensive features for complex charts
- More cost-effective than open-source platforms for big data projects
Frequently Asked Questions
Which other chart types are possible within SciChart.js?
SciChart.js supports a vast range of chart types, and we’ve created examples of each to help you get started!
How much can I modify the appearance of scatter graphs?
SciChart graphs can be modified endlessly to suit your individual requirements or to adhere to a company’s brand guidelines. Using our Theme Manager, you can create a custom theme and bring your vision to life.
