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

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

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

The Pie Chart represents data in a form of circle divided into triangular wedges called segments. 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.

Create a Pie Chart

To create a Pie Chart, you have to create a number of PieSegment instances and add them to the SciChartPieSurface.pieSegments collection.

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.Pie;
sciChartPieSurface.holeRadius = 0.6;
sciChartPieSurface.animate = true;
sciChartPieSurface.legend.showLegend = true;
sciChartPieSurface.legend.showCheckboxes = true;
sciChartPieSurface.legend.animate = true;
sciChartPieSurface.legend.placement = ELegendPlacement.TopRight;
sciChartPieSurface.legend.orientation = ELegendOrientation.Vertical;
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);

Pie Chart Configuration & Styling

Configuring the SciChartPieSurface

The SciChartPieSurface can also be configured with a number of properties, including:

SciChartPieSurface Property Description
labelProvider Gets or sets a LabelProvider - a class which is responsible for formatting axis labels and cursor labels from numeric values
labelStyle Gets or sets a TTextStyle object for styling labels
pieType Gets or sets the type of the pie chart. See EPieType for a list of values
holeRadius Gets or sets the hole radius, which allows you to create Donut charts instead of Pie.
holeRadiusSizingMode Gets or sets the hole radius size mode for Donut charts. See ESizingMode for a list of values
padding Gets or sets padding as a pixel amount
canvasBorder Gets or sets the border thickness and colour around the pie chart
seriesSpacing Defines a pixel spacing between pie segments
valueMode Whether to show labels as values, or percentages. Label formatting can also be achieved with the LabelProvider
labelRadiusAdjustment Use this to adjust the position of the labels. 1 is the default. Larger values will shift the labels outwards. For Pie charts, 1.7 will place the labels outside the pie If you want more detailed control you can override calcTitlePosition.

 

Styling Pie Segments

PieSegment elements can be styled using one of the following options:

PieSegment Property Description
color Sets a solid color as an HTML Color code
colorLinearGradient Allows definining a linear gradient (see GradientParams) per segment
isSelected Whether a segment is selected. Selected segments are shifted outwards by the delta.
text A text value for the segment which will be displayed in the legend.
value Gets or sets the value of the PieSegment
delta The amount to shift the segment when isSelected is true. Defaults to 15 pixels
shift The amount the segment is shifted radially outwards. Automatically set during selected/deselection animations Do not set this directly. Use delta and isSelected instead
labelOffset An x,y offset for the label position in pixels
labelProvider Optional class that can override the default label formatting for this segment only. Must inherit from PieLabelProvider
labelStyle Gets or sets a TTextStyle object for styling labels for this segment only
radiusAdjustment A relative adjustment of the radius for this segment. eg 1.5 will be 50% larger than normal

 

Formatting Pie Labels

By default, a PieSegment formats labels either as their value, or as a percentage. See SciChartPieSurface.valueMode for how to switch between the two.

You can override the Pie Chart label formatting or label HTML entirely using the PieLabelProvider. Three functions which allow you to do this:

PieLabelProvider Function Description
formatLabel

A function returns a string which simply formats the label. For example:

formatLabel
Copy Code
sciChartPieSurface.labelProvider.formatLabel = (dataValue: number) => dataValue.toFixed(2) + "%";
getSegmentText

Allows returning HTML content for the pie chart label. For example:

formatLabel
Copy Code
// Simple example
sciChartPieSurface.labelProvider.getSegmentText = (segment: IPieSegment, total) => "Some Apples";

// Complex example
sciChartPieSurface.labelProvider.getSegmentText = (segment: IPieSegment, total) =>
        `<span>${segment.text}<span><br/><span>${segment.value.toFixed(0)} (${((100 * segment.value) / total).toFixed(
            1
        )}%)</span>`;

 

formatCursorLabel

Additional formatting for cursors on pie charts

formatCursorLabel
Copy Code
sciChartPieSurface.labelProvider.formatCursorLabel = (dataValue: number) => dataValue.toFixed(2) + "%";

 

 

PieLabelProvider exists on both the SciChartPieSurface and PieSegment, so you can format all labels, or specific labels

Here's a worked example which incorporates all the above:

import { PieLabelProvider } from "scichart/Charting/Visuals/Axis/LabelProvider/PieLabelProvider";
import { IPieSegment } from "scichart/Charting/Visuals/SciChartPieSurface/PieSegment/IPieSegment";
import { PieSegment } from "scichart/Charting/Visuals/SciChartPieSurface/PieSegment/PieSegment";
import { SciChartPieSurface, EPieType } from "scichart/Charting/Visuals/SciChartPieSurface/SciChartPieSurface";
import { Point } from "scichart/Core/Point";
import { EColor } from "scichart/types/Color";
export async function pieChartLabelFormat(divElementId) {
    const sciChartPieSurface = await SciChartPieSurface.create(divElementId);
    // Set this to adjust the radial position of the labels
    // When positioning outside the pie, you may want to make further fine adjustments to label positions using the labelOffset as shown below
    sciChartPieSurface.labelRadiusAdjustment = 1.7;
    // set default label style
    sciChartPieSurface.labelStyle = { fontSize: 14, color: EColor.White };
    // labelProvider on the surface will be used if an override is not set on a segment
    sciChartPieSurface.labelProvider.getSegmentText = (segment, total) =>
        `<span>${segment.text}<span><br/><span>${segment.value.toFixed(0)} (${((100 * segment.value) / total).toFixed(
            1
        )}%)</span>`;
    const pieSegment1 = new PieSegment({
        color: "#f8f682",
        value: 40,
        text: "Bananas",
        labelOffset: new Point(10, 0),
        // labelStyles can be overridden per segment.  
        // These will be merged onto the surface style so the resulting style here is fontSize: 14, color: "#f8f682"
        labelStyle: { color: "#f8f682" }
    });
    const pieSegment2 = new PieSegment({
        color: "#00a1ff",
        value: 10,
        text: "Apples",
        labelOffset: new Point(0, -20)
    });
    // If you set a property on the segment labelProvider, it will override the one on the surface
    pieSegment2.labelProvider.getSegmentText = (segment, total) => "Some Apples";
    // You can also pass labelProvider options in on the constructor.
    const pieSegment3 = new PieSegment({
        color: "#f0b44c",
        value: 20,
        text: "Oranges",
        labelProvider: new PieLabelProvider({ labelPrefix: "Oranges: "}),
        labelOffset: new Point(-25, 0),
        labelStyle: { color: "#f0b44c" }
    });
    const pieSegment4 = new PieSegment({
        color: "#72f884",
        value: 15,
        text: "Grapes"
    });
    // Overriding a property on the segment labelProvider implicitly creates a new default PieLabelProvider that overries the one set on the surface
    pieSegment4.labelProvider.formatLabel = (dataValue) => dataValue.toFixed(2) + "%";
    sciChartPieSurface.pieSegments.add(pieSegment1, pieSegment2, pieSegment3, pieSegment4);
    return sciChartPieSurface;
}
import { PieLabelProvider } from "scichart/Charting/Visuals/Axis/LabelProvider/PieLabelProvider";
import { IPieSegment } from "scichart/Charting/Visuals/SciChartPieSurface/PieSegment/IPieSegment";
import { PieSegment } from "scichart/Charting/Visuals/SciChartPieSurface/PieSegment/PieSegment";
import { SciChartPieSurface, EPieType } from "scichart/Charting/Visuals/SciChartPieSurface/SciChartPieSurface";
import { Point } from "scichart/Core/Point";
import { EColor } from "scichart/types/Color";
export async function pieChartLabelFormat(divElementId: string) {
    const sciChartPieSurface = await SciChartPieSurface.create(divElementId);
    // Set this to adjust the radial position of the labels
    // When positioning outside the pie, you may want to make further fine adjustments to label positions using the labelOffset as shown below
    sciChartPieSurface.labelRadiusAdjustment = 1.7;
    // set default label style
    sciChartPieSurface.labelStyle = { fontSize: 14, color: EColor.White };
    // labelProvider on the surface will be used if an override is not set on a segment
    sciChartPieSurface.labelProvider.getSegmentText = (segment: IPieSegment, total) =>
        `<span>${segment.text}<span><br/><span>${segment.value.toFixed(0)} (${((100 * segment.value) / total).toFixed(
            1
        )}%)</span>`;
    const pieSegment1 = new PieSegment({
        color: "#f8f682",
        value: 40,
        text: "Bananas",
        labelOffset: new Point(10, 0),
        // labelStyles can be overridden per segment.  
        // These will be merged onto the surface style so the resulting style here is fontSize: 14, color: "#f8f682"
        labelStyle: { color: "#f8f682" }
    });
    const pieSegment2 = new PieSegment({
        color: "#00a1ff",
        value: 10,
        text: "Apples",
        labelOffset: new Point(0, -20)
    });
    // If you set a property on the segment labelProvider, it will override the one on the surface
    pieSegment2.labelProvider.getSegmentText = (segment: IPieSegment, total) => "Some Apples";
    // You can also pass labelProvider options in on the constructor.
    const pieSegment3 = new PieSegment({
        color: "#f0b44c",
        value: 20,
        text: "Oranges",
        labelProvider: new PieLabelProvider({ labelPrefix: "Oranges: "}),
        labelOffset: new Point(-25, 0),
        labelStyle: { color: "#f0b44c" }
    });
    const pieSegment4 = new PieSegment({
        color: "#72f884",
        value: 15,
        text: "Grapes"
    });
    // Overriding a property on the segment labelProvider implicitly creates a new default PieLabelProvider that overries the one set on the surface
    pieSegment4.labelProvider.formatLabel = (dataValue: number) => dataValue.toFixed(2) + "%";
    sciChartPieSurface.pieSegments.add(pieSegment1, pieSegment2, pieSegment3, pieSegment4);
    return sciChartPieSurface;
}

This results in the following output.