user1801810 user1801810 - 5 months ago 44
jQuery Question

Highcharts Scatter Chart Data Point Hover

I have the following current version

Highcharts
(http://www.highcharts.com) chart. My "default" data point is blue. Notice the two data points colored red, one toward the bottom left ("Item 1") and the other at the top right ("Item 2"). They are as intended when not hovering. My problem is that when hovered they do not appear the same. Item 1 stays red whereas Item 2 turns blue. When hovered I want them to stay red.

Chart

Item 1...

Item 1

Item 2...

Item 2

I thought that when hovering maybe there was a z-index problem but couldn't find a solution there. I then turned to Highchart's API regarding hovering but I'm not sure how this could be a problem since I'm not setting any hover colors and one is correct and the other is not.

The data I'm passing to the chart is as follows...

0 Object { name=1, x=-4, y=-0.8, color="red" }
1 Object { name=2, x=9.5, y=9.5, color="red" }
2 Object { name=3, x=-1.37, y=1.64 }
3 Object { name=4, x=-0.7, y=-2.8 }


Your help is appreciated. Thank you.

=== UPDATE ===

https://jsfiddle.net/edzasxg5/

Answer

You need to explicitly set the 'fillColor' for the hover property, otherwise it picks up a default.

  { id: '1', x: -4, y: -0.8, color: 'red', marker: { states: { hover: { fillColor: 'red' } } } }, 
  { id: '2', x: 9.5, y: 9.5, color: 'red', marker: { states: { hover: { fillColor: 'red' } } } }, 
  { id: '3', x: -1.37, y: 1.64 }, 
  { id: '4', x: -0.7, y: -2.8 }

https://jsfiddle.net/strince/edzasxg5/1/

UPDATE: There is an even simpler solution to set 'fillColor: {}'.

    marker: {
      radius: 2,
      states: {
        hover: {
          enabled: true, 
          fillColor: {},
          lineColor: 'rgb(100,100,100)', 
        }
      }
    },
Comments