Columns with transparency gradient

[Jordi]

Hi;

 

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,

 

      Jordi

[Gagan Sikri]

Hi

 

You can use "plotFillAlpha" to set transparency level and "plotFillRatio" to define ratio for color gradient. Please refer tot this JSFiddle sample for the same: http://jsfiddle.net/sikrigagan/s7t8F/1021/

[Jordi]

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 (http://www.fusioncharts.com/dev/chart-attributes.html?chart=mscolumn2d) 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,

 

     Jordi

 

[Gagan Sikri]

Hi

 

"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: http://jsfiddle.net/sikrigagan/s7t8F/1067/

 

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.