radzen-blazor/RadzenBlazorDemos/Pages/LineChartConfig.razor

@using System.Globalization

<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12">
    <RadzenCard Variant="Variant.Outlined">
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                <RadzenCheckBox @bind-Value="@smooth" Name="smooth"></RadzenCheckBox>
                <RadzenLabel Text="Smooth" Component="smooth" />
            </RadzenStack>
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                <RadzenCheckBox @bind-Value="@showDataLabels" Name="dataLabels"></RadzenCheckBox>
                <RadzenLabel Text="Show Data Labels" Component="dataLabels" />
            </RadzenStack>
            @if (showDataLabels)
            {
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                    <RadzenLabel Text="Label Step" Component="labelStep" />
                    <RadzenNumeric @bind-Value="@labelStep" Min="1" Max="4" Style="width: 70px" Name="labelStep" />
                </RadzenStack>
            }
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                <RadzenCheckBox @bind-Value="@showMarkers" Name="markers"></RadzenCheckBox>
                <RadzenLabel Text="Show Markers" Component="markers" />
            </RadzenStack>
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                <RadzenCheckBox @bind-Value="@sharedTooltip" Name="sharedToltip"></RadzenCheckBox>
                <RadzenLabel Text="Shared Tooltip" Component="sharedTooltip" />
            </RadzenStack>
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                <RadzenLabel Text="Tick Placement" Component="tickPlacement" />
                <RadzenSelectBar @bind-Value="@tickPlacement" TValue="TickPlacement" Size="ButtonSize.Small" Name="tickPlacement">
                    <Items>
                        <RadzenSelectBarItem Value="TickPlacement.Between" Text="Between" />
                        <RadzenSelectBarItem Value="TickPlacement.On" Text="On" />
                    </Items>
                </RadzenSelectBar>
            </RadzenStack>
        </RadzenStack>
    </RadzenCard>

   <RadzenChart Animate="true">
        <RadzenChartTooltipOptions Shared="@sharedTooltip" />
        <RadzenLineSeries Smooth="@smooth" Data="@revenue2023" CategoryProperty="Date" Title="2023" LineType="LineType.Dashed" ValueProperty="Revenue">
            <RadzenMarkers Visible="@showMarkers" MarkerType="MarkerType.Square" />
            <RadzenSeriesDataLabels Visible="@showDataLabels" Step="@labelStep" />
        </RadzenLineSeries>
        <RadzenLineSeries Smooth="@smooth" Data="@revenue2024" CategoryProperty="Date" Title="2024" ValueProperty="Revenue">
            <RadzenMarkers Visible="@showMarkers" MarkerType="MarkerType.Circle" />
            <RadzenSeriesDataLabels Visible="@showDataLabels" Step="@labelStep" />
        </RadzenLineSeries>
        <RadzenCategoryAxis TickPlacement="@tickPlacement">
            <RadzenAxisCrosshair Visible="true" />
        </RadzenCategoryAxis>
        <RadzenValueAxis Formatter="@FormatAsUSD">
            <RadzenGridLines Visible="true" LineType="LineType.Dashed" />
            <RadzenAxisTitle Text="Revenue in USD" />
        </RadzenValueAxis>
    </RadzenChart>
</RadzenStack>

@code {
    bool smooth = false;
    bool sharedTooltip = true;
    bool showDataLabels = false;
    int labelStep = 1;
    bool showMarkers = true;
    TickPlacement tickPlacement = TickPlacement.Between;

    class DataItem
    {
        public string Date { get; set; }
        public double Revenue { get; set; }
    }

    string FormatAsUSD(object value)
    {
        return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US"));
    }

    DataItem[] revenue2023 = new DataItem[] {
        new DataItem
        {
            Date = "Jan",
            Revenue = 234000
        },
        new DataItem
        {
            Date = "Feb",
            Revenue = 269000
        },
        new DataItem
        {
            Date = "Mar",
            Revenue = 233000
        },
        new DataItem
        {
            Date = "Apr",
            Revenue = 244000
        },
        new DataItem
        {
            Date = "May",
            Revenue = 214000
        },
        new DataItem
        {
            Date = "Jun",
            Revenue = 253000
        },
        new DataItem
        {
            Date = "Jul",
            Revenue = 274000
        },
        new DataItem
        {
            Date = "Aug",
            Revenue = 284000
        },
        new DataItem
        {
            Date = "Sept",
            Revenue = 273000
        },
        new DataItem
        {
            Date = "Oct",
            Revenue = 282000
        },
        new DataItem
        {
            Date = "Nov",
            Revenue = 289000
        },
        new DataItem
        {
            Date = "Dec",
            Revenue = 294000
        }
    };

    DataItem[] revenue2024 = new DataItem[] {
        new DataItem
        {
            Date = "Jan",
            Revenue = 334000
        },
        new DataItem
        {
            Date = "Feb",
            Revenue = 369000
        },
        new DataItem
        {
            Date = "Mar",
            Revenue = 333000
        },
        new DataItem
        {
            Date = "Apr",
            Revenue = 344000
        },
        new DataItem
        {
            Date = "May",
            Revenue = 314000
        },
        new DataItem
        {
            Date = "Jun",
            Revenue = 353000
        },
        new DataItem
        {
            Date = "Jul",
            Revenue = 374000
        },
        new DataItem
        {
            Date = "Aug",
            Revenue = 384000
        },
        new DataItem
        {
            Date = "Sept",
            Revenue = 373000
        },
        new DataItem
        {
            Date = "Oct",
            Revenue = 382000
        },
        new DataItem
        {
            Date = "Nov",
            Revenue = 389000
        },
        new DataItem
        {
            Date = "Dec",
            Revenue = 394000
        }
    };
}