ng-apex-charts treemap border-radius/padding & multiple labels

Is it possible to add a border radius to the elements in a treemap chart (ng-apex-charts) to make them have very rounded edges, and padding between them so they aren't so close together?

Also, whether there can be two labels within each element, with different font sizes and on their own line?

I have a fully functioning chart, but would like to add these features if possible.

Here is my code so far:

chartData: any[] = [
{
x: '1',
y: 40,
fillColor: '#F1EAFA',
labelColor: '#5A368C',
},
{
x: '2',
y: 15,
fillColor: '#E4FCFC',
labelColor: '#137C7C',
},
{
x: '3',
y: 45,
fillColor: '#FEEFF3',
labelColor: '#9B0E2F',
},
];

chartOptions: any = {
series: [
{
data: this.chartData,
},
],
legend: {
show: false,
},
chart: {
type: 'treemap',
toolbar: {
show: false,
},
sparkline: {
enabled: true,
},
height: '170px',
},
colors: this.chartData.map(d => d.fillColor),
plotOptions: {
treemap: {
distributed: true,
enableShades: false,
},
},
dataLabels: {
enabled: true,
distributed: true,
style: {
colors: this.chartData.map(d => d.labelColor),
fontSize: '14px',
fontWeight: 'normal',
format: 'scale',
},
formatter: function (val: any, opts: any) {
const yValue = opts.w.config.series[0].data[opts.dataPointIndex].y;
return `${yValue}% ${val} `; // Display the actual y value (percentage)
},
},
};

Continue reading...