Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Mouseover not firing with multiple dotted-lines chart #31

Closed
vladoa opened this Issue · 4 comments

2 participants

@vladoa

The charts are awesome. However I cannot figure out why the mouseover event is not firing when there are multiple lines in the chart. For example, on the red and green dotted-line, when I point the mouse cursor at the middle of the chart the tooltip is not appearing. It is only appearing on the blue line's dots and on the last dot of the other lines.

no tooltip on mouseover

My code is:

var opts = {
    paddingLeft : 50,
    paddingTop : 20,
    paddingRight : 10,
    axisPaddingLeft : 25,
    tickHintX: 9, // How many ticks to show horizontally

    dataFormatX : function(x) {

        // This turns converts the timestamps coming from
        // ajax.php into a proper JavaScript Date object

        return Date.create(x);
    },

    tickFormatX : function(x) {

        // Provide formatting for the x-axis tick labels.
        // This uses sugar's format method of the date object. 

        return x.format('{MM}/{dd}');
    },

    "mouseover": function (d, i) {
        var pos = $(this).offset();

        tt.text( d.provider_name + ': ' + d.x.format('{Month} {ord} {year}') + ': ' + d.y).css({

            top: topOffset + pos.top,
            left: pos.left

        }).show();
    },

    "mouseout": function (x) {
        tt.hide();
    }
};

// Create a new xChart instance, passing the type
// of chart a data set and the options object

chart = new xChart('line-dotted', data, '#chart' , opts);
@vladoa

It turned out that the "fill" elements from above lines represented layers over the lower lines and were preventing the mouseover event to fire. My workaround was to comment out the line in the source code for the fills:

fills.enter().append("path").attr("class","fill").style("opacity",0).attr("d",area.y0(y));

Now there are no fills but at least the tooltips are working properly.
This is only a workaround.

@paularmstrong

I recommend 1 of the 2 following CSS solutions instead of changing any source JS code:

  1. Make the fill not appear: .line .fill { display: none; }
  2. Disable pointer events: .line .fill { pointer-events: none; }
@vladoa

Agreed. I spent a lot of time figuring out what is preventing the mouseover event so altering the js code was the first thing that gave me the results I needed. Anyway what you propose is a better way to do it. I will close this issue and hope that someone else will find it useful too. Keep on with the good work.

@vladoa vladoa closed this
@paularmstrong
  1. Disable pointer events: .line .fill { pointer-events: none; }

I think this should be made as a default in the provided CSS/LESS.

@paularmstrong paularmstrong reopened this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.