How To Make The Background Transparent?

[fxbird]

Hello, I'm new to FusionCharts. How to make the below background marked with a red rectangle transparent? Currently all I can do is to make outer background transparent , but the central part isn't.

 

And how to customize font color?

my code :

 

</p><p> FusionCharts.setCurrentRenderer('javascript');
                                           var chart = new FusionCharts("../content/charts/MultiAxisLine.swf", "ChartId", "740", "231", "0", "0");
                                           chart.setDataXML("<chart  bgAlpha='0,0' caption='' showBorder='0' lineThickness='1' showValues='0' formatNumberScale='0' labelDisplay='ROTATE' slantLabels='1' rotateValues='1'  borderThickness='0' alternateHGridColor='FCB541' alternateHGridAlpha='20' divLineColor='FCB541' divLineAlpha='50' canvasBorderColor='666666' baseFontColor='3E3E3F'><categories><category label='Oct10'/><category label='Nov10'/><category label='Dec10'/><category label='Jan11'/><category label='Feb11'/><category label='Mar11'/><category label='Apr11'/><category label='May11'/><category label='Jun11'/><category label='Jul11'/><category label='Aug11'/><category label='Sep11'/></categories><axis title='MAPE' titlePos='left' tickWidth='10' divlineisdashed='1' numberSuffix='%' color='1D8BD1'> <dataset seriesName='MAPE %' color='1D8BD1' anchorBorderColor='1D8BD1' anchorBgColor='1D8BD1'><set  value='83'/><set  value='68'/><set  value='63'/><set  value='68'/><set  value='81'/><set  value='95'/><set  value='67'/><set  value='72'/><set  value='86'/><set  value='69'/><set  value='86'/><set  value='69'/></dataset></axis><axis title='MAD' titlePos='left' tickWidth='10' divlineisdashed='1' color='F1683C'> <dataset seriesName='MAD' color='F1683C' anchorBorderColor='F1683C' anchorBgColor='F1683C'> <set  value='5'/><set  value='4'/><set  value='3'/><set  value='4'/><set  value='7'/><set  value='9'/><set  value='6'/><set  value='4'/><set  value='4'/><set  value='7'/><set  value='7'/><set  value='4'/></dataset></axis><axis title='RMSE'  titlepos='RIGHT' axisOnLeft='0'  tickWidth='10' divlineisdashed='1' color='2AD62A'> <dataset seriesName='RMSE' color='2AD62A' anchorBorderColor='2AD62A' anchorBgColor='2AD62A'><set  value='11'/><set  value='10'/><set  value='10'/><set  value='13'/><set  value='20'/><set  value='26'/><set  value='18'/><set  value='10'/><set  value='10'/><set  value='24'/><set  value='23'/><set  value='15'/> </dataset> </axis></chart>");
                                           chart.setTransparent(true)
                                           chart.render("chartdiv1");</p><p>

 

 

 

 

Edited October 19, 2012 by fxbird

[Guest Bindhu]

Hi,

 

A warm welcome to the FusionCharts Forum

 

In order to render the chart canvas transparent, please use the setTransparent(true) method.

 

Ref. Code:

myChart.setDataXML("<chart bgAlpha='0,0'><set value='213' /></chart>");
myChart.setTransparent(true);

 

Makes the chart background ready to become transparent. You will need to set bgAlpha canvasBgAlpha etc. attributes of the <chart> element to finalize the transparency. The function accepts a Boolean parameter. Only when true is passed, the chart is prepared to have transparent background.

 

And to customize the font color and other properties, please use styles.

 

For details, please refer to the link below,

http://docs.fusionch...les/Styles.html

 

Hope this helps!

Edited October 20, 2012 by Bindhu

[FusionCharts Support]

How to make the below background marked with a red rectangle transparent?

 

 

Hi,

 

Can you please try canvasBgAlpha='0' and legendBgAlpha='0' in <chart> element and let us know?

[Guest Bindhu]

Hi,

 

Apologies for a redundant reply.

 

You have it answered precisely from Sudipto.

 

Let us know if it was helpful.

[fxbird]

Hi,

 

A warm welcome to the FusionCharts Forum

 

In order to render the chart canvas transparent, please use the setTransparent(true) method.

 

Ref. Code:

myChart.setDataXML("<chart bgAlpha='0,0'><set value='213' /></chart>");
myChart.setTransparent(true);

 

Makes the chart background ready to become transparent. You will need to set bgAlpha canvasBgAlpha etc. attributes of the <chart> element to finalize the transparency. The function accepts a Boolean parameter. Only when true is passed, the chart is prepared to have transparent background.

 

And to customize the font color and other properties, please use styles.

 

For details, please refer to the link below,

http://docs.fusionch...les/Styles.html

 

Hope this helps!

 

sorry for being late to reply, I've been working ot recently. It worked.thanks

Edited November 5, 2012 by fxbird

[Guest Bindhu]

[lucy_^^]

I try like that but it is not working. 

 var revenueChart = new FusionCharts ({
                "type" : "column2d",
                "renderAt" : "chartContainer",
                "width" : "500",
                "height" : "300",
                "dataFormat" : "json",
                "dataSource" : {
                "chart": {
                "caption": "Monthly Revenue",
                "subCaption": "Last yearddd",
                "xAxisName": "Month",
                "yAxisName": "Amount (In USD)",
                "bgalpha": "0,0",
                "canvasBgAlpha": "0",
                "legendBgAlpha":"0"

                },
                "data":[{
                "label":"Jan",
                "value":"420000"
                },
                {
                "label":"Feb",
                "value":"910000"
                },
                {
                "label":"Mar",
                "value":"720000"
                },
                {
                "label":"Apr",
                "value":"550000"
                },
                {
                "label":"May",
                "value":"810000"
                },
                {
                "label":"Jun",
                "value":"510000"
                },
                {
                "label":"Jul",
                "value":"680000"
                },
                {
                "label":"Aug",
                "value":"620000"
                },
                {
                "label":"Sep",
                "value":"610000"
                },
                {
                "label":"Oct",
                "value":"490000"
                },
                {
                "label":"Nov",
                "value":"530000"
                },
                {
                "label":"Dec",
                "value":"330000"
                }
                ]


                }
                }) ;
                revenueChart.setTransparent(true);
                revenueChart.render() ;

This is my chart. What is wrong? Please held me. 

I want background and canvas are transparent. please view attack file.

 

 

[Swarnam]

Hey,

 

Can you please try using "containerBackgroundOpacity"  element as 0 and pass it to FusionCharts constructor?

 

Ref. Code:

FusionCharts.ready(function () {
var myChart = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
containerBackgroundOpacity : '0'
});

Hope this helps.