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:
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.