LineChartDocumentation.razor

@attribute [Route(pageUrl)]

<PageMetaTags PageUrl="@pageUrl"
              Title="@metaTitle"
              Description="@metaDescription"
              ImageUrl="@imageUrl" />

<PageHero Heading="@pageTitle">
    <LeadSection>@pageDescription</LeadSection>
</PageHero>

<CarbonAds />

<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>

<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(LineChart_Demo_01_A_Examples)" Tabs="true" />
    <div class="my-3"></div>
    <Demo Type="typeof(LineChart_Demo_01_B_Examples)" Tabs="true" />
</Section>

<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(LineChart_Demo_02_Locale)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H4" Name="Add data dynamically for a specific dataset" PageUrl="@pageUrl" Link="add-data-dynamically-for-a-specific-dataset">
    <Demo Type="typeof(LineChart_Demo_03_Dynamically_add_data)" Tabs="true" />
</Section>

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

<Section Size="HeadingSize.H4" Name="Tick Configuration" PageUrl="@pageUrl" Link="tick-configuration">
    <Demo Type="typeof(LineChart_Demo_05_Tick_Configuration)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H4" Name="Fill between datasets" PageUrl="@pageUrl" Link="dataset-fill">
    <Demo Type="typeof(LineChart_Demo_06_Dataset_Fill)" Tabs="true" />
</Section>

<SectionHeading Size="HeadingSize.H4" Text="(Custom) Plugins" PageUrl="@pageUrl" HashTagName="plugins" />
<Demo Type="typeof(LineChart_Demo_08_Plugins)" Tabs="true" />

@code {
    private const string pageUrl = RouteConstants.Demos_LineChart_Documentation;
    private const string pageTitle = "Blazor Line Chart";
    private const string pageDescription = "A Blazor Bootstrap 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.";
    private const string metaTitle = "Blazor Line Chart Component";
    private const string metaDescription = "A Blazor Bootstrap 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.";
    private const string imageUrl = "https://i.imgur.com/8b7jH0D.png";
}