I need a Highcharts bar chart with both ends (left and right) rounded, so I tried the config below, but only the right end of the bars is rounded.

I expected both ends to be rounded, as some Stack Overflow answers suggest that borderRadius: 8 should apply to both. However, in my case, only the right end is rounded.

Am I missing something? Is there a workaround for this?

    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, // ✅ Rounded edges on both ends
            pointPlacement: 'between',
        },
    },
    series: [
        {
            name: 'Data',
            data: data.map(item => item.value), // Numeric values for bars
        },
    ],
    legend: {
        enabled: false,
    },
};

I need a Highcharts bar chart with both ends (left and right) rounded, so I tried the config below, but only the right end of the bars is rounded.

I expected both ends to be rounded, as some Stack Overflow answers suggest that borderRadius: 8 should apply to both. However, in my case, only the right end is rounded.

Am I missing something? Is there a workaround for this?

    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, // ✅ Rounded edges on both ends
            pointPlacement: 'between',
        },
    },
    series: [
        {
            name: 'Data',
            data: data.map(item => item.value), // Numeric values for bars
        },
    ],
    legend: {
        enabled: false,
    },
};

• highcharts

1 Answer 1

Under this API doc you have link to example how to control border radius on both ends: https://api.highcharts/highcharts/series.column.borderRadius

Here is your config updated in relevant places:

{  
  chart: {
    ...,
    events: {
      load() {
        const chart = this;
        chart.update({
          plotOptions: {
            series: {
              borderRadius: {
                where: "all",
              },
            },
          },
        })
      },
    },
  },
  ...,
  plotOptions: {
    series: {
      borderRadius: {
        radius: 10,
      },
    },
  },
  ...
}

I hope you will find it useful.

Best,