JavaScript Donut Chart - Editor

Donut Chart is a variation of Pie chart - functionally it's the same, visually it's only missing the center.

The chart can be created with a few simple lines of code.

The inner radius is used to set how far inwards from the outer edge of the circle we should cut the circle from, essentially creating a ring.
For example, setting the inner radius as 0.50 will draw a ring, where the circle's inner radius is at 50% distance from the circle's full radius.

// Create a new Pie Chart.
const chart = lightningChart().Pie()

It is possible to disable the animations for the Pie / Donut chart: value changes, disabling / enabling slices and the explosion / implosion of a slice.
Animations are enabled by default.

// Disable all animations for the chart.

The slice fill styles can be styled by using a palette. A palette is a collection of fill styles which can be called by index.

// Use a palette of colors to create the Fill Styles. You can also create your own
// - check the ColorPalettes documentation for more info.
const colorPalette = ColorPalettes.fullSpectrum
// Create a palette of Fill Styles to use with the Pie Chart's Slices.
const fillStylePalette = SolidFillPalette(colorPalette, 10)

You can also create a custom color palette and use it with the Chart.
Easiest way to add a custom color palette is to create an array of colors and creating a function that returns colors from the array based on index.

// ----- Create custom Palette for Donut (defines color of Slice filling) ----
const colorArray = [
    ColorRGBA(97, 33, 15, 255),
    ColorRGBA(255, 140, 66, 255),
    ColorRGBA(225, 86, 52, 255),
    ColorRGBA(234, 43, 31, 255),
    ColorRGBA(249, 223, 116, 255),
    ColorRGBA(245, 224, 183, 255),
// Create a simple function which returns a color based on index.
// Both parameters (length and index) can be used to create more complex functions -
// length should be the length of the color array.
const colorPalette = (length) => (index) => {
    return colorArray[index]
// Pass the color palette to the SolidFillPalette method,
// which returns a fillStyle palette that can be used with the Donut Chart
const fillStylePalette = SolidFillPalette(colorPalette, data.values.length)
// Set the custom fillStyle for the Donut Chart

All slices in the chart can have a border surrounding them, which can be styled for the entire chart.

// Create a StrokeStyle to use with the chart.
const customStrokeStyle = new SolidLine({
    fillStyle: new SolidFill({ color: ColorRGBA(30, 144, 255) }),
    thickness: 5,
// Set the StrokeStyle to use with all slices in the chart.