JavaScript Pie Chart

1import { appTheme } from "../../../theme";
2import {
3    EPieType,
4    ELegendOrientation,
5    ELegendPlacement,
6    GradientParams,
7    Point,
8    PieSegment,
9    SciChartPieSurface,
10} from "scichart";
11
12export const drawExample = async (rootElement: string | HTMLDivElement) => {
13    // Create the pie chart
14    const sciChartPieSurface = await SciChartPieSurface.create(rootElement, {
15        theme: appTheme.SciChartJsTheme,
16        pieType: EPieType.Pie,
17        animate: true,
18        seriesSpacing: 15,
19        showLegend: true,
20        showLegendSeriesMarkers: true,
21        animateLegend: true,
22    });
23    // Optional placement of legend
24    sciChartPieSurface.legend.orientation = ELegendOrientation.Horizontal;
25    sciChartPieSurface.legend.placement = ELegendPlacement.BottomLeft;
26
27    // SciChart.js expects a list of PieSegment, however data is often formatted like this
28    // Dataset = 'percentage market share of phones, 2022'
29    const dataset = [
30        { name: "Apple", percent: 28.41 },
31        { name: "Samsung", percent: 28.21 },
32        { name: "Xiaomi", percent: 12.73 },
33        { name: "Huawei", percent: 5.27 },
34        { name: "Oppo", percent: 5.53 },
35        { name: "Vivo", percent: 4.31 },
36        { name: "Realme", percent: 3.16 },
37        { name: "Motorola", percent: 2.33 },
38        { name: "Unknown", percent: 2.19 },
39        { name: "LG", percent: 0.85 },
40        { name: "OnePlus", percent: 1.11 },
41        { name: "Tecno", percent: 1.09 },
42        { name: "Infinix", percent: 0.96 },
43        { name: "Google", percent: 0.77 },
44        { name: "Nokia", percent: 0.45 },
45    ];
46
47    // Colors are just hex strings, supporting #FFFFFF (RBG) or 8-digit with RGBA or CSS color strings e.g. rgba()
48    const colors = [
49        { color1: appTheme.VividOrange, color2: appTheme.MutedOrange },
50        { color1: appTheme.Indigo, color2: appTheme.VividBlue },
51        { color1: appTheme.MutedSkyBlue, color2: appTheme.MutedTeal },
52        { color1: appTheme.MutedTeal, color2: appTheme.PaleTeal },
53        { color1: appTheme.VividSkyBlue, color2: appTheme.MutedSkyBlue },
54        { color1: appTheme.MutedRed },
55        { color1: appTheme.MutedPink },
56        { color1: appTheme.VividPink },
57        { color1: appTheme.VividPurple },
58        { color1: appTheme.MutedOrange },
59        { color1: appTheme.VividOrange },
60        { color1: appTheme.PaleTeal },
61        { color1: appTheme.PaleBlue },
62        { color1: appTheme.PaleOrange },
63        { color1: appTheme.PalePink },
64    ];
65
66    // Optional Relative radius adjustment per segment
67    const radiusSize = [0.8, 0.8, 0.8, 0.8, 0.85, 0.85, 0.85, 0.9, 0.9, 0.9, 0.95, 0.95, 0.95, 0.95, 0.95];
68
69    const toPieSegment = (name: string, value: number, radiusAdjustment: number, color1: string, color2: string) => {
70        return new PieSegment({
71            value,
72            text: name,
73            labelStyle: { color: appTheme.ForegroundColor },
74            radiusAdjustment,
75            showLabel: value > 2,
76            colorLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
77                { color: color1, offset: 0 },
78                { color: color2 || color1 + "77", offset: 1 },
79            ]),
80        });
81    };
82
83    // Transform the data to pie segment and add to scichart
84    const pieSegments = dataset.map((row, index) =>
85        toPieSegment(row.name, row.percent, radiusSize[index], colors[index].color1, colors[index].color2)
86    );
87
88    sciChartPieSurface.pieSegments.add(...pieSegments);
89
90    return { sciChartSurface: sciChartPieSurface };
91};
92