Charts have extra padding when printed

I have a page with several charts made with AmCharts4 and I’m setting their height through CSS:

@media print {
    #year-month-chart,
    #cosphi-chart,
    #power-line-chart,
    #yearly-slots-chart 
    {
        height: 230px !important;
        padding: 0;
        margin: 0;
        font-size: 10px;
        line-height: 1;
    }
}

Here an example of one chart instantiated:

HTML:
<div id="cosphi-chart"></div>

JS:
var chart = am4core.create("cosphi-chart", am4charts.XYChart);

This is how they look with media emulation set to printer:

https://i.sstatic.net/IYdA64ZW.png

But when I print on PDF the charts look weird:

https://i.sstatic.net/oZWRc7A4.png

Any idea about this? I already printed AmCharts4 charts but never had this issue.