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

When a chart has more than 24 column series the bars after 24th are all black #1405

New Issue
Closed
opened 2026-01-29 17:53:15 +00:00 by claunia · 2 comments
claunia commented 2026-01-29 17:53:15 +00:00
Owner
Copy Link

Originally created by @MikeWilliams-UK on GitHub (Sep 24, 2024).

Describe the bug
When a chart has more than 24 column series the bars after 24th are all black

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'https://blazor.radzen.com/chart-series'
  2. Click on 'Edit Source'
  3. Replace the code with that at the end of this issue
  4. Click on 'Run'

Expected behavior
After the 24th series the bar colours repeat from the first again

Actual behavior
After the 24th series the bar colours are all black

Screenshots
image

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Chrome
  • Version: 129.0.6668.58

Additional context
Code to replicate the issue

<div class="rz-p-0 rz-p-md-12">
    <RadzenChart>
        <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" />
    </RadzenChart>
</div>

@code {
  class DataItem
  {
      public string Quarter { get; set; }
      public double Revenue { get; set; }
  }

  DataItem[] revenue1 = new DataItem[]
  {
      new DataItem { Quarter = "Q1", Revenue = 234000 },
      new DataItem { Quarter = "Q2", Revenue = 284000 }
  };

  DataItem[] revenue2 = new DataItem[]
  {
      new DataItem { Quarter = "Q1", Revenue = 324000 },
      new DataItem { Quarter = "Q2", Revenue = 224000 }
  };
}
Originally created by @MikeWilliams-UK on GitHub (Sep 24, 2024). **Describe the bug** When a chart has more than 24 column series the bars after 24th are all black **To Reproduce** Steps to reproduce the behavior: 1. Go to 'https://blazor.radzen.com/chart-series' 2. Click on 'Edit Source' 3. Replace the code with that at the end of this issue 4. Click on 'Run' **Expected behavior** After the 24th series the bar colours repeat from the first again **Actual behavior** After the 24th series the bar colours are all black **Screenshots** ![image](https://github.com/user-attachments/assets/26f17f35-56c4-48c2-9d0f-74e20a7a60f5) **Desktop (please complete the following information):** - OS: Windows 10 - Browser: Chrome - Version: 129.0.6668.58 **Additional context** Code to replicate the issue ``` <div class="rz-p-0 rz-p-md-12"> <RadzenChart> <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue1" CategoryProperty="Quarter" ValueProperty="Revenue" /> <RadzenColumnSeries Data="@revenue2" CategoryProperty="Quarter" ValueProperty="Revenue" /> </RadzenChart> </div> @code { class DataItem { public string Quarter { get; set; } public double Revenue { get; set; } } DataItem[] revenue1 = new DataItem[] { new DataItem { Quarter = "Q1", Revenue = 234000 }, new DataItem { Quarter = "Q2", Revenue = 284000 } }; DataItem[] revenue2 = new DataItem[] { new DataItem { Quarter = "Q1", Revenue = 324000 }, new DataItem { Quarter = "Q2", Revenue = 224000 } }; } ```
claunia commented 2026-01-29 17:53:16 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Sep 24, 2024):

Indeed the built-in themes provide styling for 24 series. You should provide your own custom colors if you have more than that:

<RadzenColumnSeries Fill="red" ... />
<RadzenColumnSeries Fill="#a0b0c0" ... />
@akorchev commented on GitHub (Sep 24, 2024): Indeed the built-in themes provide styling for 24 series. You should provide your own custom colors if you have more than that: ``` <RadzenColumnSeries Fill="red" ... /> <RadzenColumnSeries Fill="#a0b0c0" ... /> ```
claunia commented 2026-01-29 17:53:16 +00:00
Author
Owner
Copy Link

@MikeWilliams-UK commented on GitHub (Sep 24, 2024):

Many thanks for your quick reply @akorchev

@MikeWilliams-UK commented on GitHub (Sep 24, 2024): Many thanks for your quick reply @akorchev
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#1405
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?