AmCharts - line chart graph container overflow

Question

I am trying to display a line graph to display correctly on my site, but for some reason it wants to overflow the graph container. I tried resetting the window size to the original, setting the overflow hidden on all children of the chart, and nothing works. I have no idea why this is happening, and I wondered if anyone had met this question before them?

I added an image below what I am currently receiving and below it, an object that is used to adjust the line graph.

{ "type": "serial", "theme": "light", "marginRight": 80, "autoMarginOffset": 20, "marginTop": 7, "dataProvider": queryData.data.result, "valueAxes": [{ "axisAlpha": 0.2, "dashLength": 1, "position": "left" }], "mouseWheelZoomEnabled": true, "graphs": [{ "id": "g1", "balloonText": "[[value]]", "bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "hideBulletsCount": 50, "title": "red line", "valueField": "value", "useLineColorForBulletBorder": true, "balloon": { "drop": true } }], "chartScrollbar": { "autoGridCount": true, "graph": "g1", "scrollbarHeight": 40 }, "chartCursor": { "limitToGraph": "g1" }, "categoryField": "name", "dataDateFormat": "DD/MM/YYYY HH:NN:SS", "categoryAxis": { "parseDates": true, "axisColor": "#DADADA", "dashLength": 1, "minorGridEnabled": true }, "export": { "enabled": true } } 

Answer 1

This can happen if you use the <base href> directive on your web page. In these cases, links to masking filters in SVG do not work properly, so the lines protrude from the plot area.

To avoid this, simply add the global baseHref line to your code:

 AmCharts.baseHref = true; 

Note that this should be a separate line (not part of the diagram configuration) and go to any code that creates the diagrams.