I have a Treemap implemented using Apexcharts (Angular). When screen pixel size is > 904px, the chart adds some padding (~20px) on the right.
I have been trying so many different configurations but unfortunately this padding is not going away for some reason.
Any help is appriciated.
Code:
this.categoryChartOptions = {
series: [{
data: [
{x: 'New Delhi', y: 150},
...
]
}],
chart: {
height: 320,
type: 'treemap',
foreColor: 'white',
fontFamily: fontFamily,
redrawOnParentResize: true,
redrawOnWindowResize: true,
parentHeightOffset: 0,
toolbar: {show: false},
selection: {enabled: false},
animations: {enabled: true},
offsetX: 0,
offsetY: 0
},
legend: {show: false},
title: {
text: 'Treemap',
align: 'center',
style: {fontWeight: 'normal', fontSize: '12'},
},
dataLabels: {
enabled: true,
style: {fontWeight: 'normal', fontSize: '12'},
formatter: (text, {value}) => [`${text}`, `$${value}`],
offsetY: -4,
dropShadow: {enabled: false}
},
grid: {
show: false,
padding: {top: 0, bottom: 0, right: 0, left: 0}
},
colors: [
'#3B93A5', ...
],
plotOptions: {
treemap: {
distributed: true,
enableShades: false,
useFillColorAsStroke: true,
}
},
tooltip: {enabled: false}
};
Look at this issue: https://github.com/apexcharts/apexcharts.js/issues/4011
Using this solved my problem: