CODEWITHSUNDEEP
javascriptgoogle-visualization
ProCx
ProCx

Reputation: 309

Remove highlight from bars google chart

I have a working Google Combochart. Now i want to remove the highlight on specific moments when i hover over an item in the legend. I used the option "enableInteractivity", but this also removes things like the tooltips.

I want to keep the tooltips of course. I can't seem to find anything on the internet about how this is possible. I know i can disable the tooltips only, but not a method to disable this highlighting (what i want)..

Anybody has an idea how i can achieve this?

Thanks in advance!

Upvotes: 1

Views: 2505

Answers (2)

broccoli2000
broccoli2000

Reputation: 1823

Following this approach for styling on hover, you can get rid of the grey outline highlighting on hover by applying this css style.

#mychart svg g g g g rect {
    stroke-width:0px;
}

Upvotes: 3

jmac
jmac

Reputation: 7128

There is no built-in method to do this. The highlights are drawn in to the SVG and the tooltips are also drawn by the google internal charts API code. So either you'd have to find a way to stop the highlights from being drawn in to the SVG (while still allowing the tooltips), or to disable interactivity and implement your own tooltips like this answer does. Answer quoted below (by jeffery_the_wind):

I ended up making a custom tool-tip pop-up that is working pretty well.

Assuming your div for the bubble chart is defined like this:

<div id="bubble_chart_div"></div>

Then I used the JavaScript below. Please note that I left out that stuff about how to set up your google chart data and loading the google charts package. This code just shows how to get your custom toolip popup.

    var mouseX;
    var mouseY;
    $(document).mousemove( function(e) {
        mouseX = e.pageX; 
        mouseY = e.pageY;
    });

    /*
     *
     *instantiate and render the chart to the screen
     *
     */
    var bubble_chart = new google.visualization.BubbleChart(document.getElementById('bubble_chart_div'));
    bubble_chart.draw(customer_product_grid_data_table, options);

    /*
     * These functions handle the custom tooltip display
     */
    function handler1(e){
        var x = mouseX;
        var y = mouseY - 130;
        var a = 1;
        var b = 2;
        $('#custom_tooltip').html('<div>Value of A is'+a+' and value of B is'+b+'</div>').css({'top':y,'left':x}).fadeIn('slow');
    }
    function handler2(e){
        $('#custom_tooltip').fadeOut('fast');
    }

    /*
     *  Attach the functions that handle the tool-tip pop-up
     *  handler1 is called when the mouse moves into the bubble, and handler 2 is called when mouse moves out of bubble
     */
    google.visualization.events.addListener(bubble_chart, 'onmouseover', handler1);
    google.visualization.events.addListener(bubble_chart, 'onmouseout', handler2);

Upvotes: 1

Related Questions