Thao Nguyen Thao Nguyen - 1 month ago 6
AngularJS Question

Why is AMChart cylinder serial column not filling in Angular?

So I took a example from amcharts website with the column cylinder.
It works perfectly fine on their website and even the example I download works when I open in chrome.

However when I copy and past the exact code into one of my angular components. The chart draws however the cylinder doesn't fill in.

This is what I expect.
enter image description here

I looked further into it and it seems if I drill down into the actual elements
The angular module fil : url points to "http://local.test.com/#AmChartsEl-1267"
while the example url looks like

file:///C:/Users/guest/Desktop/amcharts_3.20.17.free/samples/columnCylinders.html#AmChartsEl-866


I think this is causing the base to not be filled. I don't understand why the cylinder chart has to use url while the regular chart fills with just regular rgb.

Answer

It seems like you have a <base> tag set in your application. The underlying SVG uses a url clip-path to set the fill for the cylinders, and the base tag screws with it.

You'll need to set AmCharts.baseHref = true; before your chart code in order to fix visual issues that are caused by the <base> tag.

Documentation