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.
The example on this page demonstrates how to create a JavaScript Stacked Column Chart using our feature-rich JavaScript Chart Library, SciChart.js.
SciChart.js allows Stacked Column Charts to be created in JavaScript. A column or rectangle is rendered from the Y-value of each stacked column series to the Y-value of the next, building columns on top of one another. Each column can have different colors, and you can stack to 100% using our library. Learn more below!
Custom Color Maps
All our JavaScript charts are highly configurable and adaptable to suit your preferences and requirements – and color mapping is just one area you can tweak. Color is especially important in a stacked column chart, as it helps users identify each data segment and draw comparisons from column to column.
Using SciChart.js, you can add either solid or gradient fills to each individual column and segment, making it easy to create on-brand, user-friendly charts.
Dealing With High Amounts Of Data
SciChart.js supports millions of individual data points, and has been designed with performance in mind. No matter your requirements (or how much data you’re looking to present), our chart library equips you with the tools to bring your project to life.
Columns require extra geometry and can be difficult to optimize. However, with SciChart, we can perform speeds of up to 60 frames per second for your column charts – much faster than any of the JS chart competitors.
Use Cases And Industries
Our JavaScript stacked column charts make it easy to visualize individual data segments and how they contribute to an overall total. This means the list of potential uses for them is vast, and we’re proud to say that thousands of developers across the world have used our chart solutions.
We work with customers in an array of industries, including pharmaceutical, oil and gas, medical, instrumentation, defence, aerospace, motorsport, process automation, mining, investment banking, trading and more.
The Stacked Chart is good for comparing totals and values of sub-categories. Stacked Charts are particularly effective when the value difference between sub-categories in each category is high. This chart is helpful for comparing the demographics of customers, showing who brings in the most revenue, for instance.
How Does It Work?
In SciChart.js, you can create a JavaScript stacked column chart using the FastColumnRenderableSeries type with the following code:
Learn How in the JavaScript Chart Documentation.
To change the width of the column, set the dataPointWidth property from 0.0 to 1.0. This alters how much space the column takes up. It’s also possible to render gaps in columns. Explore the full range of functionality and sample code by signing up to our community edition for free today.
How To Get Started
Want to make the most of your SciChart.js licence? Of course you do! That’s why we’ve put together a clear, step-by-step Getting Started guide:
- 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.
No matter how intricate or specialised your project is, you can pull it off with SciChart. When you sign up, you’ll be granted access to a vast collection of online documentation as well as an active online forum, helping you get your queries answered in no time.
Why Use SciChart?
- Fast rendering for real-time data feeds
- Supports customisable, interactive features
- Five-star rated support for developers
- Winner of the Queen’s Award for Innovation
- Extensive features for complex charts
Frequently Asked Questions
Can I create traditional column charts, too?
Yes, you can create any type of column chart you can imagine within SciChart.js!
What is the advantage of using a stacked bar chart?
When you need to compare data points when comparing whole and distinct parts of your data, it is often easier to see the comparison on a stacked bar chart.
What support is available to developers?
You’ll be able to access our active online forum for help, support and guidance. Our customers can also submit support tickets using our straightforward system.
What styling options are available besides gradient fills?
With SciChart.js, the only limit is your imagination. It’s possible to create your own custom theme, resulting in charts that are as unique as your business.
