Skip to content

ChartType.StackedBar contains one too many x-axis columns with empty label #11465

Open
@petterhersinger

Description

@petterhersinger

Things to check

  • I have searched the existing issues for this bug
  • To rule out a caching problem I made sure the bug also happens in an incognito tab

Bug type

Component

Component name

MudChart.StackedBar

What happened?

When using ChartType.StackedBar, an extra empty column appears at the end of the chart without a corresponding X-axis label. This does not occur when using ChartType.Bar with the same data.

Screenshots:
StackedBar (notice the extra empty column on the right):

Image

Bar (correct behavior, no extra column):

Image

Code to reproduce:

// MudChart component

<MudChart ChartType="ChartType.StackedBar" 
          LegendPosition="Position.Top" 
          ChartSeries="@UniqueUsersSeries" 
          XAxisLabels="@XAxisLabelsUniqueUsers"
          Width="100%" 
          Height="400px" 
          ChartOptions="DefaultChartOptions" />

// Data setup - 6 labels with 6 corresponding data points

private List<ChartSeries> UniqueUsersSeries = new List<ChartSeries>
{
    new ChartSeries
    {
        Name = "Weekly: Unique Users",
        Data = new double[] { 0, 1, 2, 1, 0, 0 } // 6 data points
    }
};

private string[] XAxisLabelsUniqueUsers = { "25-W19", "25-W20", "25-W21", "25-W22", "25-W23", "25-W24" }; // 6 labels

public ChartOptions DefaultChartOptions = new ChartOptions
{
    YAxisTicks = 2,
    XAxisLines = true,
    YAxisLines = true,
    ChartPalette = new[] { "#f78f1e", "#CEDAE0", "#2a4667", "#4a5864", "#cdd9e0" }
};

Expected behavior

The StackedBar chart should display exactly 6 columns with their corresponding X-axis labels, just like the Bar chart does. There should be no extra empty column without a label.

Reproduction link

x

Reproduction steps

  1. Create a new Blazor component with MudBlazor references
  2. Set up a ChartSeries list with a single series containing 6 data points
  3. Create an X-axis labels array with exactly 6 labels matching the data points
  4. Add a MudChart component with ChartType.StackedBar
  5. Run the application and observe the chart
  6. Bug occurs: Chart displays 7 columns instead of 6 - the last column is empty and has no X-axis label
  7. Change ChartType.StackedBar to ChartType.Bar in the same component
  8. Run again and observe that the Bar chart correctly displays only 6 columns with labels
  9. Switch back to ChartType.StackedBar to confirm the extra column reappears
    ...

Relevant log output

Version (bug)

7.15.0

Version (working)

No response

What browsers are you seeing the problem on?

Firefox

On which operating systems are you experiencing the issue?

Windows

Pull Request

  • I would like to do a Pull Request

Code of Conduct

  • I agree to follow this project's Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions