jqplot changes the color of graph on mouse hover

Shrinath picture Shrinath · Oct 27, 2010 · Viewed 11.1k times · Source

jqPlot changes the color of the fill when mouse hovers... I want to remove that effect.. How ??

Here are the options used:

var options={
    series: [{
            neighborThreshold: -1,
            shadowAngle:0,
            shadowOffset:2.5,
            shadowAlpha:.05,
            shadowDepth:5
        }],
    seriesDefaults: {
        color: '#224',
        fill: true,        // fill under the line,
        fillAndStroke: true,       // *stroke a line at top of fill area.
        fillColor: '#66CCCC',       // *custom fill color for filled lines (default is line color).
        fillAlpha: 0.2,       // *custom alpha to apply to fillColor.
        markerRenderer: $.jqplot.MarkerRenderer,    // renderer to use to draw the data
        // point markers.
        markerOptions: {
            show: false,             // wether to show data point markers.
            style: 'filledCircle',  // circle, diamond, square, filledCircle.
            // filledDiamond or filledSquare.
            lineWidth: 2,       // width of the stroke drawing the marker.
            size: 9,            // size (diameter, edge length, etc.) of the marker.
            color: '#FFFF00',    // color of marker, set to color of line by default.
            shadow: true,       // wether to draw shadow on marker or not.
            shadowAngle: 45,    // angle of the shadow.  Clockwise from x axis.
            shadowOffset: 1,    // offset from the line of the shadow,
            shadowDepth: 3,     // Number of strokes to make when drawing shadow.  Each stroke
            // offset by shadowOffset from the last.
            shadowAlpha: 0.07   // Opacity of the shadow
        },
        trendline: {
            show: false,         // show the trend line
            color: '#666666',   // CSS color spec for the trend line.
            label: '',          // label for the trend line.
            type: 'linear',     // 'linear', 'exponential' or 'exp'
            shadow: true,       // show the trend line shadow.
            lineWidth: 1.5,     // width of the trend line.
            shadowAngle: 45,    // angle of the shadow.  Clockwise from x axis.
            shadowOffset: 1.5,  // offset from the line of the shadow.
            shadowDepth: 3,     // Number of strokes to make when drawing shadow.
            // Each stroke offset by shadowOffset from the last.
            shadowAlpha: 0.07   // Opacity of the shadow
        }
    },
    grid: {
        drawGridLines: true,        // wether to draw lines across the grid or not.
        gridLineColor: '#d0d0d0',    // *Color of the grid lines.
        background: '#ffffff',      // CSS color spec for background color of grid.
        borderColor: '#ffffff',     // CSS color spec for border around grid.
        borderWidth: 2.0,           // pixel width of border around grid.
        shadow: true,               // draw a shadow for grid.
        shadowAngle: 45,            // angle of the shadow.  Clockwise from x axis.
        shadowOffset: 1.5,          // offset from the line of the shadow.
        shadowWidth: 3,             // width of the stroke for the shadow.
        shadowDepth: 3,             // Number of strokes to make when drawing shadow.
        // Each stroke offset by shadowOffset from the last.
        shadowAlpha: 0.07,           // Opacity of the shadow
        renderer: $.jqplot.CanvasGridRenderer,  // renderer to use to draw the grid.
        rendererOptions: {}         // options to pass to the renderer.  Note, the default
        // CanvasGridRenderer takes no additional options.
    },
    axes: {
        xaxis: {
            renderer:$.jqplot.DateAxisRenderer,
            rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
            tickOptions:{
                formatString:'%b %#d,%y'

            }
        },
        yaxis: {      
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
            borderColor:'#808080',
            renderer: $.jqplot.LogAxisRenderer,
            autoscale:true,
            min:0,
            tickOptions:{formatString:'$%.2f'}
        }
    },
    highlighter: {
        show:true,
        sizeAdjust: 7.5
    },
    cursor:{zoom:true, showTooltip:true},
    legend:{show:false}
};

Answer

Sean Reifschneider picture Sean Reifschneider · Nov 6, 2010

There was a change in jqueryplot version 0.9.7-546 and later that added a few new properties for series:

seriesDefaults: {
    rendererOptions: {
        highlightMouseOver: true,
        highlightMouseDown: false,
        highlightColor: null,
    },
},

If you set highlightMouseOver to false, this goes away.

More details are available in the source code for the line renderer