![](\"https:\/\/mindfusion.dev\/samples\/blazor\/chart\/doughnut_chart.webp\")
<\/p>\nIn this blog post we are going to walk through the steps necessary to build the beautiful doughnut chart that you see at the image below:<\/p>\n
<\/p>\n
We are going to use MindFusion Charting library for Blazor<\/a> and Visual Studio as the IDE for the project. <\/p>\n <\/p>\n We create a new Blazor Project – a Web Assembly. <\/p>\n This is the easiest way to integrate the Charting library. You can also go with a Blazor Web App, the details on how to use the chart with this type of project are described in details in the online documentation.<\/a><\/p>\n Once you have followed the project wizard steps, you end up with a new project, named after your wish. Then you need to add the charting library. Open the NuGet package manager and search for “MindFusion Blazor Chart”. When you find the project, install it. Upgrade any other packages that prompt for update.<\/p>\n Open the Home.razor file and import the namespaces you are going to need:<\/p>\n Then we declare the <PieChart> blazor element, where we adjust some properties, which are exposed as attributes:<\/p>\n You can read the full list of the properties supported by the PieChart control at the members list of the class<\/a> in the online documentation. The Doughnut attribute makes the pie be rendered as a doughnut. We also hid the legend, allow rotation and specify that the doughnut is going to render all types of labels – inner and outer. The last two attributes are for specifying the start angle and the padding of the outer labels.<\/p>\n Data for every type of chart is specified with the Series property.<\/a> For a pie chart the Series accepts a single object instance of a class that implements the Series interface. For other type of charts, the Series property can be of type list.<\/p>\n The PieSeries class has a constructor that accepts three lists: one for the data, one for the inner labels and one for the outer labels. If you want to miss a certain type of labels, you can provide null instead of a list. <\/p>\n The next we are going to do for our chart is add a Title. The title is an arbitrary chunk of text and can be styled in a variety of ways using the designated properties:<\/p>\n You have TitleBrush<\/a>, TitleFontSize<\/a> and TitleFontName<\/a>, all of which customize the looks of the title. The TitleMargin<\/a> property sets the space around the title label. The same set of properties is available for the Subtitle<\/a> , if you want to add one.<\/p>\n We then specify a transparent HighlightStroke<\/a> for the chart. The HighlightStroke<\/a> is used to paint the outline of the element over which the mouse hovers. <\/p>\n We would like to paint white labels on a dark background. FOr that purpose we set the BackgroundColor<\/a> to a deep blue and we use the DataLabelsBrush<\/a> property to set the colour of the labels – both inner and outer – to white. Here is the code: <\/p>\n Last but not least comes the SeriesStyle<\/a> The SeriesStyle<\/a> property specify how the visual elements that represent the chart series are painted and outlined. There are several predefined SeriesStyle<\/a> instances, which you can check in the online documentation.<\/a> In our sample we use the PerElementSeriesStyle<\/a> class, which tells the chart that each brush\/stroke from the provided lists is for just one element to be painted with. If the count of the brushes\/strokes is less than the element, the controls cycles through them again.<\/p>\n And with that our chart is ready. Congratulations, you’ve just built a beautiful doughnut chart in .NET Blazor. Use the link below to download the full source code of the project:<\/p>\n Download Charting for .NET Blazor Sample<\/a><\/p>\n You can write at MindFusion discussion board<\/a> for technical inquiries. <\/p>\n About Charting for Blazor:<\/i> MindFusion Charting library for Blazor<\/a> is a reusable web component that allows you to create any type of chart and dashboard fast and easy. Built around a flexible and versatile API, the component allows creating standard charts as well as assembling dashboards and charts from separate components: axes, plots, labels and renderers of different series. The data is provided through Series-derived classes and you have the option to create a custom Series-based class to handle your specific type of data and label requirements. The control offers a huge variety of appearance options. Themes allow the re-use of appearance settings. In this blog post we are going to walk through the steps necessary to build the beautiful doughnut chart that you see at the image below: We are going to use MindFusion Charting library for Blazor and Visual Studio as … Continue reading I. Project Setup<\/h2>\n
![](\"https:\/\/mindfusion.dev\/samples\/blazor\/chart\/blazor_web_assembly.webp\" "\\"A")
<\/p>\n![](\"https:\/\/mindfusion.dev\/samples\/blazor\/chart\/nuget_package.webp\" "\\"Ad")
<\/p>\nII. Create the Chart<\/h2>\n
\n@using System.Collections.ObjectModel\n@using System.Reflection\n\n@using Microsoft.Maui.Graphics\n\n@using MindFusion.Drawing\n@using MindFusion.Charting\n@using MindFusion.Charting.Blazor\n<\/pre>\n
\n<PieChart @ref=\"pieChart\"\n\t\t Doughnut=\"true\"\n\t\t ShowLegend=\"false\"\n\t\t ShowDataLabels=LabelKinds.All\n\t\t AllowRotate=\"true\"\n\t\t StartAngle=10\n\t\t OuterLabelPadding=20 \/>\n\n<\/pre>\n
III. Specifying the Data<\/h2>\n
\n\nvar values = new List
IV. Styling and Appearance Properties<\/h2>\n
\n\npieChart.Title = \"Search Engine Market Share\";\npieChart.TitleBrush = new SolidBrush(Colors.White);\npieChart.TitleFontSize = 18;\npieChart.TitleFontName = \"Sans-serif\";\npieChart.TitleMargin = new Margins(0, 20, 0, 0);\n\n<\/pre>\n
\n\npieChart.Theme.HighlightStroke = new SolidBrush(Colors.Transparent);\npieChart.Theme.DataLabelsBrush = new SolidBrush(Colors.White);\npieChart.Theme.DataLabelsFontSize = 11;\npieChart.Theme.DataLabelsFontName = \"Sans-serif\";\npieChart.BackgroundColor = Color.FromRgb(20, 72, 140);\n\t\n<\/pre>\n
\n\npieChart.Plot.SeriesStyle = new PerElementSeriesStyle()\n{\n\tFills = new List
\nCharting for Blazor is a commercial product. The trial version has no time limits. Licenses are sold per developer seat. No royalties are charged. Small companies, freelancers, academic institutions and others are eligible for a discount – details here.<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"