console error when changing line color in a HighCharts scatterplot

Question

I've adopted this solution to change the line color when hovering a series in a HighCharts scatterplot (JSFiddle demo here):

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'scatter',
        },
        plotOptions: {
            scatter: {
                lineWidth:1,
                marker: {
                    radius: 1,
                    symbol:'circle',
                    fillColor: '#800000',
                    states: {
                        hover: {
                            enabled: true,
                            radius:0,
                            radiusPlus:2,
                            lineColor: '#ff0000',
                            fillColor: '#ff0000'
                        }
                    }
                },
                events: {
                    mouseOver: function () {

                        this.chart.series[this.index].update({
                            color: 'red'
                        });
                    },
                    mouseOut: function () {

                        this.chart.series[this.index].update({
                            color: "#b0b0b0"
                        });                           
                    }
                }
            }
        },
        series: [{
            name: 'A',
            color: "#b0b0b0",
            data: [[38,42],[39,39],[35,45],[35,54],{x:36,y:35,marker:{radius:8,symbol:'circle'}}
            ]
        }, {
            name: 'B',
            color: "#b0b0b0",
            data: [[46,56],[47,67],[48,69],[50,55],{x:52,y:57,marker:{radius:8,symbol:'circle'}}
            ]
        }]
    });
});

The script works but running the web console I see that every hovering of a series causes a TypeError: g.firePointEvent is not a function error.

In another one of my scripts the error is TypeError: hoverPoint.firePointEvent is not a function.

Is this a bug of HighCharts or is it possible to avoid it?

The issue is caused by the update which is called before your action. As a result you try to refer to updated point, before end of it. The solution is use attr() method and change SVG color on path. Demo: http://jsfiddle.net/53ob1pu2/. It is correct for you? — Sebastian Bochan, Jun 28 '17 at 11:13

score 1 · Accepted Answer · answered Jul 03 '17 at 09:21

1

The issue is caused by the update which is called before your action. As a result you try to refer to updated point, before end of it. The solution is use attr() method and change SVG color on path.

events: {
      mouseOver: function() {

        this.chart.series[this.index].graph.attr({
            stroke: 'red'
        });
      },
      mouseOut: function() {
                    this.chart.series[this.index].graph.attr({
            stroke: '#b0b0b0'
        });
      }
    }

Demo:

http://jsfiddle.net/53ob1pu2.

answered Jul 03 '17 at 09:21

Sebastian Bochan

37,348
3
49
75

Do you know which other keys/properties one can access via this.graph.attr besides stroke? Is it possible to get/set the marker properties? – tic Jul 07 '17 at 22:44
Markers are separated SVG elements, so you cannot apply them by update. Summarising, your goal on mouseOver is change color and set markers? – Sebastian Bochan Jul 10 '17 at 09:42
I noticed that setting this.graph.attr is much faster than using this.update. So I wonder if I could use this.graph.attr also to change markers appearance because in my case this.update "hangs" the chart for a while. – tic Jul 11 '17 at 16:12
Do you mean change symbols of markers? From what kind of marker to which one? – Sebastian Bochan Jul 12 '17 at 09:07
Same symbol, different size and color. – tic Jul 12 '17 at 19:24
red dots only or other? – Sebastian Bochan Jul 13 '17 at 10:36
Does this make difference? For example, consider that the red points in the JSFiddle example have to become white circles surrounded by a thin red line. – tic Jul 13 '17 at 18:50
1

You can manipualte it, the simple demo: http://jsfiddle.net/9zz37dew/. Border line is stroke, stroke-width is size of a line. – Sebastian Bochan Jul 14 '17 at 08:44
1

Thank you. I've made some experiments with properties x and y too. – tic Jul 14 '17 at 16:10

console error when changing line color in a HighCharts scatterplot

1 Answers1