Files
radzen-blazor/RadzenBlazorDemos/Pages/ChartSyncConfig.razor
2026-06-15 18:45:54 +03:00

65 lines
2.3 KiB
Plaintext

@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" Gap="1rem">
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3" Style="margin: 0;">Hover either chart - the other follows</RadzenText>
</RadzenStack>
</RadzenCard>
<RadzenChart SyncGroup="dashboard" Style="height: 240px;">
<RadzenAreaSeries FillMode="FillMode.Gradient" Smooth="true" Data="@revenue" CategoryProperty="Date" ValueProperty="Value" Title="Revenue" />
<RadzenCategoryAxis FormatString="{0:MMM}">
<RadzenAxisCrosshair Visible="true" />
</RadzenCategoryAxis>
<RadzenValueAxis Formatter="@FormatAsUSD">
<RadzenGridLines Visible="true" LineType="LineType.Dashed" />
</RadzenValueAxis>
</RadzenChart>
<RadzenChart SyncGroup="dashboard" Style="height: 240px;">
<RadzenLineSeries Smooth="true" Data="@orders" CategoryProperty="Date" ValueProperty="Value" Title="Orders" />
<RadzenCategoryAxis FormatString="{0:MMM}">
<RadzenAxisCrosshair Visible="true" />
</RadzenCategoryAxis>
<RadzenValueAxis>
<RadzenGridLines Visible="true" LineType="LineType.Dashed" />
</RadzenValueAxis>
</RadzenChart>
</RadzenStack>
@code {
class DataItem
{
public DateTime Date { get; set; }
public double Value { get; set; }
}
DataItem[] revenue = Array.Empty<DataItem>();
DataItem[] orders = Array.Empty<DataItem>();
string FormatAsUSD(object value)
{
return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US"));
}
protected override void OnInitialized()
{
var random = new Random(42);
var start = new DateTime(DateTime.Today.Year, 1, 1);
revenue = Enumerable.Range(0, 12).Select(i => new DataItem
{
Date = start.AddMonths(i),
Value = 200000 + i * 12000 + random.Next(-30000, 30000)
}).ToArray();
orders = Enumerable.Range(0, 12).Select(i => new DataItem
{
Date = start.AddMonths(i),
Value = 1200 + i * 80 + random.Next(-200, 200)
}).ToArray();
}
}