highcharts

How to round both ends of bars in a bar chart?


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,
    },
};

Solution

  • Under this API doc you have link to example how to control border radius on both ends: https://api.highcharts.com/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,