How To Disable Hover Color Change In Doughnut Chart

[mduman]

Hello,

 

I am new to fusion charts.. I wanted to get the below design from fusion charts by using javascript rendering.

 

 

After some work and html tweaks, i used doughnut chart and got this:

 

 

 

However there is an issue i could not get manage to solve. When mouse is over dataplots (the yellow and gray slices) they change color and gets highligted as below:

 

 

Below is the chart configuration i used:

 

 

"chart": {

 

"bgColor": "#000000",

"bgAlpha": "0",

"showBorder": "0",

"plotBorderColor": "#FFFFFF",

"showpercentagevalues": "0",

"showPercentInToolTip": "0",

"showToolTip": "0",

"showvalues": "0",

"showlabels": "0",

"showlegend": "0",

"enableSmartLabels": "0",

"enableRotation" : "1",

 

"radius3D": "0",

"pieRadius": "56",

"startingAngle": "90",

"slicingDistance": "0",

 

"captionPadding": "0",

"xAxisNamePadding": "0",

"yAxisNamePadding": "0",

"yAxisValuesPadding": "0",

"labelPadding": "0",

"valuePadding": "0",

"chartLeftMargin": "0",

"chartRightMargin": "0",

"chartTopMargin": "0",

"chartBottomMargin": "0",

"canvasPadding": "0",

 

"animation": "0"

 

}

[mduman]

As I forgot to mention, i want to prevent highlighting (color change on hover)..

 

Can you help me?

 

Thanks

[Guest Sashibhusan]

Hi,

 

Welcome to FusionCharts Forum.

 

Please note that the "Doughnut2D" chart of FusionCharts XT does not support the feature of highlighting the color of the data plot on mouse hover property.

 

Could you please let us know the chart type which you are using and provide the complete code for creating the chart, as per your screen shot, so that we can better investigate your issue?

 

Awaiting your response.

[mduman]

Hello,

 

here is the related functions of our class.

 

       createChart: function (percentage) {

           if (_.isUndefined(this.chart)) {

               this.chart = new FusionCharts({
                   swfUrl: "/Content/Images/Doughnut2D.swf",
                   id: "mainChartId",
                   width: "180px",
                   height: "180px",
                   bgColor: "e0dfe0",
                   renderAt: "maintest",
                   dataFormat: "json",
                   renderer: "javascript",
                   dataSource: this.createChartData(percentage)
               });
               this.chart.render("maintest");
           }
       },

 

 

       createChartData: function (percentage) {

           var animation = "1";
           if (percentage < 50)
               animation = "0";

           return {

               "chart": {

                   "bgColor": "#000000",
                   "bgAlpha": "0",
                   "showBorder": "0",
                   "plotBorderColor": "#FFFFFF",
                   "showpercentagevalues": "0",
                   "showPercentInToolTip": "0",
                   "showToolTip": "0",
                   "showvalues": "0",
                   "showlabels": "0",
                   "showlegend": "0",
                   "enableSmartLabels": "0",
                   "enableRotation" : "1",

                   "radius3D": "0",
                   "pieRadius": "56",
                   "startingAngle": "90",
                   "slicingDistance": "0",

                   "captionPadding": "0",
                   "xAxisNamePadding": "0",
                   "yAxisNamePadding": "0",
                   "yAxisValuesPadding": "0",
                   "labelPadding": "0",
                   "valuePadding": "0",
                   "chartLeftMargin": "0",
                   "chartRightMargin": "0",
                   "chartTopMargin": "0",
                   "chartBottomMargin": "0",
                   "canvasPadding": "0",

                   "animation": animation

               },
               "data": [
                   {
                       "value": 100 - percentage,
                       "label": "Bos",
                       "color": "E0E0E0"
                   },
                   {
                       "value": percentage,
                       "label": "Dolu",
                       "color": "FFCE15",
                       "fill": "false"
                   }
                   ]
           };
       },

[Guest Sashibhusan]

Hi,

 

We have tested your code and as I have already mentioned, the hover functionality is not supported by FusionCharts doughnut chart and not highlighting by hovering on the slices.

 

So, could you please let us know whether you have done any customization in the code to highlight the code on hovering the Doughnut slices?

 

Awaiting your response.

Edited February 20, 2013 by Sashibhusan

[mduman]

Hello,

 

no customization is made. I use FusionCharts.js script file which is found in company inventory. But can't attach it beacuse of restriction here that says "Error You aren't permitted to upload this kind of file"

 

File starts like this:

 

 

/*!

* FusionCharts JavaScript Library

* Copyright FusionCharts Technologies LLP

* @license License Information at <http://www.fusioncharts.com/license>

*

* @author FusionCharts

* @version 3.2.1-release

*

* Third-party attributions:

* SWFObject v2.2 <http://code.google.com/p/swfobject/>

* JSON v2 <http://www.JSON.org/js.html>

* Firebug Lite 1.3.0 <http://getfirebug.com/firebuglite>

* jQuery 1.4.2 <http://jquery.com/>

*/

 

thank you.

[Guest Sashibhusan]

Hi,

 

As per the commented information of your "FusionCharts.js" file, the version you are using is FusionCharts V3.2.1, which is the older one.

 

Could you please upgrade to latest FusionCharts XT (V3.3.0) and try once again?

 

For more information on "FusionCharts XT version History", please follow the link below:

http://docs.fusioncharts.com/charts/contents/?Introduction/WhatsNew32.html

 

Hope this helps!

[kaanse]

Hi,

 

Simple way to fix that

 

 

edit js file :

 

"pointStateOptionsHover.color = C(pointStateOptionsHover.color || point.options.color).brighten(pointStateOptionsHover.brightness || stateOptionsHover.brightness).get()"

[Swarnam]

Hi,

 

Welcome too FusionCharts Forum.

 

Thanks for sharing your suggestion.