Skip to content

Commit d211542

Browse files
gvreddy04gvreddy04
committed
BarChart demos updated.
1 parent 437101c commit d211542

7 files changed

Lines changed: 61 additions & 14 deletions

File tree

‎BlazorExpress.ChartJS.Demo.RCL/BlazorExpress.ChartJS.Demo.RCL.csproj‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,9 @@
2323
<Target Name="EmbedDemos" BeforeTargets="PrepareForBuild">
2424
<!-- Embed demo source code into the assembly to display the source code at runtime. -->
2525
<ItemGroup>
26-
<EmbeddedResource Include="Components\**\*Demo*.razor" />
27-
<EmbeddedResource Include="Components\**\*Snippet*" />
26+
<EmbeddedResource Include="Pages\**\*Demo*.razor" />
27+
<EmbeddedResource Include="Pages\**\*Doc*.razor" />
28+
<EmbeddedResource Include="Pages\**\*Snippet*" />
2829
</ItemGroup>
2930
</Target>
3031

‎BlazorExpress.ChartJS.Demo.RCL/Layout/DemosMainLayout.razor.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ private HashSet<LinkGroup> GetLinkGroups()
3636
groups.Add(new LinkGroup
3737
{
3838
Name = "Charts",
39-
CssClass = "is-size-7 has-text-weight-bold has-text-warning",
39+
CssClass = "is-size-7 has-text-weight-bold has-text-danger",
4040
Links = [
4141
new Link { Href = RouteConstants.Demos_BarChart, Text = "Bar chart" },
4242
new Link { Href = RouteConstants.Demos_DoughnutChart, Text = "Doughnut chart" },

‎BlazorExpress.ChartJS.Demo.RCL/Layout/DocsMainLayout.razor.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ private HashSet<LinkGroup> GetLinkGroups()
4646
groups.Add(new LinkGroup
4747
{
4848
Name = "Charts",
49-
CssClass = "is-size-7 has-text-weight-bold has-text-warning",
49+
CssClass = "is-size-7 has-text-weight-bold has-text-danger",
5050
Links = [
5151
new Link { Href = RouteConstants.Docs_BarChart, Text = "Bar chart" },
5252
new Link { Href = RouteConstants.Docs_DoughnutChart, Text = "Doughnut chart" },

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor‎

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,19 +28,64 @@
2828
</Section>
2929

3030
<Section Class="p-0" Size="HeadingSize.H4" Name="Horizontal bar chart" PageUrl="@pageUrl" Link="horizontal-bar-chart">
31-
<Demo Type="typeof(BarChart_Demo_02_Horizontal_BarChart)" />
31+
<Block>
32+
The <strong>Horizontal Bar Chart</strong> displays data values as horizontal bars, making it ideal for comparing categories with long labels or when you want to emphasize comparison between values.
33+
<br /><br />
34+
<strong>How to use:</strong>
35+
<ul>
36+
<li>Use the <code>BarChart</code> component and set the <code>IndexAxis</code> option to <code>'y'</code> to render bars horizontally.</li>
37+
<li>Provide your data and labels as you would for a standard bar chart.</li>
38+
<li>Customize colors and appearance using the available palette utilities or your own color set.</li>
39+
</ul>
40+
Refer to the demo code below for a working example and configuration options.
41+
</Block>
42+
<Demo Type="typeof(BarChart_Demo_02_Horizontal_BarChart)" Tabs="true" />
3243
</Section>
3344

3445
<Section Class="p-0" Size="HeadingSize.H4" Name="Stacked bar chart" PageUrl="@pageUrl" Link="stacked-bar-chart">
35-
<Demo Type="typeof(BarChart_Demo_03_Stacked_BarChart)" />
46+
<Block>
47+
The <strong>Stacked Bar Chart</strong> allows you to display multiple data series stacked on top of each other, making it easy to compare the total and individual contributions of each series for every category.
48+
<br /><br />
49+
<strong>How to use:</strong>
50+
<ul>
51+
<li>Use the <code>BarChart</code> component and configure the <code>Options.Scales.X.Stacked</code> and <code>Options.Scales.Y.Stacked</code> properties to <code>true</code> to enable stacking.</li>
52+
<li>Provide multiple datasets in your chart data, each representing a different series to be stacked.</li>
53+
<li>Customize colors for each dataset using palette utilities or your own color set for better distinction.</li>
54+
<li>Refer to the demo code below for a working example and further configuration options.</li>
55+
</ul>
56+
</Block>
57+
<Demo Type="typeof(BarChart_Demo_03_Stacked_BarChart)" Tabs="true" />
3658
</Section>
3759

3860
<Section Class="p-0" Size="HeadingSize.H4" Name="Stacked bar chart with data labels" PageUrl="@pageUrl" Link="stacked-bar-chart-with-data-labels">
39-
<Demo Type="typeof(BarChart_Demo_04_Stacked_BarChart_with_Datalabels)" />
61+
<Block>
62+
The <strong>Stacked Bar Chart with Data Labels</strong> enhances the standard stacked bar chart by displaying value labels directly on each bar segment. This makes it easier to read and compare the values of each dataset within a category.
63+
<br /><br />
64+
<strong>How to use:</strong>
65+
<ul>
66+
<li>Use the <code>BarChart</code> component and enable stacking by setting <code>Options.Scales.X.Stacked</code> and <code>Options.Scales.Y.Stacked</code> to <code>true</code>.</li>
67+
<li>Add multiple datasets to your chart data to represent different series.</li>
68+
<li>Enable data labels by configuring the chart's plugins, such as <code>Options.Plugins.Datalabels.Display = true</code>.</li>
69+
<li>Customize the appearance and formatting of data labels as needed for your scenario.</li>
70+
</ul>
71+
Refer to the demo code below for a working example and further configuration options.
72+
</Block>
73+
<Demo Type="typeof(BarChart_Demo_04_Stacked_BarChart_with_Datalabels)" Tabs="true" />
4074
</Section>
4175

4276
<Section Class="p-0" Size="HeadingSize.H4" Name="Locale" PageUrl="@pageUrl" Link="locale">
43-
<Demo Type="typeof(BarChart_Demo_05_Locale)" />
77+
<Block>
78+
The <strong>Locale</strong> demo shows how to localize number and date formatting in your bar chart.
79+
<br /><br />
80+
<strong>How to use:</strong>
81+
<ul>
82+
<li>Set the <code>Locale</code> property on the <code>BarChart</code> component to your desired culture code (e.g., <code>"fr-FR"</code> for French).</li>
83+
<li>Number and date labels in the chart will automatically format according to the specified locale.</li>
84+
<li>This is useful for displaying charts to users in different regions with appropriate formatting.</li>
85+
</ul>
86+
Refer to the demo code below for a working example and configuration options.
87+
</Block>
88+
<Demo Type="typeof(BarChart_Demo_05_Locale)" Tabs="true" />
4489
</Section>
4590

4691
@code {

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_01_Examples.razor‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<BarChart @ref="barChart" Width="600" />
22

33
<div class="mt-5">
4-
<Button Color="ButtonColor.Primary" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
5-
<Button Color="ButtonColor.Link" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
6-
<Button Color="ButtonColor.Info" @onclick="async () => await AddDataAsync()">Add Data</Button>
7-
<Button Color="ButtonColor.Success" @onclick="async () => await ShowHorizontalBarChartAsync()">Horizontal Bar Chart</Button>
8-
<Button Color="ButtonColor.Warning" @onclick="async () => await ShowVerticalBarChartAsync()">Vertical Bar Chart</Button>
4+
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
5+
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="AddDatasetAsync"> Add Dataset </Button>
6+
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="AddDataAsync">Add Data</Button>
7+
<Button Color="ButtonColor.Success" Size="ButtonSize.Small" @onclick="ShowHorizontalBarChartAsync">Horizontal Bar Chart</Button>
8+
<Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="ShowVerticalBarChartAsync">Vertical Bar Chart</Button>
99
</div>
1010

1111
@code {

‎BlazorExpress.ChartJS.Demo.RCL/Shared/Demo.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
<code class="@LanguageCode.ToLanguageCssClass()">
4545
@if (codeSnippet is not null)
4646
{
47-
<text>@codeSnippet</text>
47+
<text>@codeSnippet</text>
4848
}
4949
</code>
5050
</pre>

‎BlazorExpress.ChartJS.Demo.RCL/wwwroot/js/blazorexpress.chartjs.demo.rcl.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ async function copyToClipboard(text, dotNetHelper) {
1717

1818
function highlightCode() {
1919
if (Prism) {
20+
Prism.plugins.customClass.prefix('prism-');
2021
Prism.highlightAll();
2122
}
2223
};

0 commit comments

Comments
 (0)