JavaScript Donut Chart

Donut Chart - JavaScript

Overview

This example illustrates the creation of an animated donut chart using SciChart.js with JavaScript. It demonstrates how to visualize market share data using dynamic, gradient-filled segments and configurable legends. The chart is constructed asynchronously to ensure smooth rendering and maximal performance in web applications.

Technical Implementation

The chart is built by creating a new instance of SciChartPieSurface configured as with pieType = EPieType.Donut, setting holeRadius and holeRadiusSizingMode and animated transitions. Each segment is generated from a dataset by transforming data objects into PieSegment instances with custom linear gradients. The asynchronous initialization in the function drawExample ensures the chart is set up efficiently. For detailed guidance on initializing SciChart.js charts asynchronously, please refer to the Getting Started with SciChart JS documentation.

Features and Capabilities

Key features of this implementation include animated updates, advanced gradient color configuration for each pie segment, dynamic legend orientation and placement, and relative radius adjustments for enhanced visual differentiation of data segments. These capabilities are essential for building interactive visualizations, as detailed in the JavaScript Donut Chart Documentation.

Integration and Best Practices

This example follows best practices by using efficient asynchronous initialization and properly managing resources through a returned destructor function, enabling safe cleanup of the chart instance when no longer needed. Such optimizations are in line with recommendations from the Memory Best Practices guide. Additionally, the use of gradient configurations and dynamic legends simplifies further customization and integration of SciChart.js into standard JavaScript projects. For more technical insights on animated configurations and gradient customization, developers can also explore practical examples in the JavaScript Donut Chart Documentation.