MudBlazor柱状图X轴标签布局问题：需居中或左对齐

问题描述 #

使用MudBlazor的Bar Chart时，X轴上的「Cats」「Dogs」两个标签显示在轴的两端，布局怪异，需要将标签及对应柱状图居中或左对齐，官方文档未找到相关配置项。

当前代码 #

<MudChart ChartType="ChartType.Bar" ChartSeries="@Series" 
          XAxisLabels="@XAxisLabels" 
          Width="100%" Height="350px" > 
</MudChart>

@code {
    public List<ChartSeries> Series = new List<ChartSeries>()
    {
        new ChartSeries() { Name = "Canada", Data = new double[] { 40, 20 } },
        new ChartSeries() { Name = "Germany", Data = new double[] { 19, 24} },
        new ChartSeries() { Name = "Sweden", Data = new double[] { 8, 6} },
    };
    public string[] XAxisLabels = { "Cats", "Dogs"};
}

临时方案（非最优） #

通过在每个ChartSeries的首尾添加空数据点，同时扩展X轴标签来实现居中，但这种方法会引入无效数据，不是理想方案：

@code {
    public List<ChartSeries> Series = new List<ChartSeries>()
    {
        new ChartSeries() { Name = "Canada", Data = new double[] {0, 40, 20,0 } },
        new ChartSeries() { Name = "Germany", Data = new double[] {0, 19, 24,0} },
        new ChartSeries() { Name = "Sweden", Data = new double[] {0, 8, 6,0} },
    };
    public string[] XAxisLabels = { "","Cats", "Dogs",""};
}

最优解决方案：自定义ChartOptions配置 #

MudBlazor的MudChart基于Chart.js实现，可通过ChartOptions属性直接配置底层参数，调整X轴的分类宽度和对齐方式：

居中对齐配置 #

<MudChart ChartType="ChartType.Bar" ChartSeries="@Series" 
          XAxisLabels="@XAxisLabels" 
          Width="100%" Height="350px"
          ChartOptions="@GetChartOptions()" > 
</MudChart>

@code {
    public List<ChartSeries> Series = new List<ChartSeries>()
    {
        new ChartSeries() { Name = "Canada", Data = new double[] { 40, 20 } },
        new ChartSeries() { Name = "Germany", Data = new double[] { 19, 24} },
        new ChartSeries() { Name = "Sweden", Data = new double[] { 8, 6} },
    };
    public string[] XAxisLabels = { "Cats", "Dogs"};

    private ChartOptions GetChartOptions()
    {
        return new ChartOptions
        {
            Scales = new Scales
            {
                X = new Axis
                {
                    // 设置每个分类的宽度占比，取值0-1，越小则分类间留白越多
                    CategoryPercentage = 0.6,
                    // 设置每个柱子在分类内的宽度占比
                    BarPercentage = 0.8,
                    // 关闭网格偏移，让刻度与柱子中心对齐
                    Offset = false,
                    Ticks = new Tick
                    {
                        // 标签居中对齐
                        Align = "center"
                    }
                }
            }
        };
    }
}

左对齐配置 #

如果需要左对齐，只需调整CategoryPercentage并设置X轴的左侧内边距：

private ChartOptions GetChartOptions()
{
    return new ChartOptions
    {
        Layout = new Layout
        {
            Padding = new Padding
            {
                Left = 20 // 左侧留白，避免柱子贴边
            }
        },
        Scales = new Scales
        {
            X = new Axis
            {
                CategoryPercentage = 0.4,
                BarPercentage = 0.9,
                Offset = false,
                Ticks = new Tick
                {
                    Align = "start" // 标签左对齐
                }
            }
        }
    };
}

原理说明 #

• CategoryPercentage控制每个分类（如Cats/Dogs）在X轴上的宽度占比，减小该值会增加分类两侧的留白，从而实现居中/左对齐的视觉效果。
• BarPercentage控制每个柱子在所属分类宽度内的占比，避免柱子过宽或过窄。
• Offset设为false可让X轴刻度与柱子中心对齐，避免标签偏移。

内容的提问来源于stack exchange，提问作者Bruce Bennett