|
13 | 13 |
|
14 | 14 | <Prerequisites PageUrl="@pageUrl" /> |
15 | 15 |
|
16 | | -<Section Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works"> |
| 16 | +<Section Class="p-0" Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works"> |
17 | 17 | <Block> |
18 | 18 | 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. |
19 | 19 | <br /><br /> |
|
35 | 35 | <Demo Type="typeof(LineChart_Demo_01_B_Examples)" Tabs="true" /> |
36 | 36 | </Section> |
37 | 37 |
|
38 | | -<Section Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" Link="data-labels"> |
| 38 | +<Section Class="p-0" Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" Link="data-labels"> |
39 | 39 | <Block> |
40 | 40 | The <strong>Line Chart</strong> component supports data labels, allowing you to display values directly on each data point in the chart. |
41 | 41 | <br /><br /> |
|
51 | 51 | <Demo Type="typeof(LineChart_Demo_02_Datalabels)" Tabs="true" /> |
52 | 52 | </Section> |
53 | 53 |
|
54 | | -<Section Size="HeadingSize.H4" Name="Tick Configuration" PageUrl="@pageUrl" Link="tick-configuration"> |
| 54 | +<Section Class="p-0" Size="HeadingSize.H4" Name="Tick Configuration" PageUrl="@pageUrl" Link="tick-configuration"> |
55 | 55 | <Block> |
56 | 56 | The <strong>Tick Configuration</strong> demo shows how to customize the appearance and behavior of axis ticks in the Line Chart component. |
57 | 57 | <br /><br /> |
|
67 | 67 | <Demo Type="typeof(LineChart_Demo_03_Tick_Configuration)" Tabs="true" /> |
68 | 68 | </Section> |
69 | 69 |
|
70 | | -<Section Size="HeadingSize.H4" Name="Locale" PageUrl="@pageUrl" Link="locale"> |
| 70 | +<Section Class="p-0" Size="HeadingSize.H4" Name="Locale" PageUrl="@pageUrl" Link="locale"> |
71 | 71 | <Block> |
72 | 72 | The <strong>Locale</strong> demo illustrates how to localize number and date formatting in the Line Chart component to match your users' regional preferences. |
73 | 73 | <br /><br /> |
|
85 | 85 |
|
86 | 86 | @code { |
87 | 87 | private const string pageUrl = RouteConstants.Demos_LineChart; |
88 | | - private const string pageTitle = "Blazor Line Chart"; |
89 | | - private const string pageDescription = "A Blazor line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value."; |
90 | | - private const string metaTitle = "Blazor Line Chart"; |
91 | | - private const string metaDescription = "A Blazor line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value."; |
92 | | - private const string imageUrl = "https://i.imgur.com/8b7jH0D.png"; |
| 88 | + private const string pageTitle = "Line Chart"; |
| 89 | + private const string pageDescription = "Explore interactive Blazor line chart examples and comprehensive documentation. Learn how to visualize time-series data, customize chart appearance, and implement advanced features using the <code>Blazor Line Chart</code> component."; |
| 90 | + private const string metaTitle = "Blazor Line Chart Demo & Examples"; |
| 91 | + private const string metaDescription = "Explore interactive Blazor line chart examples and comprehensive documentation. Learn how to visualize time-series data, customize chart appearance, and implement advanced features using the Blazor Line Chart component."; |
| 92 | + private const string imageUrl = "https://i.imgur.com/8b7jH0D.png"; // TODO: Update with the actual image URL for the Line Chart demo |
93 | 93 | } |
0 commit comments