Apexchart Treemap adding extra right padding

122 views Asked by At

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.

enter image description here

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

There are 1 answers

1
Deniel Pereira On

Look at this issue: https://github.com/apexcharts/apexcharts.js/issues/4011

Using this solved my problem:

xaxis: {
      show: false,
      labels: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
    },