Skip to main content

The Pie Chart Type

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

tip

The JavaScript Pie Chart Example can be found in the SciChart.Js Examples Suite > Pie Chart on Github

Above: The JavaScript Pie Chart example from the SciChart.js Demo

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.

// Demonstrates how to create a pie chart with SciChart.js
const {
    SciChartPieSurface,
    EPieType,
    SciChartJsNavyTheme,
    PieSegment,
    ELegendPlacement,
    ELegendOrientation,
    GradientParams,
    Point
} = SciChart;
// or, for npm, import { SciChartPieSurface, ... } from "scichart"

// Create the pie chart
const sciChartPieSurface = await SciChartPieSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme(),
    pieType: EPieType.Pie,
    animate: true
});

// Additional legend options
sciChartPieSurface.legend.showLegend = true;
sciChartPieSurface.legend.showCheckboxes = true;
sciChartPieSurface.legend.animate = true;
sciChartPieSurface.legend.placement = ELegendPlacement.TopRight;
sciChartPieSurface.legend.orientation = ELegendOrientation.Vertical;

// Create pie segments with value, colour and text
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);

This results in the following output: 

Dynamically Updating a Pie Chart​

Pie Charts can be dynamically updated by setting the PieSegment.value property. When SciChartPieSurface.animate is true, updates to the pie chart will be animated.

Try this code below:

// Create a Pie Chart
const sciChartPieSurface = await SciChartPieSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme(),
    pieType: EPieType.Pie,
    animate: true,
    animationFrames: 30
});

// Disable the legend for this example
sciChartPieSurface.legend.showLegend = false;

// Create pie segments and add to the chart
const pieSegment1 = new PieSegment({
    color: "#F48420",
    value: 5
});
const pieSegment2 = new PieSegment({
    color: "#30BC9A",
    value: 10
});
const pieSegment3 = new PieSegment({
    color: "#EC0F6C",
    value: 15
});
const pieSegment4 = new PieSegment({
    color: "#50C7E0",
    value: 20
});
sciChartPieSurface.pieSegments.add(pieSegment1, pieSegment2, pieSegment3, pieSegment4);

// Dynamically update the pie segments
const updateFunc = () => {
    pieSegment1.value = Math.random() * 20 + 10;
    pieSegment2.value = Math.random() * 20 + 10;
    pieSegment3.value = Math.random() * 20 + 10;
    pieSegment4.value = Math.random() * 20 + 10;
    setTimeout(() => updateFunc(), 1500);
};

setTimeout(updateFunc, 1000);

This results in the following output:

Formatting Pie Chart Labels​

Several options for formatting Pie Chart labels are possible with SciChart.js.

Below, an example combines several of these techniques:

// Create a Pie Chart
const sciChartPieSurface = await SciChartPieSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme(),
    pieType: EPieType.Pie,
    animate: true,
    seriesSpacing: 5
});
// 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: "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: "#F48420",
    value: 40,
    text: "Oranges",
    radiusAdjustment: 1.05,
    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: "#F48420" }
});

const pieSegment2 = new PieSegment({
    color: "#30BC9A",
    value: 10,
    text: "Apples",
    radiusAdjustment: 1.1,
    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: "#EC0F6C",
    value: 20,
    text: "Strawberries",
    labelProvider: new PieLabelProvider({ labelPrefix: "Strawberries: " }),
    labelOffset: new Point(-25, 0),
    labelStyle: { color: "#EC0F6C" }
});

const pieSegment4 = new PieSegment({
    color: "#50C7E0",
    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);

Resulting in:

See Also​