React Donut Chart

1import { appTheme } from "../../../theme";
2import {
3    EPieType,
4    ESizingMode,
5    SciChartPieSurface,
6    PieSegment,
7    GradientParams,
8    Point,
9    ELegendOrientation,
10    ELegendPlacement,
11} from "scichart";
12
13export const drawExample = async (rootElement: string | HTMLDivElement) => {
14    // Create the pie chart
15    const sciChartPieSurface = await SciChartPieSurface.create(rootElement, {
16        theme: appTheme.SciChartJsTheme,
17        pieType: EPieType.Donut,
18        holeRadius: 0.6,
19        holeRadiusSizingMode: ESizingMode.Relative,
20        animate: true,
21        seriesSpacing: 10,
22        showLegend: true,
23        showLegendSeriesMarkers: true,
24        animateLegend: true,
25    });
26    // Optional placement of legend
27    sciChartPieSurface.legend.orientation = ELegendOrientation.Vertical;
28    sciChartPieSurface.legend.placement = ELegendPlacement.TopLeft;
29
30    // SciChart.js expects a list of PieSegment, however data is often formatted like this
31    // Dataset = 'percentage market share of phones, 2022'
32    const dataset = [
33        { name: "Chrome", percent: 65.27 },
34        { name: "Safari", percent: 19.03 },
35        { name: "Edge", percent: 4.4 },
36        { name: "Firefox", percent: 3.07 },
37        { name: "Samsung", percent: 2.7 },
38        { name: "Opera", percent: 2.49 },
39        { name: "Android", percent: 0.78 },
40        { name: "IE", percent: 0.32 },
41    ];
42
43    // Colors are just hex strings, supporting #FFFFFF (RBG) or 8-digit with RGBA or CSS color strings e.g. rgba()
44    const colors = [
45        { color1: appTheme.VividOrange, color2: appTheme.MutedOrange },
46        { color1: appTheme.Indigo, color2: appTheme.VividBlue },
47        { color1: appTheme.MutedSkyBlue, color2: appTheme.MutedTeal },
48        { color1: appTheme.MutedTeal, color2: appTheme.PaleTeal },
49        { color1: appTheme.VividSkyBlue, color2: appTheme.MutedSkyBlue },
50        { color1: appTheme.MutedRed },
51        { color1: appTheme.MutedPink },
52        { color1: appTheme.VividPink },
53    ];
54
55    // Optional Relative radius adjustment per segment
56    const radiusSize = [0.8, 0.85, 0.9, 0.9, 0.9, 0.95, 0.95, 0.95];
57
58    const toPieSegment = (name: string, value: number, radiusAdjustment: number, color1: string, color2: string) => {
59        return new PieSegment({
60            value,
61            text: name,
62            labelStyle: { color: appTheme.ForegroundColor },
63            radiusAdjustment,
64            showLabel: value > 2,
65            colorLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
66                { color: color1, offset: 0 },
67                { color: color2 || color1 + "77", offset: 1 },
68            ]),
69        });
70    };
71
72    // Transform the data to pie segment and add to scichart
73    const pieSegments = dataset.map((row, index) =>
74        toPieSegment(row.name, row.percent, radiusSize[index], colors[index].color1, colors[index].color2)
75    );
76
77    sciChartPieSurface.pieSegments.add(...pieSegments);
78
79    return { sciChartSurface: sciChartPieSurface };
80};
81