Skip to content

Commit 6d8e761

Browse files
gvreddy04gvreddy04
committed
Refactor chart documentation for improved clarity
Updated various chart components' documentation to replace unordered lists with ordered lists in the "How to use" sections. Reformatted "Locale" sections for Bar Chart and Line Chart to enhance readability. Added ordered lists to "How it works" sections for Radar Chart and Scatter Chart. Improved visual separation with additional spacing throughout the documentation. NOTE: This commit message is auto-generated using GitHub Copilot.
1 parent c445560 commit 6d8e761

8 files changed

Lines changed: 153 additions & 117 deletions

File tree

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

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,14 @@
1919
The <strong>Bar Chart</strong> component visualizes data as vertical bars, making it easy to compare values across categories or track changes over time.
2020
<br /><br />
2121
<strong>How to use:</strong>
22-
<ul>
23-
<li>Add the <code>BarChart</code> component to your page.</li>
24-
<li>Provide <code>Labels</code> for the X-axis categories and one or more <code>Datasets</code> for the Y-axis values.</li>
25-
<li>Customize appearance and behavior using the <code>Options</code> property (e.g., colors, tooltips, axis settings).</li>
26-
<li>Refer to the demo code for examples of basic and advanced usage, including multiple datasets and custom styling.</li>
27-
</ul>
22+
<div class="content">
23+
<ol>
24+
<li>Add the <code>BarChart</code> component to your page.</li>
25+
<li>Provide <code>Labels</code> for the X-axis categories and one or more <code>Datasets</code> for the Y-axis values.</li>
26+
<li>Customize appearance and behavior using the <code>Options</code> property (e.g., colors, tooltips, axis settings).</li>
27+
<li>Refer to the demo code for examples of basic and advanced usage, including multiple datasets and custom styling.</li>
28+
</ol>
29+
</div>
2830
This demo showcases the essential setup for a bar chart and demonstrates how to bind your data for quick visualization.
2931
</Block>
3032
<Demo Type="typeof(BarChart_Demo_01_Examples)" Tabs="true" />
@@ -35,11 +37,13 @@
3537
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.
3638
<br /><br />
3739
<strong>How to use:</strong>
38-
<ul>
39-
<li>Use the <code>BarChart</code> component and set the <code>IndexAxis</code> option to <code>'y'</code> to render bars horizontally.</li>
40-
<li>Provide your data and labels as you would for a standard bar chart.</li>
41-
<li>Customize colors and appearance using the available palette utilities or your own color set.</li>
42-
</ul>
40+
<div class="content">
41+
<ol>
42+
<li>Use the <code>BarChart</code> component and set the <code>IndexAxis</code> option to <code>'y'</code> to render bars horizontally.</li>
43+
<li>Provide your data and labels as you would for a standard bar chart.</li>
44+
<li>Customize colors and appearance using the available palette utilities or your own color set.</li>
45+
</ol>
46+
</div>
4347
Refer to the demo code below for a working example and configuration options.
4448
</Block>
4549
<Demo Type="typeof(BarChart_Demo_02_Horizontal_BarChart)" Tabs="true" />
@@ -50,12 +54,14 @@
5054
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.
5155
<br /><br />
5256
<strong>How to use:</strong>
53-
<ul>
54-
<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>
55-
<li>Provide multiple datasets in your chart data, each representing a different series to be stacked.</li>
56-
<li>Customize colors for each dataset using palette utilities or your own color set for better distinction.</li>
57-
<li>Refer to the demo code below for a working example and further configuration options.</li>
58-
</ul>
57+
<div class="content">
58+
<ol>
59+
<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>
60+
<li>Provide multiple datasets in your chart data, each representing a different series to be stacked.</li>
61+
<li>Customize colors for each dataset using palette utilities or your own color set for better distinction.</li>
62+
<li>Refer to the demo code below for a working example and further configuration options.</li>
63+
</ol>
64+
</div>
5965
</Block>
6066
<Demo Type="typeof(BarChart_Demo_03_Stacked_BarChart)" Tabs="true" />
6167
</Section>
@@ -78,14 +84,16 @@
7884

7985
<Section Class="p-0" Size="HeadingSize.H4" Name="Locale" PageUrl="@pageUrl" Link="locale">
8086
<Block>
81-
The <strong>Locale</strong> demo shows how to localize number and date formatting in your bar chart.
87+
The <strong>Locale</strong> demo shows how to localize number and date formatting in your bar chart.
8288
<br /><br />
8389
<strong>How to use:</strong>
84-
<ul>
85-
<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>
86-
<li>Number and date labels in the chart will automatically format according to the specified locale.</li>
87-
<li>This is useful for displaying charts to users in different regions with appropriate formatting.</li>
88-
</ul>
90+
<div class="content">
91+
<ol>
92+
<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>
93+
<li>Number and date labels in the chart will automatically format according to the specified locale.</li>
94+
<li>This is useful for displaying charts to users in different regions with appropriate formatting.</li>
95+
</ol>
96+
</div>
8997
Refer to the demo code below for a working example and configuration options.
9098
</Block>
9199
<Demo Type="typeof(BarChart_Demo_05_Locale)" Tabs="true" />

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BubbleChart/BubbleChartDocumentation.razor‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,19 @@
1616
<Section Class="p-0" Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
1717
<Block>
1818
The <strong>Bubble Chart</strong> component visualizes three dimensions of data by displaying each data point as a bubble, where the X and Y coordinates determine the position and the bubble size represents a third value. This makes it ideal for comparing and analyzing relationships between multiple variables.
19-
20-
<br /><br />
19+
<br />
20+
<br />
2121
<strong>How to use:</strong>
22-
<ul>
23-
<li>Add the <code>BubbleChart</code> component to your page and set its desired <code>Width</code> (e.g., <code>Width="600"</code>).</li>
24-
<li>Prepare your <code>ChartData</code> with <code>Labels</code> for the X-axis and one or more <code>BubbleChartDataset</code> objects, each containing a list of <code>BubbleChartDataPoint</code> (with <code>X</code>, <code>Y</code>, and <code>R</code> values).</li>
25-
<li>Configure chart appearance and behavior using <code>BubbleChartOptions</code> (e.g., responsiveness, tooltips, axis settings).</li>
26-
<li>Initialize the chart by calling <code>InitializeAsync</code> with your data and options.</li>
27-
<li>Use built-in methods such as <code>AddDatasetAsync</code>, <code>AddDataAsync</code>, and <code>UpdateAsync</code> to dynamically update the chart as shown in the demo.</li>
28-
<li>Refer to the demo code below for practical examples, including adding datasets, randomizing data, and customizing chart styles.</li>
29-
</ul>
22+
<div class="content">
23+
<ol>
24+
<li>Add the <code>BubbleChart</code> component to your page and set its desired <code>Width</code> (e.g., <code>Width="600"</code>).</li>
25+
<li>Prepare your <code>ChartData</code> with <code>Labels</code> for the X-axis and one or more <code>BubbleChartDataset</code> objects, each containing a list of <code>BubbleChartDataPoint</code> (with <code>X</code>, <code>Y</code>, and <code>R</code> values).</li>
26+
<li>Configure chart appearance and behavior using <code>BubbleChartOptions</code> (e.g., responsiveness, tooltips, axis settings).</li>
27+
<li>Initialize the chart by calling <code>InitializeAsync</code> with your data and options.</li>
28+
<li>Use built-in methods such as <code>AddDatasetAsync</code>, <code>AddDataAsync</code>, and <code>UpdateAsync</code> to dynamically update the chart as shown in the demo.</li>
29+
<li>Refer to the demo code below for practical examples, including adding datasets, randomizing data, and customizing chart styles.</li>
30+
</ol>
31+
</div>
3032
This demo provides a hands-on example of setting up a Bubble Chart in Blazor, demonstrating how to bind and update your data for interactive visualizations.
3133
</Block>
3234
<Demo Type="typeof(BubbleChart_Demo_01_Examples)" Tabs="true" />

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/DoughnutChart/DoughnutChartDocumentation.razor‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,18 @@
1515

1616
<Section Class="p-0" Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
1717
<Block>
18-
The <strong>Doughnut Chart</strong> component provides a simple way to visualize categorical data as proportional segments of a circle.
18+
The <strong>Doughnut Chart</strong> component provides a simple way to visualize categorical data as proportional segments of a circle.
1919
<br /><br />
2020
<strong>How to use:</strong>
21-
<ul>
22-
<li>Add the <code>DoughnutChart</code> component to your page.</li>
23-
<li>Define your data and labels using the chart's data model.</li>
24-
<li>Customize appearance and behavior using the <code>Options</code> property (e.g., colors, legend, tooltips).</li>
25-
<li>Bind your data and options to the component.</li>
26-
<li>Refer to the demo code below for a working example and further customization options.</li>
27-
</ul>
21+
<div class="content">
22+
<ol>
23+
<li>Add the <code>DoughnutChart</code> component to your page.</li>
24+
<li>Define your data and labels using the chart's data model.</li>
25+
<li>Customize appearance and behavior using the <code>Options</code> property (e.g., colors, legend, tooltips).</li>
26+
<li>Bind your data and options to the component.</li>
27+
<li>Refer to the demo code below for a working example and further customization options.</li>
28+
</ol>
29+
</div>
2830
This demo shows how to configure a basic doughnut chart, assign data, and adjust chart options for your scenario.
2931
</Block>
3032
<Demo Type="typeof(DoughnutChart_Demo_01_Examples)" Tabs="true" />
@@ -35,12 +37,14 @@
3537
The <strong>Doughnut Chart</strong> component supports data labels, allowing you to display values or category names directly on each segment of the chart.
3638
<br /><br />
3739
<strong>How to use:</strong>
38-
<ul>
39-
<li>Enable data labels by configuring the chart's plugin options, such as <code>Options.Plugins.Datalabels.Display = true</code>.</li>
40-
<li>You can customize the label content, formatting, and position using the available plugin settings.</li>
41-
<li>Assign your data and labels as usual to the chart's data model.</li>
42-
<li>Refer to the demo code below for a working example and further configuration options.</li>
43-
</ul>
40+
<div class="content">
41+
<ol>
42+
<li>Enable data labels by configuring the chart's plugin options, such as <code>Options.Plugins.Datalabels.Display = true</code>.</li>
43+
<li>You can customize the label content, formatting, and position using the available plugin settings.</li>
44+
<li>Assign your data and labels as usual to the chart's data model.</li>
45+
<li>Refer to the demo code below for a working example and further configuration options.</li>
46+
</ol>
47+
</div>
4448
Data labels make it easier for users to interpret the chart by showing relevant information directly on each doughnut segment.
4549
</Block>
4650
<Demo Type="typeof(DoughnutChart_Demo_02_Datalabels)" Tabs="true" />

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

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,14 @@
1818
The <strong>Line Chart</strong> component visualizes data trends using connected data points, making it ideal for tracking changes over time or comparing multiple series.
1919
<br /><br />
2020
<strong>How to use:</strong>
21-
<ul>
22-
<li>Define your chart data by specifying <code>Labels</code> for the X-axis and one or more <code>Datasets</code> for the Y-axis values.</li>
23-
<li>Customize the chart appearance and behavior using the <code>Options</code> property (e.g., colors, line styles, tooltips, axis settings).</li>
24-
<li>Add the <code>LineChart</code> component to your page and bind your data and options.</li>
25-
<li>Refer to the demo code below for examples of basic usage, advanced customization, and dynamic updates.</li>
26-
</ul>
21+
<div class="content">
22+
<ol>
23+
<li>Define your chart data by specifying <code>Labels</code> for the X-axis and one or more <code>Datasets</code> for the Y-axis values.</li>
24+
<li>Customize the chart appearance and behavior using the <code>Options</code> property (e.g., colors, line styles, tooltips, axis settings).</li>
25+
<li>Add the <code>LineChart</code> component to your page and bind your data and options.</li>
26+
<li>Refer to the demo code below for examples of basic usage, advanced customization, and dynamic updates.</li>
27+
</ol>
28+
</div>
2729
These demos demonstrate how to set up a line chart, configure its appearance, and update the data or options to fit your application's needs.
2830
</Block>
2931
<Demo Type="typeof(LineChart_Demo_01_A_Examples)" Tabs="true" />
@@ -40,12 +42,14 @@
4042
The <strong>Line Chart</strong> component supports data labels, allowing you to display values directly on each data point in the chart.
4143
<br /><br />
4244
<strong>How to use:</strong>
43-
<ul>
44-
<li>Enable data labels by setting <code>Options.Plugins.Datalabels.Display = true</code> in your chart options.</li>
45-
<li>Customize the label content, formatting, and position using the available plugin settings.</li>
46-
<li>Bind your data and labels to the chart as usual.</li>
47-
<li>Refer to the demo code below for a working example and further configuration options.</li>
48-
</ul>
45+
<div class="content">
46+
<ol>
47+
<li>Enable data labels by setting <code>Options.Plugins.Datalabels.Display = true</code> in your chart options.</li>
48+
<li>Customize the label content, formatting, and position using the available plugin settings.</li>
49+
<li>Bind your data and labels to the chart as usual.</li>
50+
<li>Refer to the demo code below for a working example and further configuration options.</li>
51+
</ol>
52+
</div>
4953
Data labels make it easier for users to interpret the chart by showing the exact value of each point directly on the line.
5054
</Block>
5155
<Demo Type="typeof(LineChart_Demo_02_Datalabels)" Tabs="true" />
@@ -56,12 +60,14 @@
5660
The <strong>Tick Configuration</strong> demo shows how to customize the appearance and behavior of axis ticks in the Line Chart component.
5761
<br /><br />
5862
<strong>How to use:</strong>
59-
<ul>
60-
<li>Use the <code>Options.Scales.X.Ticks</code> and <code>Options.Scales.Y.Ticks</code> properties to control tick display, such as step size, min/max values, and formatting.</li>
61-
<li>You can format tick labels, hide or show specific ticks, and adjust their appearance to improve chart readability.</li>
62-
<li>Apply custom logic for tick callbacks to display values in a specific format (e.g., currency, percentage).</li>
63-
<li>Refer to the demo code below for practical examples of configuring axis ticks for your data visualization needs.</li>
64-
</ul>
63+
<div class="content">
64+
<ol>
65+
<li>Use the <code>Options.Scales.X.Ticks</code> and <code>Options.Scales.Y.Ticks</code> properties to control tick display, such as step size, min/max values, and formatting.</li>
66+
<li>You can format tick labels, hide or show specific ticks, and adjust their appearance to improve chart readability.</li>
67+
<li>Apply custom logic for tick callbacks to display values in a specific format (e.g., currency, percentage).</li>
68+
<li>Refer to the demo code below for practical examples of configuring axis ticks for your data visualization needs.</li>
69+
</ol>
70+
</div>
6571
Customizing tick configuration helps ensure your chart is clear and tailored to your application's requirements.
6672
</Block>
6773
<Demo Type="typeof(LineChart_Demo_03_Tick_Configuration)" Tabs="true" />
@@ -72,12 +78,14 @@
7278
The <strong>Locale</strong> demo illustrates how to localize number and date formatting in the Line Chart component to match your users' regional preferences.
7379
<br /><br />
7480
<strong>How to use:</strong>
75-
<ul>
76-
<li>Set the <code>Locale</code> property on the <code>LineChart</code> component to your desired culture code (e.g., <code>"de-DE"</code> for German).</li>
77-
<li>All number and date labels in the chart will automatically format according to the specified locale, ensuring correct separators, symbols, and date formats.</li>
78-
<li>This is especially useful for applications targeting users in different regions, providing a familiar and accessible data presentation.</li>
79-
<li>Refer to the demo code below for a working example and additional configuration options.</li>
80-
</ul>
81+
<div class="content">
82+
<ol>
83+
<li>Set the <code>Locale</code> property on the <code>LineChart</code> component to your desired culture code (e.g., <code>"de-DE"</code> for German).</li>
84+
<li>All number and date labels in the chart will automatically format according to the specified locale, ensuring correct separators, symbols, and date formats.</li>
85+
<li>This is especially useful for applications targeting users in different regions, providing a familiar and accessible data presentation.</li>
86+
<li>Refer to the demo code below for a working example and additional configuration options.</li>
87+
</ol>
88+
</div>
8189
Adapting the chart's locale improves usability and ensures your data is presented in a way that aligns with your audience's expectations.
8290
</Block>
8391
<Demo Type="typeof(LineChart_Demo_04_Locale)" Tabs="true" />

0 commit comments

Comments
 (0)