Files
radzen-blazor/RadzenBlazorDemos/Pages/LineChartMultipleSeries.razor
2026-07-03 10:24:26 +03:00

53 lines
2.0 KiB
Plaintext

<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12">
<RadzenChart>
<RadzenLineSeries Data="@northData" CategoryProperty="Month" ValueProperty="Revenue" Title="North">
<RadzenMarkers MarkerType="MarkerType.Circle" />
</RadzenLineSeries>
<RadzenLineSeries Data="@southData" CategoryProperty="Month" ValueProperty="Revenue" Title="South">
<RadzenMarkers MarkerType="MarkerType.Circle" />
</RadzenLineSeries>
<RadzenLineSeries Data="@westData" CategoryProperty="Month" ValueProperty="Revenue" Title="West">
<RadzenMarkers MarkerType="MarkerType.Circle" />
</RadzenLineSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>
</RadzenStack>
@code {
class DataItem
{
public string Month { get; set; }
public double Revenue { get; set; }
}
DataItem[] northData = new DataItem[]
{
new DataItem { Month = "Jan", Revenue = 234 },
new DataItem { Month = "Feb", Revenue = 269 },
new DataItem { Month = "Mar", Revenue = 233 },
new DataItem { Month = "Apr", Revenue = 244 },
new DataItem { Month = "May", Revenue = 214 },
new DataItem { Month = "Jun", Revenue = 253 },
};
DataItem[] southData = new DataItem[]
{
new DataItem { Month = "Jan", Revenue = 180 },
new DataItem { Month = "Feb", Revenue = 205 },
new DataItem { Month = "Mar", Revenue = 198 },
new DataItem { Month = "Apr", Revenue = 232 },
new DataItem { Month = "May", Revenue = 254 },
new DataItem { Month = "Jun", Revenue = 268 },
};
DataItem[] westData = new DataItem[]
{
new DataItem { Month = "Jan", Revenue = 145 },
new DataItem { Month = "Feb", Revenue = 162 },
new DataItem { Month = "Mar", Revenue = 184 },
new DataItem { Month = "Apr", Revenue = 176 },
new DataItem { Month = "May", Revenue = 199 },
new DataItem { Month = "Jun", Revenue = 221 },
};
}