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:

Can you please post the HTML of the chart as well? Also, it seems there is way more CSS than just those two rules that could be affecting this. — disinfor, Feb 16 '19 at 18:03
Seems like it has to do with `body {overflow: hidden}` but I need more CSS and markup to say. (Also, put your style tag above the stuff you want to style.) — , Feb 16 '19 at 18:22
Questions seeking debugging help (**"why isn't/how to make this code working?"**) must include the desired behavior, a specific problem or error and _the **shortest code necessary to reproduce it** in the question itself_. See: How to create a [mcve]. — Asons, Feb 16 '19 at 18:35
@LGSon : must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Please tell me you think which one is missing??? — Sara Ree, Feb 16 '19 at 18:38
You miss _"the shortest code necessary to reproduce it in the question itself"_, a so called [mcve]. No one here is going to try put all your fragments to one, nor download files from an external resource (where those files might contain viruses). All that is what expected of you when coming here and ask for help. If anything more is unclear, have a read at [ask] — Asons, Feb 16 '19 at 18:39
Can you make a JSFiddle or something? I don’t know amCharts (added tag so anyone who does might see it) but there seems to be some styling going on besides what is in your question. — , Feb 17 '19 at 03:55
Just a shot in the dark, but you might need to add a certain amount of padding and/or margin to the top if your chart container. It’s being chopped off either by body or by itself. — , Feb 17 '19 at 03:58

score 3 · Accepted Answer · answered Feb 18 '19 at 15:00

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.

score -1 · Answer 2 · answered Feb 16 '19 at 18:02

-1

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.

answered Feb 16 '19 at 18:02

CoderColin14

51
1
8

Maybe try setting the `position:absolute;` on the chartdiv. However, this would then mean to have to align the chart the way it was before – CoderColin14 Feb 16 '19 at 18:11
position:absolute; not working too... it looks like there is another div which is different from chartdiv ... – Sara Ree Feb 16 '19 at 18:22
1

Neither of those things will handle overflow: hidden. Setting padding or overflow to something else might. – Feb 16 '19 at 18:23

How do I get rid of this unwanted cropping?

2 Answers2