Pre loader

JavaScript Bubble Chart

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.

Getting Started

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.

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.

Get Started For Free Today

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.

JavaScript Chart Examples

2D Charts

Chart Legends

3D Charts
Featured Apps
What's New