starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

Using string as Category data type on line chart adds an unexcepted padding around the category axis #1716

New Issue
Closed
opened 2026-01-29 17:57:38 +00:00 by claunia · 1 comment
claunia commented 2026-01-29 17:57:38 +00:00
Owner
Copy Link

Originally created by @link-asalata on GitHub (Apr 17, 2025).

Describe the bug
When rendering a line chart that uses string as the Category data type, a padding is added on each extreme of the category axis. This does not happen when using DateTime or numeric data types for the category axis.

To Reproduce
You can easily reproduce this behavior on the Demo platform:

  1. Go to the RadZen Blazor Demo
  2. Click on Edit Source for the first code example, and paste in the code example that I attached below.
  3. Click "Run".
  4. Notice the described behaviour in the rendered example.

Code Example

@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>
            <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>
    </RadzenCard>

   <RadzenChart>
        <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" />
        </RadzenLineSeries>
        <RadzenCategoryAxis Padding="20" />
        <RadzenValueAxis Formatter="@FormatAsUSD">
            <RadzenGridLines Visible="true" />
            <RadzenAxisTitle Text="Revenue in USD" />
        </RadzenValueAxis>
    </RadzenChart>

       <RadzenChart>
        <RadzenChartTooltipOptions Shared="@sharedTooltip" />
        <RadzenLineSeries Smooth="@smooth" Data="@revenue2023dt" CategoryProperty="Date" Title="2023" LineType="LineType.Dashed" ValueProperty="Revenue">
            <RadzenMarkers Visible="@showMarkers" MarkerType="MarkerType.Square" />
            <RadzenSeriesDataLabels Visible="@showDataLabels" />
        </RadzenLineSeries>
        <RadzenCategoryAxis Padding="20" />
        <RadzenValueAxis Formatter="@FormatAsUSD">
            <RadzenGridLines Visible="true" />
            <RadzenAxisTitle Text="Revenue in USD" />
        </RadzenValueAxis>
    </RadzenChart>
</RadzenStack>

@code {
    bool smooth = false;
    bool sharedTooltip = true;
    bool showDataLabels = false;
    bool showMarkers = true;

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

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

    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 }
    };


    class DateTimeDataItem
    {
        public DateTime Date { get; set; }
        public double Revenue { get; set; }
    }

    DateTimeDataItem[] revenue2023dt = new DateTimeDataItem[] {
        new DateTimeDataItem { Date = new DateTime(2023, 1, 1), Revenue = 234000 },
        new DateTimeDataItem { Date = new DateTime(2023, 2, 1), Revenue = 269000 },
        new DateTimeDataItem { Date = new DateTime(2023, 3, 1), Revenue = 233000 },
        new DateTimeDataItem { Date = new DateTime(2023, 4, 1), Revenue = 244000 },
        new DateTimeDataItem { Date = new DateTime(2023, 5, 1), Revenue = 214000 },
        new DateTimeDataItem { Date = new DateTime(2023, 6, 1), Revenue = 253000 },
        new DateTimeDataItem { Date = new DateTime(2023, 7, 1), Revenue = 274000 },
        new DateTimeDataItem { Date = new DateTime(2023, 8, 1), Revenue = 284000 },
        new DateTimeDataItem { Date = new DateTime(2023, 9, 1), Revenue = 273000 },
        new DateTimeDataItem { Date = new DateTime(2023, 10, 1), Revenue = 282000 },
        new DateTimeDataItem { Date = new DateTime(2023, 11, 1), Revenue = 289000 },
        new DateTimeDataItem { Date = new DateTime(2023, 12, 1), Revenue = 294000 }
    };
}

Alternatively link your repo with a sample project that can be run.

Expected behavior
I except that the different data types do not behave in this different fashion. The padding should be the same in both cases

Screenshots
Image

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser: chrome, brave
  • Version: latest (v6.6.1)
Originally created by @link-asalata on GitHub (Apr 17, 2025). **Describe the bug** When rendering a line chart that uses `string` as the Category data type, a padding is added on each extreme of the category axis. This does not happen when using DateTime or numeric data types for the category axis. **To Reproduce** You can easily reproduce this behavior on the Demo platform: 1. Go to [the RadZen Blazor Demo](https://blazor.radzen.com/line-chart) 2. Click on Edit Source for the first code example, and paste in the code example that I attached below. 3. Click "Run". 4. Notice the described behaviour in the rendered example. **Code Example** ``` @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> <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> </RadzenCard> <RadzenChart> <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" /> </RadzenLineSeries> <RadzenCategoryAxis Padding="20" /> <RadzenValueAxis Formatter="@FormatAsUSD"> <RadzenGridLines Visible="true" /> <RadzenAxisTitle Text="Revenue in USD" /> </RadzenValueAxis> </RadzenChart> <RadzenChart> <RadzenChartTooltipOptions Shared="@sharedTooltip" /> <RadzenLineSeries Smooth="@smooth" Data="@revenue2023dt" CategoryProperty="Date" Title="2023" LineType="LineType.Dashed" ValueProperty="Revenue"> <RadzenMarkers Visible="@showMarkers" MarkerType="MarkerType.Square" /> <RadzenSeriesDataLabels Visible="@showDataLabels" /> </RadzenLineSeries> <RadzenCategoryAxis Padding="20" /> <RadzenValueAxis Formatter="@FormatAsUSD"> <RadzenGridLines Visible="true" /> <RadzenAxisTitle Text="Revenue in USD" /> </RadzenValueAxis> </RadzenChart> </RadzenStack> @code { bool smooth = false; bool sharedTooltip = true; bool showDataLabels = false; bool showMarkers = true; string FormatAsUSD(object value) { return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US")); } class DataItem { public string Date { get; set; } public double Revenue { get; set; } } 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 } }; class DateTimeDataItem { public DateTime Date { get; set; } public double Revenue { get; set; } } DateTimeDataItem[] revenue2023dt = new DateTimeDataItem[] { new DateTimeDataItem { Date = new DateTime(2023, 1, 1), Revenue = 234000 }, new DateTimeDataItem { Date = new DateTime(2023, 2, 1), Revenue = 269000 }, new DateTimeDataItem { Date = new DateTime(2023, 3, 1), Revenue = 233000 }, new DateTimeDataItem { Date = new DateTime(2023, 4, 1), Revenue = 244000 }, new DateTimeDataItem { Date = new DateTime(2023, 5, 1), Revenue = 214000 }, new DateTimeDataItem { Date = new DateTime(2023, 6, 1), Revenue = 253000 }, new DateTimeDataItem { Date = new DateTime(2023, 7, 1), Revenue = 274000 }, new DateTimeDataItem { Date = new DateTime(2023, 8, 1), Revenue = 284000 }, new DateTimeDataItem { Date = new DateTime(2023, 9, 1), Revenue = 273000 }, new DateTimeDataItem { Date = new DateTime(2023, 10, 1), Revenue = 282000 }, new DateTimeDataItem { Date = new DateTime(2023, 11, 1), Revenue = 289000 }, new DateTimeDataItem { Date = new DateTime(2023, 12, 1), Revenue = 294000 } }; } ``` Alternatively link your repo with a sample project that can be run. **Expected behavior** I except that the different data types do not behave in this different fashion. The padding should be the same in both cases **Screenshots** ![Image](https://github.com/user-attachments/assets/fd771249-a174-4697-9607-18a964ce156b) **Desktop (please complete the following information):** - OS: Windows 11 - Browser: chrome, brave - Version: latest (v6.6.1)
claunia commented 2026-01-29 17:57:39 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Apr 17, 2025):

Hi @link-asalata,

The padding is applied by design for ordinal categories. You can set it to a negative value <RadzenCategoryAxis Padding="-20" /> to reduce it.

@akorchev commented on GitHub (Apr 17, 2025): Hi @link-asalata, The padding is applied by design for ordinal categories. You can set it to a negative value `<RadzenCategoryAxis Padding="-20" />` to reduce it.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1716
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?