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.
Here, we’re demonstrating how to create a JavaScript Bubble Chart, which draws point markers (Ellipse, Square, Triangle, Circle) at X,Y locations.
Bubble charts are created in SciChart.js using the FastBubbleRenderableSeries.
The JS Bubble chart type can be animated, have varying point colors and sizes and supports a variety of point types: circle, square, and custom shapes are possible. Learn more about them below.
Custom Color Maps
Like our wider range of JavaScript charts, SciChart.js bubble charts support custom color maps, allowing you to assign your own unique colors to each data point. Whether you want to create a high-impact, attention-grabbing graph or an on-brand one that matches your company colors, it’s all possible with SciChart.
Zooming, Panning and Interactions
We support an impressive range of interactive and animation features. You can zoom, pan or mouse-wheel our JavaScript bubble charts. Data can be dynamically updated, apply animations when data is changed, or onLoad or style change. Our JavaScript bubble charts also support selection, hover events and tooltips to create interactive-rich dashboards.
Dealing With High Amounts of Data
SciChart.js graphs and charts don’t just look the part: they really perform. Each one can accept millions of individual data points and has been optimised to load quickly and run smoothly on any machine. So, if you want to visualize large amounts of data in seconds, SciChart.js has you covered.
Use Cases and Industries
Similar to scatter charts, bubble charts add another visual variable – the size of each bubble. This makes them ideal for presenting data that has three or more dimensions.
A wide variety of industries use them within SciChart.js to communicate vital information to investors, stakeholders and decision makers. We work with an array of companies in an equally varied collection of sectors, including pharmaceutical, oil and gas, medical, instrumentation, defence, aerospace, motorsport, process automation, mining, investment banking, trading and more.
Ready To Create Your JavaScript Bubble Charts?
How Does it Work?
JavaScript bubble charts in SciChart.js are created using the FastBubbleRenderableSeries type. Use the source code below to get started.
Anything is possible in SciChart.js. For example, you can render gaps, implement varied point markers, paint bubbles with different colors and more.
Learn How in the JavaScript Chart Documentation.
How to Get Started
Getting started with SciChart is simple – especially if you read our handy Getting Started guide. It teaches you how to:
- Get started for free with our community edition.
- 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.
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
Frequently Asked Questions
My data only has two dimensions – which graph should I use instead?
If you only need to display two dimensions but want a similar-looking graph, we’d recommend using a scatter chart instead.
I have a large amount of data to display. Which type of bubble chart would you recommend?
SciChart.js allows you to create 3D bubble charts, which are perfect for creating point clouds with millions of individual data points.
I have questions about the software – how can I get support?
We’re always happy to help and answer any questions you have about SciChart. Please don’t hesitate to get in touch with us.
