Columns with transparency gradient

Recommended Posts



With FusionCharts, is it possible to create a chart as the attached one?


The only way I have found to create a 'transparency gradient' effect is by setting  "plotgradientcolor": "#ffffff"


The problem of this approach is that the bottom part of the columns is always white, and the chart doesn't look well. I'd like to have 50% of transparency in the bottom part of the columns and the upper part totally opaque.


Is this possible?


Thanks in advance,




Share this post

Link to post
Share on other sites

Hi Gacan;


Thanks a lot for your reply.


"Playing" with the fiddle you provided, I see that:

  • All columns start with white color. If you look at the sample I provided that shows the type of appearance that I'm trying to get, the fiddle chart is different. The chart that I'd like to get, would be achieved if the colums could start (at the bottom) with a fillAlpha of 50, and end up (at the top) with a fillAlpha of 100.
  • If I remove the line -> "plotFillRatio": "1:2", I'm still getting the same chart. If I change the values, the same happens (the chart doesn't change). However when I modify the "plotFillAlpha" values, the chart changes accordingly.
  • In the documentation ( says that 'plotFillRatio' is a number of the range 0-100. I'm a bit confused about the '1:2' expression that appears in the fiddle.


I also don't undersant how the charts knows that it has to use Gradient 'Transparency'. Because in the fiddle the displayed chart has always a transparency gradient, regardless of whether the plotFillRatio attribute has is set or not.


So, the question is: "Is there a way to have a columns chart, that has transparency gradient, starting at alpha 50% and ending at alpha 100%?"


Thanks for your support,




Share this post

Link to post
Share on other sites


"plotFillRatio" uses a range typically "0-100" to specify the fill ratio from top to bottom in the charts though you can change the way it specifies gradient using "plotFillAngle". Please refer to this JSFiddle sample for the same:


Regarding "plotFillAlpha", it is applicable to whole data plot, It is not possible to specify different alpha values for top and bottom of a data plot respectively.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now