SciChart.js JavaScript 2D Charts API > 2D Chart Types > The Donut Chart Type
The Donut Chart Type

In SciChart.js, the JavaScript Donut Chart type is represented by the SciChartPieSurface type.

The JavaScript Donut Chart Example can be found in the SciChart.Js Examples Suite on Github, or our live demo at demo.scichart.com

The Donut Chart represents data in a form of circle divided into segments called PieSegments. A PieSegment represents a percentage that corresponds to a particular value. This value appears drawn on every segment and can be set in code. A PieSegment can be selected by clicking either on it or on the corresponding item in the Legend. This action provides a visual feedback on the chart and the Legend.

JavaScript Donut Charts by SciChart.js

Create a Donut Chart

To create a Donut Chart, you have to create a number of PieSegment instances and add them to the SciChartPieSurface.pieSegments collection. Set the property sciChartPieSurface.pieType = EPieType.Donut to enable a donut chart. Then the property sciChartPieSurface.holeRadius is obeyed to create the donut.

Each  PieSegment has properties for value, text and color, or alternatively colorLinearGradient if you wish to specify a gradient fill. The property isSelected denotes whether the  PieSegment is in the selected state or not.

Declare SciChartPieSurface
Copy Code
const sciChartPieSurface = await SciChartPieSurface.create(divElementId);
sciChartPieSurface.pieType = EPieType.Donut;
sciChartPieSurface.holeRadius = 0.6;
sciChartPieSurface.animate = true;
sciChartPieSurface.legend.showLegend = true;
sciChartPieSurface.legend.showCheckboxes = true;
sciChartPieSurface.legend.animate = true;
const pieSegment1 = new PieSegment({
    color: "#228B22",
    value: 40,
    text: "Green",
    colorLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
        { color: "#1D976C", offset: 0 },
        { color: "#93F9B9", offset: 1 },
    ]),
});
const pieSegment2 = new PieSegment({
    value: 10,
    text: "Red",
    colorLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
        { color: "#DD5E89", offset: 0 },
        { color: "#F7BB97", offset: 1 },
    ]),
});
const pieSegment3 = new PieSegment({
    value: 20,
    text: "Blue",
    colorLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
        { color: "#1FA2FF", offset: 0 },
        { color: "#12D8FA", offset: 0.5 },
        { color: "#A6FFCB", offset: 1 },
    ]),
});
const pieSegment4 = new PieSegment({
    value: 15,
    text: "Yellow",
    colorLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
        { color: "#F09819", offset: 0 },
        { color: "#EDDE5D", offset: 1 },
    ]),
});
sciChartPieSurface.pieSegments.add(pieSegment1, pieSegment2, pieSegment3, pieSegment4);

Styling Donut Chart Segments

TODO