LineChartDocumentation.razor

@attribute [Route(pageUrl)]
@layout DemosMainLayout

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

<PageHero Title="@pageTitle">
    <SubTitleTemplate>
        @((MarkupString)pageDescription)
    </SubTitleTemplate>
</PageHero>

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

<Prerequisites PageUrl="@pageUrl" />

<Section Class="p-0" Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
    <Block>
        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.
        <br /><br />
        <strong>How to use:</strong>
        <div class="content">
            <ol>
                <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>
                <li>Customize the chart appearance and behavior using the <code>Options</code> property (e.g., colors, line styles, tooltips, axis settings).</li>
                <li>Add the <code>LineChart</code> component to your page and bind your data and options.</li>
                <li>Refer to the demo code below for examples of basic usage, advanced customization, and dynamic updates.</li>
            </ol>
        </div>
        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.
    </Block>
    <Demo Type="typeof(LineChart_Demo_01_A_Examples)" Tabs="true" />
    <Block>
        <p>
            You can further enhance your charts by updating datasets, changing styles, or handling chart events. Review the demo code for practical scenarios and copy the relevant parts into your own project to get started quickly.
        </p>
    </Block>
    <Demo Type="typeof(LineChart_Demo_01_B_Examples)" Tabs="true" />
</Section>

<Section Class="p-0" Size="HeadingSize.H4" Name="Combo bar/line" PageUrl="@pageUrl" Link="combo-bar-line">
    <Block>
        The <strong>Combo bar/line</strong> demo mixes <code>LineChartDataset</code> and <code>BarChartDataset</code> in the same <code>LineChart</code>.
        <br /><br />
        <strong>How to use:</strong>
        <div class="content">
            <ol>
                <li>Use the <code>LineChart</code> component as the root chart.</li>
                <li>Add both <code>LineChartDataset</code> and <code>BarChartDataset</code> instances to the same <code>ChartData.Datasets</code> collection.</li>
                <li>Configure interaction options such as <code>Mode = InteractionMode.Index</code> and <code>Intersect = false</code> so bar and line points share tooltips cleanly.</li>
                <li>Refer to the demo code below for a working example with a line series and bar columns in the same chart area.</li>
            </ol>
        </div>
    </Block>
    <Demo Type="typeof(LineChart_Demo_06_Combo_Bar_Line)" Tabs="true" />
</Section>

<Section Class="p-0" Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" Link="data-labels">
    <Block>
        The <strong>Line Chart</strong> component supports data labels, allowing you to display values directly on each data point in the chart.
        <br /><br />
        <strong>How to use:</strong>
        <div class="content">
            <ol>
                <li>Enable data labels by setting <code>Options.Plugins.Datalabels.Display = true</code> in your chart options.</li>
                <li>Customize the label content, formatting, and position using the available plugin settings.</li>
                <li>Bind your data and labels to the chart as usual.</li>
                <li>Refer to the demo code below for a working example and further configuration options.</li>
            </ol>
        </div>
        Data labels make it easier for users to interpret the chart by showing the exact value of each point directly on the line.
    </Block>
    <Demo Type="typeof(LineChart_Demo_02_Datalabels)" Tabs="true" />
</Section>

<Section Class="p-0" Size="HeadingSize.H4" Name="Tick Configuration" PageUrl="@pageUrl" Link="tick-configuration">
    <Block>
        The <strong>Tick Configuration</strong> demo shows how to customize the appearance and behavior of axis ticks in the Line Chart component.
        <br /><br />
        <strong>How to use:</strong>
        <div class="content">
            <ol>
                <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>
                <li>You can format tick labels, hide or show specific ticks, and adjust their appearance to improve chart readability.</li>
                <li>Apply custom logic for tick callbacks to display values in a specific format (e.g., currency, percentage).</li>
                <li>Refer to the demo code below for practical examples of configuring axis ticks for your data visualization needs.</li>
            </ol>
        </div>
        Customizing tick configuration helps ensure your chart is clear and tailored to your application's requirements.
    </Block>
    <Demo Type="typeof(LineChart_Demo_03_Tick_Configuration)" Tabs="true" />
</Section>

<Section Class="p-0" Size="HeadingSize.H4" Name="Locale" PageUrl="@pageUrl" Link="locale">
    <Block>
        The <strong>Locale</strong> demo illustrates how to localize number and date formatting in the Line Chart component to match your users' regional preferences.
        <br /><br />
        <strong>How to use:</strong>
        <div class="content">
            <ol>
                <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>
                <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>
                <li>This is especially useful for applications targeting users in different regions, providing a familiar and accessible data presentation.</li>
                <li>Refer to the demo code below for a working example and additional configuration options.</li>
            </ol>
        </div>
        Adapting the chart's locale improves usability and ensures your data is presented in a way that aligns with your audience's expectations.
    </Block>
    <Demo Type="typeof(LineChart_Demo_04_Locale)" Tabs="true" />
</Section>

<Section Class="p-0" Size="HeadingSize.H4" Name="Interpolation modes" PageUrl="@pageUrl" Link="interpolation-modes">
    <Block>
        The <strong>Interpolation Modes</strong> demo showcases how different interpolation settings affect the appearance and smoothness of lines in the <code>LineChart</code> component. Interpolation determines how data points are connected, allowing you to choose between straight lines, smooth curves, or monotone cubic curves for more natural transitions.
        <br /><br />
        <strong>How to use:</strong>
        <div class="content">
            <ol>
                <li>Prepare your chart data by defining <code>Labels</code> for the X-axis and one or more <code>Datasets</code> for the Y-axis values.</li>
                <li>For each dataset, set the <code>CubicInterpolationMode</code> property to control the interpolation style (e.g., <code>"monotone"</code> for monotone cubic interpolation, or leave unset for linear).</li>
                <li>Optionally, adjust the <code>Tension</code> property to fine-tune the curve smoothness.</li>
                <li>Add the <code>LineChart</code> component to your page, binding your data and options as shown in the demo code below.</li>
                <li>Experiment with different interpolation modes and tension values to achieve the desired visual effect for your data.</li>
            </ol>
        </div>
        Using interpolation modes helps you present trends more clearly, making your charts easier to interpret and visually appealing. Refer to the demo code for practical implementation details.
    </Block>
    <Demo Type="typeof(LineChart_Demo_05_Interpolation_Modes)" Tabs="true" />
</Section>

@code {
    private const string pageUrl = DemoRouteConstants.Demos_LineChart;
    private const string pageTitle = "Line Chart";
    private const string pageDescription = "Explore interactive <code>Blazor Line Chart</code> examples with source code. Learn how to visualize time-series data, customize chart appearance, and enhance your Blazor applications. Try live demos and discover practical usage scenarios for the Line Chart component.";
    private const string metaTitle = "Blazor Line Chart Examples & Interactive Demos";
    private const string metaDescription = "Explore interactive Blazor Line Chart examples with source code. Learn how to visualize time-series data, customize chart appearance, and enhance your Blazor applications. Try live demos and discover practical usage scenarios for the Line Chart component.";
    private const string imageUrl = DemoImageSrcConstants.LineChart;
}