javascriptfusionchartsdata-representation

How to disable hover property in fusion charts of water fall chart


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.

enter image description here

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.


Solution

  • 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..