BarChartDocumentation.razor

@attribute [Route(pageUrl)]
@layout DemosMainLayout

<DemosPageHeadSection PageUrl="@pageUrl"
                      PageTitle="@pageTitle"
                      PageDescription="@pageDescription"
                      MetaTitle="@metaTitle"
                      MetaDescription="@metaDescription"
                      ImageUrl="@imageUrl" />

<DocsLink Href="@DemoRouteConstants.Docs_URL_BarChart" />

<Section Size="HeadingSize.H4" Name="Prerequisites" PageUrl="@pageUrl" Link="prerequisites" />
<div class="mb-3">
    Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
</div>

<Section Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works" />
<div class="mb-3">
    In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
</div>
<Callout Heading="TIP" Color="CalloutColor.Success">
    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.
    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.
</Callout>
<Demo Type="typeof(BarChart_Demo_01_Examples)" Tabs="true" />

<Section Size="HeadingSize.H4" Name="Horizontal bar chart" PageUrl="@pageUrl" Link="horizontal-bar-chart" />
<Demo Type="typeof(BarChart_Demo_02_Horizontal_BarChart)" Tabs="true" />

<Section Size="HeadingSize.H4" Name="Stacked bar chart" PageUrl="@pageUrl" Link="stacked-bar-chart" />
<Demo Type="typeof(BarChart_Demo_03_Stacked_BarChart)" Tabs="true" />

<Section Size="HeadingSize.H4" Name="Locale" PageUrl="@pageUrl" Link="locale" />
<div class="my-3">
    By default, the chart is using the default locale of the platform on which it is running.
    In the following example, you will see the chart in the <b>German</b> locale (<b>de_DE</b>).
</div>
<Demo Type="typeof(BarChart_Demo_04_Locale)" Tabs="true" />

<Section Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" Link="data-labels" />
<Demo Type="typeof(BarChart_Demo_05_Stacked_BarChart_with_Datalabels)" Tabs="true" />

<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event" />
<Demo Type="typeof(BarChart_Demo_06_Click_Event)" Tabs="true" />

<ChartJSCallout />

@code {
    private const string pageUrl = DemoRouteConstants.Demos_URL_BarChart;
    private const string pageTitle = "Blazor Bar Chart";
    private const string pageDescription = "A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
    private const string metaTitle = "Blazor Bar Chart Component";
    private const string metaDescription = "A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
    private const string imageUrl = "https://i.imgur.com/IX3bajc.png";
}