Thao Nguyen Thao Nguyen - 1 year ago 94
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 ""
while the example url looks like


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 Source

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.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download