I am trying to use water fall chart of fusioncharts API. I want to disable hovering property of chart. Here you can see the on hovering it shows "Variable Costs, $-156K" on the "Variable Costs" column.
I am using some following configuration-
{
"chart": {
"caption": "Total Profit Calculation",
"subcaption": "Last month",
"yAxisname": "Amount (In USD)",
"numberprefix": "$",
"connectordashed": "1",
"sumlabel": "Total {br} Profit",
"positiveColor": "#6baa01",
"negativeColor": "#e44a00",
"paletteColors": "#0075c2,#1aaf5d,#f2c500",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineDashed": "1",
"divLineDashLen": "1",
"usePlotGradientColor": "0",
"showplotborder": "0",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"showAlternateHGridColor": "0"
},
"data": [
{
"label": "Online sales",
"value": "420000"
},
{
"label": "Store Sales",
"value": "710000"
},
{
"label": "Total Sales",
"issum": "1"
},
{
"label": "Fixed Costs",
"value": "-250000"
},
{
"label": "Variable Costs",
"value": "-156000"
},
{
"label": "COGS",
"value": "-310000"
},
{
"label": "Promotion Costs",
"value": "-86000"
},
{
"label": "Total Costs",
"issum": "1",
"cumulative": "0"
}
]
}
You can also check the data and configuration at the following link. Waterfall Chart
Please suggest fusioncharts API way(If possible) to disable on-hover property. Other way solutions are also welcome.
Just disable the hover event by adding css rule to the elements.
Jquery Solution
$('div#chart-container-1 rect').css('pointer-events','none');
CSS solution
div#chart-container-1 rect {
pointer-events: none !important;
}
Note: chart-container-1
was the id of the parent div which wraps the chart in the link you provied, you can change it to match your div.
!important
is used in the css because the elements have inline styles for pointer-events
and it takes priority in the rule, So override the inline property priority I have used !important
Also note pointer-events:none
will remove all the mouse events including click, hover, mousein, mouseout etc..