Top bar of BarChart is not visible

Radzen.Blazor Components
1

I've used a BarChart which shows prices per hour for electric energy. In total it should be 48 bars but there are only 47 visible. One bar is on top and outside the box where the chart is displayed. Hovering with the mouse over where the bar should be does trigger the ToolTip.

Here's the razor content. There are no CSS files active for this page.

What could be the cause of the missing bar?

@page "/charginghours"
@inherits PageBase
@using System
@using Radzen
@using Radzen.Blazor
@using SessyWeb.Components

@inject TooltipService tooltipService

@using SessyController.Services.Items

@if (HourlyPrices != null && HourlyPrices.Count() != 0)
{
	<div style="width: 100%; height:100%;">
		<RadzenChart Style="min-height: 2000px; min-width: 600px;">
			<RadzenChartTooltipOptions Shared="false" Visible="true" />
			<RadzenBarSeries Data="@HourlyPrices" CategoryProperty="Time" Title="Price" LineType="LineType.Dashed" ValueProperty="Price">
				<TooltipTemplate Context="data">
					<RadzenCard>
						<div>
							Date @data?.Time
						</div>
						<div>
							Price :@data?.Price
						</div>
						<div>
							State @data?.DisplayState;
						</div>
					</RadzenCard>
				</TooltipTemplate>
				<ChildContent>
					<RadzenMarkers Visible="false" />
					<RadzenSeriesDataLabels Visible="true" />
				</ChildContent>
			</RadzenBarSeries>
			<RadzenBarSeries Data="@HourlyPrices" CategoryProperty="Time" Title="Charging" ValueProperty="VisualizeInChart">
				<TooltipTemplate Context="data">
					<RadzenCard>
						<div>
							Date @data?.Time
						</div>
						<div>
							Price :@data?.Price
						</div>
						<div>
							State @data?.DisplayState;
						</div>
					</RadzenCard>
				</TooltipTemplate>
				<ChildContent>
					<RadzenMarkers Visible="false" />
					<RadzenSeriesDataLabels Visible="false" />
				</ChildContent>
			</RadzenBarSeries>
			<RadzenCategoryAxis Padding="20" Formatter="@FormatAsDayHour">
				<RadzenGridLines Visible="true" />
				<RadzenAxisTitle Text="Time" />
			</RadzenCategoryAxis>
			<RadzenValueAxis Formatter="@FormatAsPrice">
				<RadzenGridLines Visible="true" />
				<RadzenAxisTitle Text="Price" />
			</RadzenValueAxis>
			<RadzenBarOptions Radius="5" />
		</RadzenChart>
	</div>
}
else
{
	<div>
		No prices yet, just a moment .....
	</div>
}

image
image1912×920 73 KB

2

Nobody has this problem or knows the answer?

3

Were you able to reproduce this problem?

4

Hi Paul

Are you able to add the @HourlyPrices data directly into the code so that the example can be run from within the Radzen Samples site?

Regards

Paul

5

In the mean time I've decided for a column chart but it does the same on the left side

@page "/charginghours"
@using System
@using Radzen
@using Radzen.Blazor
@using System.Text.Json


@inject TooltipService tooltipService

@if (HourlyInfos != null && HourlyInfos.Count() != 0)
{
    <div style="width: 100%; height: 800px; overflow: auto;">
		<RadzenChart Style=@GraphStyle>
            <RadzenLegend Position="LegendPosition.Top" Visible="true" />
            <RadzenChartTooltipOptions Shared="false" Visible="true" />
            <RadzenColumnSeries Data="@HourlyInfos" CategoryProperty="Time" Title="Price" LineType="LineType.Dashed" ValueProperty="Price">
                <TooltipTemplate Context="data">
                    <ChargingHoursTooltip HourlyInfo=@data />
                </TooltipTemplate>
                <ChildContent>
                    <RadzenMarkers Visible="false" />
                    <RadzenSeriesDataLabels Visible="true" />
                </ChildContent>
            </RadzenColumnSeries>
            <RadzenLineSeries Data="@HourlyInfos" Smooth="true" CategoryProperty="Time" Title="Smoothed price" LineType="LineType.Dotted" ValueProperty="SmoothedPrice">
                <TooltipTemplate Context="data">
                    <ChargingHoursTooltip HourlyInfo=@data />
                </TooltipTemplate>
                <ChildContent>
                    <RadzenMarkers Visible="false" />
                    <RadzenSeriesDataLabels Visible="false" />
                </ChildContent>
            </RadzenLineSeries>
            <RadzenLineSeries Data="@HourlyInfos" Smooth="true" CategoryProperty="Time" Title="Charging" ValueProperty="VisualizeInChart">
                <TooltipTemplate Context="data">
                    <ChargingHoursTooltip HourlyInfo=@data />
                </TooltipTemplate>
                <ChildContent>
                    <RadzenMarkers Visible="false" />
                    <RadzenSeriesDataLabels Visible="false" />
                </ChildContent>
            </RadzenLineSeries>
            <RadzenColumnSeries Data="@HourlyInfos" CategoryProperty="Time" Title="Profit" ValueProperty="ProfitVisual">
                <TooltipTemplate Context="data">
                    <ChargingHoursTooltip HourlyInfo=@data />
                </TooltipTemplate>
                <ChildContent>
                    <RadzenMarkers Visible="false" />
                    <RadzenSeriesDataLabels Visible="false" />
                </ChildContent>
            </RadzenColumnSeries>
            <RadzenLineSeries Data="@HourlyInfos" Smooth="true" CategoryProperty="Time" Title="Charge remaining" ValueProperty="ChargeLeftVisual">
                <TooltipTemplate Context="data">
                    <ChargingHoursTooltip HourlyInfo=@data />
                </TooltipTemplate>
                <ChildContent>
                    <RadzenMarkers Visible="false" />
                    <RadzenSeriesDataLabels Visible="false" />
                </ChildContent>
            </RadzenLineSeries>
            <RadzenLineSeries Data="@HourlyInfos" Smooth="true" CategoryProperty="Time" Title="Solar power" LineType="LineType.Dashed" ValueProperty="SolarPowerVisual">
                <TooltipTemplate Context="data">
                    <ChargingHoursTooltip HourlyInfo=@data />
                </TooltipTemplate>
                <ChildContent>
                    <RadzenMarkers Visible="false" />
                    <RadzenSeriesDataLabels Visible="false" />
                </ChildContent>
            </RadzenLineSeries>
            <RadzenCategoryAxis Padding="20" Formatter="@FormatAsDayHour">
                <RadzenGridLines Visible="true" />
                <RadzenAxisTitle Text="Time" />
            </RadzenCategoryAxis>
            <RadzenValueAxis Formatter="@FormatAsPrice">
                <RadzenGridLines Visible="true" />
                <RadzenAxisTitle Text="Price" />
            </RadzenValueAxis>
            <RadzenBarOptions Radius="5" />
        </RadzenChart>
    </div>
}
else
{
    <div>
        No prices yet, just a moment .....
    </div>
}

@code {

            public string FormatAsPrice(object value)
        {
            if (value is double)
            {
                var price = (double)value;

                return $"{price:c3}";
            }

            return "";
        }

        public string FormatAsDayHour(object value)
        {
            if (value is DateTime)
            {
                var dateTime = (DateTime)value;

                return $"{dateTime.Day}-{dateTime.Month}/{dateTime.Hour}";
            }

            return "";
        }



            private string GraphStyle { get; set; } = "height: 100%; min-width: 250px; visibility: initial;";


 List<HourlyInfo> HourlyInfos = new List<HourlyInfo>
            {
                new HourlyInfo(new DateTime(2025, 2, 18, 0, 0, 0), 0.13301, null)
                {
                    SmoothedPrice = 0.129035,
                    Buying = 0,
                    Selling = 0,
                    ChargeLeft = 0,
                    ChargeLeftPercentage = 0,
                    SolarGlobalRadiation = 0,
                    SolarPower = 0,
                    Charging = false,
                    Discharging = true
                },
                new HourlyInfo(new DateTime(2025, 2, 18, 1, 0, 0), 0.12506, null)
                {
                    SmoothedPrice = 0.12723,
                    Buying = 0,
                    Selling = 0,
                    ChargeLeft = 0,
                    ChargeLeftPercentage = 0,
                    SolarGlobalRadiation = 0,
                    SolarPower = 0,
                    Charging = false,
                    Discharging = true
                },
                new HourlyInfo(new DateTime(2025, 2, 18, 2, 0, 0), 0.12362, null)
                {
                    SmoothedPrice = 0.121766,
                    Buying = 0,
                    Selling = 0,
                    ChargeLeft = 0,
                    ChargeLeftPercentage = 0,
                    SolarGlobalRadiation = 0,
                    SolarPower = 0,
                    Charging = false,
                    Discharging = true
                },
                new HourlyInfo(new DateTime(2025, 2, 18, 3, 0, 0), 0.11662, null)
                {
                    SmoothedPrice = 0.11844,
                    Buying = 0,
                    Selling = 0,
                    ChargeLeft = 0,
                    ChargeLeftPercentage = 0,
                    SolarGlobalRadiation = 0,
                    SolarPower = 0,
                    Charging = false,
                    Discharging = true
                },
                new HourlyInfo(new DateTime(2025, 2, 18, 4, 0, 0), 0.11508, null)
                {
                    SmoothedPrice = 0.11774,
                    Profit = -0.759528,
                    ProfitVisual = -0.0759528,
                    Buying = 0.759528,
                    Selling = 0,
                    ChargeLeft = 0,
                    ChargeLeftPercentage = 0,
                    SolarGlobalRadiation = 0,
                    SolarPower = 0,
                    Charging = true,
                    Discharging = false
                },
                new HourlyInfo(new DateTime(2025, 2, 18, 5, 0, 0), 0.12152, null)
                {
                    SmoothedPrice = 0.125233,
                    Buying = 0,
                    Selling = 0,
                    ChargeLeft = 0,
                    ChargeLeftPercentage = 0,
                    SolarGlobalRadiation = 0,
                    SolarPower = 0,
                    Charging = false,
                    Discharging = false
                },
                new HourlyInfo(new DateTime(2025, 2, 18, 6, 0, 0), 0.1391, null)
                {
                    SmoothedPrice = 0.14683,
                    Buying = 0,
                    Selling = 0,
                    ChargeLeft = 0,
                    ChargeLeftPercentage = 0,
                    SolarGlobalRadiation = 0,
                    SolarPower = 0,
                    Charging = false,
                    Discharging = false
                },
                new HourlyInfo(new DateTime(2025, 2, 18, 7, 0, 0), 0.17987, null)
                {
                    SmoothedPrice = 0.170923,
                    Buying = 0,
                    Selling = 0,
                    ChargeLeft = 0,
                    ChargeLeftPercentage = 0,
                    SolarGlobalRadiation = 0,
                    SolarPower = 0,
                    Charging = false,
                    Discharging = false
                },
                new HourlyInfo(new DateTime(2025, 2, 18, 8, 0, 0), 0.1938, null)
                {
                    SmoothedPrice = 0.1723,
                    Buying = 0,
                    Selling = 0,
                    ChargeLeft = 0,
                    ChargeLeftPercentage = 0,
                    SolarGlobalRadiation = 0,
                    SolarPower = 0,
                    Charging = false,
                    Discharging = false
                },
                new HourlyInfo(new DateTime(2025, 2, 18, 9, 0, 0), 0.14323, null)
                {
                    SmoothedPrice = 0.153856,
                    Buying = 0,
                    Selling = 0,
                    ChargeLeft = 0,
                    ChargeLeftPercentage = 0,
                    SolarGlobalRadiation = 0,
                    SolarPower = 0,
                    Charging = false,
                    Discharging = false
                }
                // Voeg hier de rest van de records toe...
            };

    public class HourlyInfo
    {
        public HourlyInfo(DateTime time, double price, string x)
        {
            Price = price;
            Time = time;
        }

        public double Price { get; set; }
        public double SmoothedPrice { get; set; }
        public DateTime Time { get; set; }
        public double Profit { get; set; }
        public double ProfitVisual { get; set; }
        public double Buying { get; set; }
        public double Selling { get; set; }
        public double ChargeLeft { get; set; }
        public double ChargeLeftPercentage { get; set; }
        public double ChargeLeftVisual { get; set; }
        public int SolarGlobalRadiation { get; set; }
        public double SolarPower { get; set; }
        public double SolarPowerInWatts { get; set; }
        public double SolarPowerVisual { get; set; }
        public bool Charging { get; set; }
        public bool Discharging { get; set; }
        public double VisualizeInChart { get; set; }
        public string DisplayState { get; set; }
        public bool ZeroNetHome { get; set; }
        public object HoursCharging { get; set; }
    }

}
6

Increasing the padding of RadzenCategoryAxis would make all series appear:

image
image2526×1566 259 KB

<RadzenCategoryAxis Padding="120" Formatter="@FormatAsDayHour">
7

Thanks for the reply.

Yes, that works but shouldn't that be something that works out-of-the-box?