Highchart Treemap - rounded edges

Question

I need to create a treemap with round corners as shown in the image

I have tried:

• Changing plotOptions.treemap.borderRadius set the radius for each box instead of the entire plot.

• Using chart.borderRadius has no impact on the graph, I believe it is so because the plot itself is not going till the edge of the chart.

• The rounded-corners library by highcharts does not work with treemaps. It is working well with bar charts

Any direction on how to achieve this is appreciated. Here's a jsfiddle of treemap for reference.

Here are options I have tried

const options = {
        chart: {
            borderRadius: 20,
        },
        credits: {
          enabled: false,
        },
        tooltip: {
          enabled: false,
        },

        plotOptions: {
          treemap: {
            // borderRadiusBottomRight: 25,
            // borderRadiusBottomLeft: 25,
            borderWidth: 2,
            borderRadius: 5,
            borderColor: "#FFFFFF",
          
            },
          },
        series: [
          {
            type: "treemap",
            data: [{
                    id: 'A',
                    name: 'Apples',
                    color: "#EC2500",
                    value: 10,
                }, {
                    id: 'B',
                    name: 'Bananas',
                    color: "#ECE100",
                    value: 15,
                }, {
                    id: 'C',
                    name: 'Oranges',
                    color: '#EC9800',
                    value: 20,
                }],
          },
        ],
        title: {
          text: "",
        },
      },
    };

Note:

1. Legend or title is not required in the chart, the plot can be extended to the edges if possible
2. All other charts are made with highcharts, would prefer doing the treemap with the same instead of using a different library for it.
3. No drill-down is required.

Answer 1

You can add a clip-path to the highcharts-series class.

.highcharts-series {
  clip-path: inset(0% 0% 0% 0% round 15px);
}

https://jsfiddle.net/mqo78ah2/

You'll have to make the css more specific, so that you don't change your other charts.