How do I get rid of this unwanted cropping?

Question

I have a chart created using the amCharts library. But I face an unwanted crop in the image which is on top of each bar when it goes too high, as I've highlighted here:

Please help I don't want to have that cropping.

Here is the CSS code:

    #chartdiv {
      width: 100%;
      height: 500px;
      padding: 70px 0;
      border: 3px solid green;
    }

    body {  
      margin: 0 0 0 0;
      overflow:hidden;
      background-color: transparent;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

And here is the last part of JavaScript code:

    // Add bullets
    var bullet = series.bullets.push(new am4charts.Bullet());
    var image = bullet.createChild(am4core.Image);
    image.width = 150;
    image.height = 150;
    image.horizontalCenter = "middle";
    image.verticalCenter = "bottom";
    image.dy = 80;
    image.y = am4core.percent(100);
    image.propertyFields.href = "bullet";
    image.tooltipText = series.columns.template.tooltipText;
    image.propertyFields.fill = "color";
    image.filters.push(new am4core.DropShadowFilter());

EDIT:

When I add zoom: 0.5; to the chartdiv CSS code this happens:

Answer 1

The bullets you created are not calculated in the reserved rendered area for your chart. The bullets in your chart are very large, so they are cropped at the top. If you set paddingTop on your chart it should solve your issue.

chart.paddingTop = 50;

I created this code pen from the official amcharts demos and added your bullet configuration.

Answer 2

Try putting:

z-index:5;

into the 'chartdiv' id in CSS. This is happenning because there is something that is on top of the image at the top. The z-index function, will ensure that the chartdiv is on top of anything else. If it doesn't work, try increasing the z-index value.