Pre loader

JavaScript Column 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

View information on how to create a JavaScript Column Chart using SciChart.js, our high-performance JavaScript Chart Library.

Columns in SciChart.js are rendered with a stroke and fill, and support gradient fill and PaletteProviders for more custom coloring options. Learn more about them below.

Custom Color Maps

As with our other JavaScript charts and graphs, the column chart supports solid and gradient fill options. SciChart can also support coloring individual columns, rounded corners and data-labels above/below columns.

If you’re looking for a way to create on-brand, clear JavaScript column charts that are easy to read and interpret, SciChart.js is ideal.

Zooming, Panning and Interactions

You can zoom, pan or mouse-wheel our column charts. You can also update data dynamically, apply animations when data is changed or onLoad or style change. Our JavaScript column charts support selection, hover events as well as tooltips to create rich interactive dashboards and drill-downs.

Dealing With High Amounts Of Data

Want to present a large dataset in a straightforward, user-friendly format? You can do so with our JavaScript column chart series. Offering incredible performance, our software supports up to 10,000,000 (10 million) datapoints without slowdown. Column charts created within SciChart.js don’t require specialist knowledge to read; anyone can quickly make comparisons and draw conclusions from data, saving valuable time.

Use Cases And Industries

Everyone can understand and appreciate the simplicity and functionality of a column chart. The list of potential use cases and industries for this type of graph is never-ending. It doesn’t matter what your company specialises in, if you have to present data in a clear and concise way (be it for investors, managers or decision-makers), a column chart is ideal.

Our charts can be applied to your website, dashboard or used internally to aid in decision-making. Our customers include Samsung, Dell, Panasonic, Nintendo, Bosch and McLaren.

How Does It Work?

In SciChart.js, you can create a column chart using the FastColumnRenderableSeries type with the following code:

By adjusting the code, it’s possible to render gaps in columns, use point markers instead of columns and color different data points individually. Explore the full range of functionality and sample code, or begin for free today.

How To Get Started

Wondering how to get up to speed with SciChart? We’ve made it easy with our Getting Started guide. Read it to learn 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.

Planning a complex, intricate or highly specialised project? You’ll get all the support you need to bring it to life, with a wealth of online documentation and an active support forum to help you get your questions answered.

Get Started For Free

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

How do I get started?
You can begin experiencing all that SciChart.js has to offer with by signing up to our free community edition. We’ve prepared a handy guide to help you get started.

How much does a licence cost?
Our award-winning solution is available for free with our community edition. For commercial use, view our pricing to learn more.

What does a licence cover?
Each licence permits the use of SciChart.js for one developer and one domain.

JavaScript Chart Examples

2D Charts

Chart Legends

3D Charts
Featured Apps
What's New