Pie Chart

• Dec 18, 2018
• 4 minutes to read

The DevExpress DXPieChart allows you to visualize your data in a Pie (Circular) chart. The image below represents a Pie chart and highlights its major elements:

This guide contains the descriptions of specific operations that can be performed with the DXPieChart.

How to: modify chart series

The Chart visualizes data the series provides. Each series defines data appearance and behavior. Series that are compatible with the Pie Chart inherit the DXPieSeries class.

Note

The chart should be populated with data. Refer to the Series: Data Providing guide for more information.

The following code snippet shows how to add a series to a chart:

Objective C

DXDonutSeries *series = [[DXDonutSeries alloc] init];
series.data = [CountryAreaData dataWithNames:@[@"Russia", @"Canada", @"China", @"USA", @"Brazil"]
                                    andAreas:@[@17.098, @9.985, @9.597, @9.525, @8.515]];
[self.pieChart addSeries:series];

// Interfaces of the GdpData and Gdp classes.
@interface CountryAreaData <DXPieSeriesData>
    +(instancetype)dataWithNames: (NSArray<NSString *> *)names andAreas: (NSArray<NSNumber *> *)areas;
@end

// implementations of the Gdp and GdpData classes.
@implementation CountryAreaData {
    NSArray<NSString *> *names;
    NSArray<NSNumber *> *areas;
}
+(instancetype)dataWithNames: (NSArray<NSString *> *)names andAreas: (NSArray<NSNumber *> *)areas {
    CountryAreaData *data = [[CountryAreaData alloc] init];
    data->areas = areas;
    data->names = names;
    return data;
}
-(int) getDataCount {
    return (int)areas.count;
}
-(NSString *) getLabelByIndex: (int) index {
    return [names objectAtIndex:index];
}
-(double) getValueByIndex: (int) index {
    return [[areas objectAtIndex:index] doubleValue];
}
@end

Swift

let series = DXDonutSeries();
series.data = CountryAreaData(names:["Russia", "Canada", "China", "USA", "Brazil"],
                              areas:[17.098, 9.985, 9.597, 9.525, 8.515]);
self.pieChart.addSeries(series);

// ...
class CountryAreaData : NSObject, DXPieSeriesData {
    let countryNames: [String];
    let countryAreas: [Double];

    init(names: [String], areas: [Double]) {
        countryNames = names;
        countryAreas = areas;
    }

    func getCount() -> Int32 {
        return Int32(countryNames.count);
    }

    public func getLabelBy(_ index: Int32) -> String! {
        return countryNames[Int(index)];
    }

    public func getValueBy(_ index: Int32) -> Double {
        return countryAreas[Int(index)];
    }
}

C#

this.pieChart.AddSeries(new DXDonutSeries {
    Data = CountryAreaData(
        names: new List<string> {"Russia", "Canada", "China", "USA", "Brazil"},
        areas: new List<double> {17.098, 9.985, 9.597, 9.525, 8.515}
    );
});

// ...
class CountryAreaData : DXPieSeriesData {
    List<string> countryNames;
    List<double> countryAreas;

    public CountryAreaData(List<double> names, List<double> areas) {
        this.countryNames = names;
        this.countryAreas = areas;
    }

    public override int DataCount { get { return countryNames.Count; } }

    public override getLabelByIndex(int index) {
        return countryNames[index];
    }

    public func getValueByIndex(int index) {
        return countryAreas[index];
    }
}

The following table contains methods allowing you to obtain, add or remove series of the chart.

Method	Description
DXPieChart.series	Returns all chart’s series.
DXPieChart::addSeries:	Adds the specified new series to the chart.
DXPieChart::removeSeries:	Removes the specified series from the chart.
DXPieChart::removeSeriesAtIndex:	Removes a series at the specified index from the chart.

How to: configure a chart legend

The Legend identifies series in a chart. The following example demonstrates the basic legend configuration:

Objective C

DXLegend *legend = [[DXLegend init] alloc];
legend.horizontalPosition = DXLegendVerticalPositionCenter;
legend.verticalPosition = DXLegendVerticalPositionTopOutside;
legend.vertical = false;
self.pieChart.legend = legend;

Swift

let legend = DXLegend();
legend.verticalPosition = DXLegendVerticalPosition.topOutside;
legend.horizontalPosition = DXLegendHorizontalPosition.center;
legend.vertical = false;

self.pieChart.legend = legend;

C#

this.pieChart.Legend = new DXLegend {
    VerticalPosition = DXLegendVerticalPosition.TopOutside;
    HorizontalPosition = DXLegendHorizontalPosition.Center;
    Vertical = false;
}

The table below contains the main symbols configuring the legend.

Method	Description
DXChartBase.legend	Gets or sets a chart’s legend settings.
DXLegend	The chart legend options storage.

Refer to the Legend guide for more information about legend configuration.

How to: change chart appearance

Appearance of all chart elements including the Pie Chart can be changed using styles. The following image demonstrates chart parameters on which chart appearance depends:

The following code snippet demonstrates how to obtain the image above:

Objective C

// All sizes are in screen points.
DXPalette *palette = [[DXPalette alloc] init];
palette.colors = @[UIColor.redColor, UIColor.greenColor, UIColor.blueColor, UIColor.yellowColor, UIColor.magentaColor];

DXPieChartStyle *chartStyle = [[DXPieChartStyle alloc] init];
chartStyle.borderColor = UIColor.redColor;
chartStyle.borderThickness = 2;
chartStyle.backgroundColor = [UIColor lightGrayColor];
chartStyle.seriesIndent = 10;
chartStyle.palette = palette;

self.pieChart.style = chartStyle;

Swift

// All sizes are in screen points.
let palette = DXPalette();
palette.colors = [UIColor.red, UIColor.green, UIColor.blue, UIColor.yellow, UIColor.magenta];

let chartStyle = DXPieChartStyle();
chartStyle.borderColor = UIColor.red;
chartStyle.borderThickness = 2;
chartStyle.backgroundColor = UIColor.lightGray;
chartStyle.seriesIndent = 10;
chartStyle.palette = palette;

self.pieChart.style = chartStyle;

C#

// All sizes are in screen points.
self.pieChart.style = new DXPieChartStyle {
    BorderColor = UIColor.FromWhiteAlpha(white: 0.28627f, alpha: 1.0f),
    BorderThickness = 2,
    BackgroundColor = UIColor.FromWhiteAlpha(white: 0.16471f, alpha: 1.0f),
    SeriesIndent = 10,
    Palette = new DXPalette {
        Colors = new UIColor[] {
            UIColor.FromRGBA(red: 0.45882f, green: 0.75294f, blue: 0.60000f, alpha: 1.0f),
            UIColor.FromRGBA(red: 0.67451f, green: 0.76471f, blue: 0.44313f, alpha: 1.0f),
            UIColor.FromRGBA(red: 0.21569f, green: 0.54117f, blue: 0.54117f, alpha: 1.0f),
            UIColor.FromRGBA(red: 0.37255f, green: 0.63529f, blue: 0.41569f, alpha: 1.0f),
            UIColor.FromRGBA(red: 0.02353f, green: 0.28627f, blue: 0.43922f, alpha: 1.0f),
        }
    }    
};

The following symbols allow you to configure chart style:

Symbols	Description
DXPieChart.style	Gets or sets the chart’s appearance settings.
DXPieChartStyle	The Pie chart style settings storage.