Search code examples
angulartypescriptamchartsamcharts4

removing padding from amcharts tooltip

I am using amcharts 4 in my angular project, and for tooltip I have written following lines of code:

series.tooltip.background.fill = am4core.color('#fff');
series.tooltip.label.fill = am4core.color('#000');
series.tooltip.padding(0, 0, 0, 0);
series.columns.template.tooltipHTML = `<div class="bg-dark text-white p-1 m-0">{date.formatDate('dd/MMM/yy')}</div>
<table class="m-0">
  <tr>
     <td><span class="fas fa-sm fa-circle text-primary"></span></td>
     <td>{flowCount}</td>
  </tr>
 </table>`;

The background fill and label is working fine but the padding is still there, how to remove the padding?

I want to remove the white space in tooltip.

enter image description here

Solution

  • You should set the padding of the Label and not of the tooltip itself:

    series.tooltip.label.padding(0, 0, 0, 0);

    See the docs for tooltip.label and lable.padding() for more information.

    You also can use label.paddingBottom, label.paddingLeft, label.paddingRight, label.paddingTop to set the values independently.