Navigate to Blazor Stacked Bar Chart Component | Free UI Components by Radzen
Click on "Edit Source" replace the code with that below
Click on "Run"
I would like to be able to tell the auto scaling routine to not show fractional ticks and lines, which I have crossed out on the attached image.
@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="0.5rem" Wrap="FlexWrap.Wrap">
<RadzenCheckBox @bind-Value="@showDataLabels" Name="dataLabels"></RadzenCheckBox>
<RadzenLabel Text="Show Data Labels" Component="dataLabels" />
</RadzenStack>
</RadzenCard>
<RadzenRow>
<RadzenColumn Size="12">
<h4>Auto-size stacked bar series</h4>
<RadzenChart SeriesClick=@OnSeriesClick style="height: 400px">
<RadzenStackedBarSeries Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue">
<RadzenSeriesDataLabels Visible="@showDataLabels" />
</RadzenStackedBarSeries>
<RadzenStackedBarSeries Data="@revenue2023" CategoryProperty="Quarter" Title="2023" ValueProperty="Revenue">
<RadzenSeriesDataLabels Visible="@showDataLabels" />
</RadzenStackedBarSeries>
<RadzenValueAxis>
<RadzenGridLines Visible="true" />
<RadzenAxisTitle Text="Revenue in USD" />
</RadzenValueAxis>
</RadzenChart>
</RadzenColumn>
</RadzenRow>
</RadzenStack>
<EventConsole @ref=@console />
@code {
EventConsole console;
bool showDataLabels;
void OnSeriesClick(SeriesClickEventArgs args)
{
console.Log(args);
}
class DataItem
{
public string Quarter { get; set; }
public double Revenue { get; set; }
}
DataItem[] revenue2023 = new DataItem[]
{
new DataItem
{
Quarter = "Q1",
Revenue = 1
},
new DataItem
{
Quarter = "Q2",
Revenue = 2
},
new DataItem
{
Quarter = "Q3",
Revenue = 1
},
new DataItem
{
Quarter = "Q4",
Revenue = 2
},
};
DataItem[] revenue2024 = new DataItem[] {
new DataItem
{
Quarter = "Q1",
Revenue = 2
},
new DataItem
{
Quarter = "Q2",
Revenue = 1
},
new DataItem
{
Quarter = "Q3",
Revenue = 2
},
new DataItem
{
Quarter = "Q4",
Revenue = 1
},
};
}