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.
Use this example to learn how to create a JavaScript Area or Mountain Chart using SciChart.js, our in-house JavaScript chart framework.
An area (or mountain) chart draws a line with a polygon underneath. In SciChart.js, the zero line of the mountain is configurable, so it can be zero or a specific value.
Area charts 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.
Tips
By setting the stroke property you alter the line color, and fill alters the fill. The Mountain-series also supports semi-transparent and linear gradient brush fills and looks great!.
Custom Color Maps
There’s no limit to what you can do with SciChart.js. Make sure your graphs stand out and are on-brand with custom color mapping functionality. Our PaletteProvider API not only allows you to select custom solid and gradient fills but also makes it possible to assign unique colors to individual data points and create your own custom themes.
Zooming, Panning and Interactions
Our JavaScript mountain or area charts can be zoomed in or out using the mouse wheel. Data can be updated with onLoad, and style changes or animations can easily be applied. Our column charts enable sophisticated interactive dashboards by supporting selection, hover events, and tooltips.
Dealing With High Amounts of Data
There are no limits to SciChart’s capabilities. Our graphs support millions of individual data points, allowing you to create vast 2D graphs and even 3D point clouds. If you can imagine it, you can create it – and SciChart.js’ stunning performance optimization makes it easy for anyone to view the data on any device.
Use Cases and Industries
Similar in principle to line charts but with a solid fill beneath the line, area (or mountain) charts are eye-catching and easy to read, making them perfect for attention-grabbing presentations or reports.
So many industries use our JavaScript mountain charts to effectively communicate and analyze trends. Sectors using SciChart.js include pharmaceuticals, oil and gas, medical, instrumentation, defence, aerospace, motorsport, process automation, mining, investment banking, trading and more.
Ready to Create Your JavaScript Area Charts?
How Does it Work?
In SciChart.js, our JavaScript area charts are created using the FastMountainRenderableSeries type.
It’s also possible to render gaps in mountain charts, add point markers and paint different segments of your chart with different colors.
Learn How in the JavaScript Chart Documentation.
How to Get Started
Keen to get started with SciChart? Our Getting Started guide shows you how to:
- Get started for free with the 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
- 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
How much does SciChart cost?
We offer a range of package deals to suit your company’s needs. Discover more on our pricing page.
What support will I get to help me build JavaScript area charts?
Developers will be able to access a dedicated support forum and easy-to-use ticket system.
What other graphs can be created in SciChart.js?
SciChart.js supports a wide range of different chart types. View them all in our chart library.
