Skip to content

Commit 2867894

Browse files
gvreddy04gvreddy04
committed
Pie chart demos update
1 parent f48734d commit 2867894

2 files changed

Lines changed: 66 additions & 29 deletions

File tree

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChartDocumentation.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</SubTitleTemplate>
1010
</PageHero>
1111

12-
<DocsLink Href="@RouteConstants.Docs_DoughnutChart" />
12+
<DocsLink Href="@RouteConstants.Docs_LineChart" />
1313

1414
<Prerequisites PageUrl="@pageUrl" />
1515

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChartDocumentation.razor‎

Lines changed: 65 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,74 @@
11
@attribute [Route(pageUrl)]
22
@layout DemosMainLayout
33

4-
<PageHeroSection PageUrl="@pageUrl"
5-
Title="@title"
6-
Heading="@heading"
7-
Description="@description"
8-
ImageUrl="@imageUrl" />
4+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
5+
6+
<PageHero Title="@pageTitle">
7+
<SubTitleTemplate>
8+
@((MarkupString)pageDescription)
9+
</SubTitleTemplate>
10+
</PageHero>
11+
12+
<DocsLink Href="@RouteConstants.Docs_LineChart" />
913

1014
<Prerequisites PageUrl="@pageUrl" />
1115

12-
<Section Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
13-
<div class="mb-3">
14-
In the following example, a categorical 12-color palette is used.
15-
</div>
16-
<BlazorBootstrap.Callout Heading="TIP" Color="CalloutColor.Success">
17-
For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
18-
These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
19-
</BlazorBootstrap.Callout>
20-
<Demo Type="typeof(PieChart_Demo_01_Examples)" Tabs="true" />
21-
22-
<Section Size="HeadingSize.H4" Text="Data labels" PageUrl="@pageUrl" HashTagName="data-labels" />
23-
<Demo Type="typeof(PieChart_Demo_02_Datalabels)" Tabs="true" />
24-
25-
<Section Size="HeadingSize.H4" Text="Change legend position" PageUrl="@pageUrl" HashTagName="change-legend-position" />
26-
<div class="mb-3">
27-
This sample demonstrates how to change the position of the chart legend.
28-
</div>
29-
<Demo Type="typeof(PieChart_Demo_03_Change_Legend_Position)" Tabs="true" />
16+
<Section Class="p-0" Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
17+
<Block>
18+
The <strong>Pie Chart</strong> component visualizes categorical data as proportional slices of a circle, making it ideal for showing parts of a whole.
19+
<br /><br />
20+
<strong>How to use:</strong>
21+
<ul>
22+
<li>Add the <code>PieChart</code> component to your page and set its dimensions (e.g., <code>Width="600"</code>).</li>
23+
<li>Prepare your chart data by specifying <code>Labels</code> for each category and one or more <code>Datasets</code> with values and background colors.</li>
24+
<li>Configure chart options such as <code>Responsive</code> and <code>Title</code> using the <code>PieChartOptions</code> object.</li>
25+
<li>Initialize the chart in <code>OnAfterRenderAsync</code> by calling <code>pieChart.InitializeAsync(chartData, pieChartOptions)</code>.</li>
26+
<li>Use the demo's interactive buttons to randomize data, add datasets, or add new data points dynamically.</li>
27+
<li>Refer to the demo code below for practical examples of data preparation, dynamic updates, and chart customization.</li>
28+
</ul>
29+
This demo demonstrates how to set up a pie chart, bind your data, and interactively update the chart to fit your application's needs.
30+
</Block>
31+
<Demo Type="typeof(PieChart_Demo_01_Examples)" Tabs="true" />
32+
</Section>
33+
34+
<Section Class="p-0" Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" Link="data-labels">
35+
<Block>
36+
The <strong>Pie Chart</strong> component supports data labels, allowing you to display values or category names directly on each slice of the chart.
37+
<br /><br />
38+
<strong>How to use:</strong>
39+
<ul>
40+
<li>Enable data labels by passing the <code>ChartDataLabels</code> plugin when initializing the chart: <code>plugins: new[] { "ChartDataLabels" }</code>.</li>
41+
<li>Customize the position of data labels for each dataset using the <code>Datalabels.Anchor</code> property (e.g., <code>Anchor.End</code> or <code>Anchor.Center</code>).</li>
42+
<li>Prepare your chart data and datasets as usual, and bind them to the <code>PieChart</code> component.</li>
43+
<li>Use the provided buttons to randomize data or add new data points dynamically, and observe how data labels update automatically.</li>
44+
<li>Refer to the demo code below for practical examples of enabling and customizing data labels in your pie charts.</li>
45+
</ul>
46+
Data labels make it easier for users to interpret the chart by showing relevant information directly on each pie slice.
47+
</Block>
48+
<Demo Type="typeof(PieChart_Demo_02_Datalabels)" Tabs="true" />
49+
</Section>
50+
51+
<Section Class="p-0" Size="HeadingSize.H4" Name="Change legend position" PageUrl="@pageUrl" Link="change-legend-position">
52+
<Block>
53+
The <strong>Pie Chart</strong> component allows you to easily change the position of the chart legend to improve readability or match your application's layout.
54+
<br /><br />
55+
<strong>How to use:</strong>
56+
<ul>
57+
<li>Set the legend position using <code>pieChartOptions.Plugins.Legend.Position</code> (e.g., <code>"top"</code>, <code>"right"</code>, <code>"bottom"</code>, or <code>"left"</code>).</li>
58+
<li>Update the legend position dynamically by changing this property and calling <code>pieChart.UpdateAsync(chartData, pieChartOptions)</code>.</li>
59+
<li>Use the demo's buttons to switch the legend position interactively and see the effect in real time.</li>
60+
<li>Refer to the demo code below for practical examples of configuring and updating the legend position in your pie charts.</li>
61+
</ul>
62+
Adjusting the legend position helps ensure your chart is clear and fits well within your application's design.
63+
</Block>
64+
<Demo Type="typeof(PieChart_Demo_03_Change_Legend_Position)" Tabs="true" />
65+
</Section>
3066

3167
@code {
32-
private const string pageUrl = "/charts/pie-chart";
33-
private const string title = "Blazor Pie Chart";
34-
private const string heading = "Blazor Pie Chart";
35-
private const string description = "A Blazor pie chart component is a circular chart that shows the proportional values of different categories.";
36-
private const string imageUrl = "https://i.imgur.com/ieBupT2.png";
68+
private const string pageUrl = RouteConstants.Demos_PieChart;
69+
private const string pageTitle = "Pie Chart";
70+
private const string pageDescription = "Explore interactive Blazor Pie Chart examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications using the Pie Chart component. Try live demos and discover practical usage scenarios.";
71+
private const string metaTitle = "Blazor Pie Chart Examples & Interactive Demos";
72+
private const string metaDescription = "Explore interactive Blazor Pie Chart examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications using the Pie Chart component. Try live demos and discover practical usage scenarios.";
73+
private const string imageUrl = "https://i.imgur.com/8b7jH0D.png"; // TODO: Update with the actual image URL for the Line Chart demo
3774
}

0 commit comments

Comments
 (0)