Get Started with the Pie Chart

• Apr 18, 2023
• 5 minutes to read

This tutorial demonstrates how to create a DevExpress Blazor PieChart, bind it to data, and customize the chart’s main settings (legend, labels, tooltips, etc.).

Create an Application

Refer to the Create an application section for instructions.

If you use Microsoft project templates, follow the steps below:

1. Configure the application as described in this topic: Microsoft Templates (NuGet Packages).
2. Apply the DevExpress Blazing Berry theme as described in this topic: Apply a DevExpress Theme.

Add a Pie Chart and Bind It to Data

1. Add the <DxPieChart> and </DxPieChart> tags to the Pages/Index.razor page.

   Index.razor

   <DxPieChart>
   </DxPieChart>
   

2. In the Razor @code block, create a SessionInfo class with the Country and Total fields.

   Index.razor

   public class SessionInfo {
       public string Country { get; set; }
       public int Total { get; set; }
   }
   

3. Declare the infos property (an array of SessionInfo objects). Fill this array in the OnInitialized method.

   Index.razor

   @code {
       private SessionInfo[] infos;
   
       protected override void OnInitialized() {
           infos = GetSessionInfos();
       }
   
       public SessionInfo[] GetSessionInfos() {
           SessionInfo[] sales = new SessionInfo[] {
               new SessionInfo() { Country = "China",          Total = 16591},
               new SessionInfo() { Country = "United States",  Total = 10286},
               new SessionInfo() { Country = "India",          Total = 7978},
               new SessionInfo() { Country = "South Korea",    Total = 6118},
               new SessionInfo() { Country = "Germany",        Total = 5385},
               new SessionInfo() { Country = "Turkey",         Total = 5064},
               new SessionInfo() { Country = "Vietnam",        Total = 2804},
               new SessionInfo() { Country = "United Kingdom", Total = 2451},
               new SessionInfo() { Country = "Italy",          Total = 2130},
               new SessionInfo() { Country = "Brazil",         Total = 2093},
           };
           return sales;
       }
   }
   

4. Assign the infos array to the Chart’s Data property.

   Index.razor

   <DxPieChart Data="@infos">
   </DxPieChart>
   

Add a Series

Add a DxPieChartSeries object to the chart.

Specify the TArgument and TValue properties to define the data type of arguments and values.

Set the ArgumentField and ValueField properties to specify data source fields that store arguments and values.

Index.razor

<DxPieChart Data="@infos">
    <DxPieChartSeries T="SessionInfo"
                      TArgument="string"
                      TValue="double"
                      ArgumentField="i => i.Country"
                      ValueField="i => i.Total">
    </DxPieChartSeries>
</DxPieChart>

Series arguments are shown in the legend.

If you add multiple series to the PieChart component, they will be displayed as nested rings of the same pie. For more information, refer to the following section: Pie Chart – Series.

Customize the Legend

Create a DxChartLegend object and specify its following properties:

• HorizontalAlignment
• VerticalAlignment
• Orientation

Index.razor

<DxPieChart Data="@infos">
    @*...*@
    <DxChartLegend HorizontalAlignment="HorizontalAlignment.Right"
                   VerticalAlignment="VerticalEdge.Top"
                   Orientation="Orientation.Vertical" />
</DxPieChart>

For more information about the legend, refer to the following section: Pie Chart – Legend.

Display and Customize Labels for Pie Sectors

Create a DxChartSeriesLabel object within the <DxPieChartSeries> tag. Set the Visible property to true to display labels.

Set the Position property to RelativePosition.Outside to show labels out of pie sectors.

Create a DxChartSeriesLabelConnector within the <DxChartSeriesLabel> tag, and set its Visible to true to draw label connectors.

Index.razor

<DxPieChartSeries ...>
    <DxChartSeriesLabel Visible="true"
                        Position="RelativePosition.Outside">
        <DxChartSeriesLabelConnector Visible="true" />
    </DxChartSeriesLabel>
</DxPieChartSeries>

To avoid label overlaps, set the ChartLabelOverlap property to PieChartLabelOverlap.Shift.

Index.razor

<DxPieChart LabelOverlap="PieChartLabelOverlap.Shift">
    @*...*@
</DxPieChart>

Refer to the following section for more information about label customization: Pie Chart – Labels.

Add Titles

Create DxChartTitle and DxChartSubTitle objects and specify their Text property.

Index.razor

<DxPieChart ...>
    <DxChartTitle Text="Website Sessions by Country">
        <DxChartSubTitle Text="Weekly Report" />
    </DxChartTitle>
</DxPieChart>

For more information about titles, refer to the following section: Pie Chart – Titles and Subtitles.

Enable and Format Tooltips

The Pie Chart can display tooltips when the mouse pointer is above a pie series sector. Use the DxChartTooltip element to specify tooltip templates.

Index.razor

<DxPieChart ...>
    <DxChartTooltip Enabled="true"
                    Position="RelativePosition.Outside">
        <div style="margin: 0.75rem">
            <div class="font-weight-bold">@context.Point.Argument</div>
            <div>Sessions: @($"{context.Point.Value}")</div>
        </div>
    </DxChartTooltip>
</DxPieChart>

For more information about chart tooltips, refer to the following section: Pie Chart – Tooltips.

Specify Pie Chart Dimensions

Use the DxChartBase.Width and DxChartBase.Height properties to specify a custom size for the chart component.

Index.razor

<DxPieChart Width="920" Height="440">
    @*...*@
</DxPieChart>

For more information on how to specify the chart size, refer to the following section: Pie Chart – Sizing.

Specify the Diameter property to define the pie chart’s outer diameter relatively to the component size. Use the InnerDiameter property to specify the inner circle diameter and transform the pie to a donut.

Index.razor

<DxPieChart ...
            Diameter="1"
            InnerDiameter="0.5">
    @*...*@
</DxPieChart>

Complete Code

View Example

Index.razor

@page "/"

<DxPieChart Data="@infos"
            Diameter="1"
            InnerDiameter="0.5"
            LabelOverlap="PieChartLabelOverlap.Shift" 
            Width="920" Height="440">
    <DxPieChartSeries T="SessionInfo"
                      TArgument="string"
                      TValue="double"
                      ArgumentField="i => i.Country"
                      ValueField="i => i.Total">
        <DxChartSeriesLabel Visible="true"
                            Position="RelativePosition.Outside">
            <DxChartSeriesLabelConnector Visible="true" />
        </DxChartSeriesLabel>
    </DxPieChartSeries>
    <DxChartTitle Text="Website Sessions by Country">
        <DxChartSubTitle Text="Weekly Report" />
    </DxChartTitle>
    <DxChartLegend HorizontalAlignment="HorizontalAlignment.Right"
                   VerticalAlignment="VerticalEdge.Top"
                   Orientation="Orientation.Vertical" />
    <DxChartTooltip Enabled="true"
                    Position="RelativePosition.Outside">
        <div style="margin: 0.75rem">
            <div class="font-weight-bold">@context.Point.Argument</div>
            <div>Sessions: @($"{context.Point.Value}")</div>
        </div>
    </DxChartTooltip>
</DxPieChart>

@code {
    private SessionInfo[] infos;
    protected override void OnInitialized() {
        infos = GetSessionInfos();
    }
    public class SessionInfo {
        public string Country { get; set; }
        public int Total { get; set; }
    }
    public SessionInfo[] GetSessionInfos() {
        SessionInfo[] sales = new SessionInfo[] {
            new SessionInfo() { Country = "China",          Total = 16591},
            new SessionInfo() { Country = "United States",  Total = 10286},
            new SessionInfo() { Country = "India",          Total = 7978},
            new SessionInfo() { Country = "South Korea",    Total = 6118},
            new SessionInfo() { Country = "Germany",        Total = 5385},
            new SessionInfo() { Country = "Turkey",         Total = 5064},
            new SessionInfo() { Country = "Vietnam",        Total = 2804},
            new SessionInfo() { Country = "United Kingdom", Total = 2451},
            new SessionInfo() { Country = "Italy",          Total = 2130},
            new SessionInfo() { Country = "Brazil",         Total = 2093},
        };
        return sales;
    }
}