Pre loader

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

This demo demonstrates how create a JavaScript Donut Chart with our powerful JavaScript library, SciChart.js.

Donut Charts in SciChart.js support selection, legends, different text labels, animated updates, gradient or solid fills and more.

You can change the fill color of every segment and the style of its label. Every segment can be highlighted by clicking on it or when selected in the legend.


Custom Color Maps

Each segment of a chart has configurable color properties, allowing you to select your own colors – including gradient and solid fill options. This makes SciChart ideal for the creation of consistent, branded graphics; whatever data you want to display, you can do so clearly and effectively.

Dealing With High Amounts of Data

SciChart’s JavaScript charts support millions of data points, allowing you to effectively visualize large datasets in a clear, concise and bitesize format. Whether you need to communicate trends to decision makers or offer insights to potential investors, our JavaScript donut charts make it easy.

You can use these to complement other high performance big data visualizations in a dashboard.

Use Cases and Industries

These charts are effortless to read and don’t require any specialist knowledge. No matter how complex your dataset is, these charts make interpretation simple – so the list of potential use cases is vast.

No matter your industry, you could benefit from using our JavaScript donut charts – be they on your website, dashboards or internal documentation.

Our solution is used by businesses in an array of sectors, including pharmaceutical, oil and gas, medical, instrumentation, defence, aerospace, motorsport, process automation, mining, investment banking, trading and more.

They are particularly ideal for sales dashboards to display revenue and customer percentages.

How Does it Work?

Creating a chart with SciChart is simple.

  1. Create your PieSegment instances and add them to the SciChartPieSurface.pieSegments collection.
  2. Set the property type as sciChartPieSurface.pieType = EPieType.Donut.
  3. The donut chart will be created.

How to get started

To help you get up to speed with SciChart and make the most of your licence, we’ve prepared a Getting Started guide. In it, you’ll learn how to:

  • 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.

Have some complex or specialized data visualizations in mind? Whatever you’re working on, SciChart makes it possible. You’ll also be able to access to a wealth of documentation and an online support forum, allowing you to hit the ground running.

Get Started For Free Today

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

What customizations are available with SciChart?
With SciChart, you can customize JavaScript donut charts with a vast selection of color and styling possibilities. You can also create a half donut by using the full version and hiding some of the elements with implicit styles.

Why should I choose a donut chart instead of a pie chart?
These charts are very similar. The only real difference is that the donut has a hole in the center. If you would like to apply both charts to your dashboard, it’s also possible to combine a pie chart and donut chart together using the Multi Pie Donut Chart code.

What support do you provide to developers?
Our five-star customer service provides support whenever you need it. We have an active online forum as well as a support ticket system, allowing you to get the answers you need quickly.

What types of businesses use your software?
As the market-leading provider of JavaScript chart components, our software is used by leading global companies like Nintendo, Dell, Samsung and McLaren.

JavaScript Chart Examples

2D Charts

Chart Legends

3D Charts
Featured Apps
What's New