Sign in to follow this  
Leo_T

Bar Color Look Properties

Recommended Posts

Hi,

 

I'm hoping you can help me with this, I've looked at the documentation but couldn't pinpoint the answer.

 

If you see my images, you will see that chart 1 seems to have gradient bar colors. Chart 2 appears to have a glossy look. And chart 3 has simple plain colors.

My question is, how do achieve these different bar color looks? Is there a useGlossyLook=1 or usePlainColor=1 setting?

 

My bar always uses the "gradient" look by default.

I'm using FC javascript v3.2.2

Any help would be appreciated.

 

My code

 

var myChart = new FusionCharts( "Bar2D", "myChartId", 400, 400, "0", "0" );

<chart numberPrefix='' showToolTip='0' animation='0' >

<set label='Point1' value='111' />

<set label='Point2' value='92' />

<set label='Point3' value='253' />

<set label='Point4' value='54' />

<set label='Point5' value='155' />

</chart>

post-30845-0-40942000-1362631662_thumb.png

post-30845-0-02366300-1362631671_thumb.png

post-30845-0-81941500-1362631676_thumb.png

post-30845-0-21663900-1362631685_thumb.png

Share this post


Link to post
Share on other sites

Hi,

 

There are various attributes that let you configure how your bars appear on the chart.

 

1.Gradient look can be obtained using the attribute "plotGradientColor" where you can globally add a gradient color to the entire plot of chart by specifying the second color as this attribute. The plot gradient properties can be controlled using the following attributes: plotFillAngle,plotFillRatio and plotFillAlpha

Eg.<chart plotGradientColor='333333' plotFillRatio='80,20' plotFillAlpha='95,100' plotFillAngle='45'>

 

2. You can use "useRoundEdges" attribute for rounded edges and glass effect gradients

Eg. <chart useRoundEdges='1' ...>

 

3. You can remove gradient color by using plotGradientColor=' ' for solid fills.

Eg.<chart plotGradientColor=' ' ...>

For more details, you may please refer to the documentation link: http://docs.fusioncharts.com/charts/contents/AttDesc/DataPlot.html

 

Hope this helps :-)

Edited by Haritha

Share this post


Link to post
Share on other sites

Thank you for your help

 

Everything you explained worked perfectly but only for 2D bars. All those settings are completely ignored when I use 3D bars. It uses its default gradient color no matter what I put.

My main objective is to have my 3D bar charts use plain non-gradient colors like image 4.

 

Do you have an idea how can I do that with 3D bar ?

post-30845-0-33128900-1362715528_thumb.png

Share this post


Link to post
Share on other sites

Hi,

 

For Multi-series Bar 3D chart, you need to use the attribute "use3DLighting" which can be set to 0 or 1 to use advanced gradients and shadow effects or not.

 

Eg. <chart .. use3DLighting='0' ..>

 

For more information, you may please refer to the documentation link:http://docs.fusionch...SS/MSBar3D.html

post-37797-0-24004900-1362729295_thumb.png

Edited by Haritha

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
Sign in to follow this