如何让Highcharts水平条形图两端均显示圆角？

我需要制作一个左右两端均为圆角的Highcharts水平条形图，设置了borderRadius:10但仅右侧显示圆角，按照资料说法该配置应让两端都生效，请问遗漏了什么配置？附上我的代码：

const data = [
    { category: 'Apples', value: 10 },
    { category: 'Bananas', value: 15 },
    { category: 'Oranges', value: 8 },
    { category: 'Grapes', value: 12 },
    { category: 'Peaches', value: 5 },
];

const chartOptions = {
    chart: {
        type: 'bar', // Horizontal bars
        height: 400,
        clip: false,
    },
    title: {
        text: 'Simple Horizontal Bar Chart',
    },
    xAxis: {
        categories: data.map(item => item.category), // Labels for each bar
        title: {
            text: 'Categories',
        },
    },
    yAxis: {
        title: {
            text: 'Values',
        },
    },
    plotOptions: {
        series: {
            borderRadius: 10, // 期望两端都显示圆角
            pointPlacement: 'between',
        },
    },
    series: [
        {
            name: 'Data',
            data: data.map(item => item.value), // Numeric values for bars
        },
    ],
    legend: {
        enabled: false,
    },
};

解决方案 #

问题根源是水平条形图的x轴默认起始范围限制了左侧圆角的显示，加上pointPlacement: 'between'的配置进一步干扰了条形图位置，调整如下：

• 移除pointPlacement: 'between'：该配置会让条形图居中在分类之间，导致左侧无法留出圆角空间
• 设置x轴min: -0.5：让x轴左侧扩展出足够空间，避免圆角被边界截断（数值可根据条形宽度微调）
• 保留chart.clip: false：确保超出绘图区的圆角部分不会被裁剪

修改后的完整配置：

const data = [
    { category: 'Apples', value: 10 },
    { category: 'Bananas', value: 15 },
    { category: 'Oranges', value: 8 },
    { category: 'Grapes', value: 12 },
    { category: 'Peaches', value: 5 },
];

const chartOptions = {
    chart: {
        type: 'bar', // Horizontal bars
        height: 400,
        clip: false,
    },
    title: {
        text: 'Simple Horizontal Bar Chart',
    },
    xAxis: {
        categories: data.map(item => item.category), // Labels for each bar
        title: {
            text: 'Categories',
        },
        min: -0.5, // 新增：让x轴左侧留出圆角空间
    },
    yAxis: {
        title: {
            text: 'Values',
        },
    },
    plotOptions: {
        series: {
            borderRadius: 10, // 两端均显示圆角
            // 移除：pointPlacement: 'between'
        },
    },
    series: [
        {
            name: 'Data',
            data: data.map(item => item.value), // Numeric values for bars
        },
    ],
    legend: {
        enabled: false,
    },
};

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