series hover and tooltip dont align

[Erinnjoy]

Good Morning coding geniuses!

So I'm creating a line chart that shows each major US city's homicide rate and because there are so many series (i guess), when I hover over a series (which I love, because the series gets bigger) the tooltip is wrong. I wanted the series to change color when hovered over, so I I put in this mouseover code and I'm not sure what to do now.

Please help me.

Thank you!

[pawel_d]

Hi Erinnjoy,

What exactly is the problem? Could you maybe post your code or create a JSFiddle demo?

Regards.

[sdo]

Hi. To change color on hover you can add this to the code:

Code: Select all

Highcharts.extend(options, Highcharts.merge(options, {
  plotOptions: {
    line: {
      events: {
        mouseOver: function(e) {
          this.origColor = this.color;
          this.update({color: 'red'});
        },
        mouseOut: function (e) {
          this.update({color: this.origColor});
        }
      }
    }
  }
}));

Regards

[Erinnjoy]

This is the code. You can tell when you hover over them that the tooltip will say the same city when the hover goes over different series.

var options = {
"tooltip": {
"date": null,
"animation": false,
"followPointer": true,
"shape": "square"
},
"xAxis": {
"labels": {
"step": 5,
"autoRotation": [
-45
]
},
"minorGridLineWidth": 0,
"minorTickLength": 0,
"lineWidth": 0,
"minorGridLineColor": "rgba(224, 224, 224, 0.02)",
"minorTickInterval": "auto",
"id": null,
"minorTickColor": "rgba(160, 160, 160, 0.01)",
"tickLength": 0,
"type": "category"
},
"title": {
"text": "Homicide Rates for US Cities",
"style": {
"fontSize": "20px"
}
},
"chart": {
"plotBorderColor": "rgba(192, 192, 192, 0.02)",
"backgroundColor": "rgba(255, 255, 255, 0.04)",
"zoomType": "xy",
"width": null,
"height": null,
"borderColor": "rgba(19, 96, 187, 0.02)"
},
"plotOptions": {
"series": {
"allowPointSelect": true,
"cursor": "pointer"
},
"area": {
"states": {
"hover": {
"enabled": false

}
},
"colors": [
"#7cb5ec",
"#434348",
"#90ed7d",
"#f7a35c",
"#8085e9",
"#f15c80",
"#e4d354",
"#2b908f",
"#f45b5b",
"#91e8e1"
],
"credits": {
"enabled": false
},
"legend": {
"enabled": false
},
"yAxis": {
"title": {
"style": {
"color": "rgba(112, 112, 112, 0.74)"
},
"text": null
}
},
"series": [
{
"index": 0,
"name": "Albuquerque N.M.",
"data": [
[
"1985",
11.76302545
],
[
"1986",
13.45429384
],
[
"1987",
12.91169477
],
[
"1988",
12.95693011
],
[
"1989",
10.65485797
],
[
"1990",
8.837228645
],
[
"1991",
12.97221403
],
[
"1992",
10.46001659
],
[
"1993",
12.27638564
],
[
"1994",
10.79351526
],
[
"1995",
12.62764644
],
[
"1996",
16.40358442
],
[
"1997",
11.36819735
],
[
"1998",
8.759117176
],
[
"1999",
11.42397464
],
[
"2000",
7.356104564
],
[
"2001",
7.537164873
],
[
"2002",
11.14783339
],
[
"2003",
10.87967506
],
[
"2004",
8.558176816
],
[
"2005",
10.80241566
],
[
"2006",
6.78703676
],
[
"2007",
9.159579361
],
[
"2008",
7.204283136
],
[
"2009",
10.55337369
],
[
"2010",
7.694393352
],
[
"2011",
6.884544379
],
[
"2012",
7.404945781
],
[
"2013",
6.628864225
],
[
"2014",
5.367936243
],
[
"2015",
8.409766781
]
]
},
{
"index": 1,
"name": "Arlington Texas",
"data": [
[
"1985",
8.221768502
],
[
"1986",
9.860783663
],
[
"1987",
7.160702067
],
[
"1988",
5.164632596
],
[
"1989",
4.234091364
],
[
"1990",
3.056690139
],
[
"1991",
9.726680284
],
[
"1992",
5.881552877
],
[
"1993",
2.488128075
],
[
"1994",
6.277288769
],
[
"1995",
3.078775605
],
[
"1996",
5.692625037
],
[
"1997",
3.954040865
],
[
"1998",
4.24908808
],
[
"1999",
3.538001351
],
[
"2000",
4.204595623
],
[
"2001",
4.404962925
],
[
"2002",
4.025429211
],
[
"2003",
2.532464792
],
[
"2004",
3.878438651
],
[
"2005",
6.568504023
],
[
"2006",
3.752486022
],
[
"2007",
3.493938018
],
[
"2008",
6.119690503
],
[
"2009",
3.165358319
],
[
"2010",
4.378307675
],
[
"2011",
5.896099998
],
[
"2012",
4.481999499
],
[
"2013",
4.752287038
],
[
"2014",
3.394468583
],
[
"2015",
2.088903743
]
]
},
{
"index": 2,
"name": "Atlanta",
"data": [
[
"1985",
33.24056541
],
[
"1986",
41.73987976
],
[
"1987",
48.14479722
],
[
"1988",
48.76459286
],
[
"1989",
57.68121515
],
[
"1990",
58.62691204
],
[
"1991",
50.85775953
],
[
"1992",
48.18972147
],
[
"1993",
50.38758728
],
[
"1994",
46.4489645
],
[
"1995",
45.50659475
],
[
"1996",
47.44349746
],
[
"1997",
35.64088247
],
[
"1998",
35.96757608
],
[
"1999",
34.76857019
],
[
"2000",
32.17487766
],
[
"2001",
33.52785743
],
[
"2002",
34.90289189
],
[
"2003",
34.33532153
],
[
"2004",
25.80999195
],
[
"2005",
20.89786517
],
[
"2006",
22.64287655
],
[
"2007",
25.94059804
],
[
"2008",
19.69922104
],
[
"2009",
14.46913643
],
[
"2010",
22.14269898
],
[
"2011",
20.67994727
],
[
"2012",
18.99135321
],
[
"2013",
18.40273159
],
[
"2014",
20.46821594
],
[
"2015",
20.68830429
]
]
},
{
"index": 3,
"name": "Aurora Colo.",
"data": [
[
"1985",
5.04966344
],
[
"1986",
5.494807407
],
[
"1987",
9.093182387
],
[
"1988",
6.836703068
],
[
"1989",
3.185003185
],
[
"1990",
3.601932437
],
[
"1991",
4.831554443
],
[
"1992",
6.839389755
],
[
"1993",
7.704472649
],
[
"1994",
5.932769852
],
[
"1995",
7.005063104
],
[
"1996",
4.195782857
],
[
"1997",
6.367828233
],
[
"1998",
10.66808908
],
[
"1999",
4.297915902
],
[
"2000",
7.9596806
],
[
"2001",
5.988530203
],
[
"2002",
5.525167136
],
[
"2003",
6.232039608
],
[
"2004",
4.426963614
],
[
"2005",
9.463040069
],
[
"2006",
5.943438279
],
[
"2007",
4.551054707
],
[
"2008",
5.690386093
],
[
"2009",
5.863944151
],
[
"2010",
7.382843502
],
[
"2011",
3.628227611
],
[
"2012",
5.045228994
],
[
"2013",
5.82268752
],
[
"2014",
2.564482487
],
[
"2015",
6.838619966
]
]
},
{
"index": 4,
"name": "Austin Texas",
"data": [
[
"1985",
12.79310353
],
[
"1986",
11.588045
],
[
"1987",
8.305966239
],
[
"1988",
9.199376154
],
[
"1989",
6.611119049
],
[
"1990",
9.879258282
],
[
"1991",
10.30368535
],
[
"1992",
7.645022987
],
[
"1993",
7.370253656
],
[
"1994",
7.231138455
],
[
"1995",
8.783805717
],
[
"1996",
7.442081997
],
[
"1997",
7.323016424
],
[
"1998",
5.71675617
],
[
"1999",
3.747396898
],
[
"2000",
4.873873298
],
[
"2001",
3.872147642
],
[
"2002",
3.645462711
],
[
"2003",
3.957093383
],
[
"2004",
3.805074799
],
[
"2005",
3.751700891
],
[
"2006",
2.81764352
],
[
"2007",
4.1851686
],
[
"2008",
3.052280252
],
[
"2009",
2.860969869
],
[
"2010",
4.807753135
],
[
"2011",
3.3456337
],
[
"2012",
3.721930938
],
[
"2013",
3.026141204
],
[
"2014",
3.54012063
],
[
"2015",
2.544461703
]
]
},
{
"index": 5,
"name": "Baltimore",
"data": [
[
"1985",
27.62298388
],
[
"1986",
30.63013852
],
[
"1987",
29.54661632
],
[
"1988",
30.63308373
],
[
"1989",
34.33192948
],
[
"1990",
41.43942914
],
[
"1991",
40.63633289
],
[
"1992",
44.34049796
],
[
"1993",
48.16035625
],
[
"1994",
43.42649963
],
[
"1995",
45.21144776
],
[
"1996",
46.06069404
],
[
"1997",
43.35820408
],
[
"1998",
47.26290406
],
[
"1999",
46.88066795
],
[
"2000",
40.08268397
],
[
"2001",
38.73939585
],
[
"2002",
37.70334472
],
[
"2003",
41.88943052
],
[
"2004",
43.51397413
],
[
"2005",
41.95932909
],
[
"2006",
43.29031489
],
[
"2007",
45.17514982
],
[
"2008",
36.87658479
],
[
"2009",
37.25998231
],
[
"2010",
35.91207821
],
[
"2011",
31.42707642
],
[
"2012",
34.53380956
],
[
"2013",
37.4194398
],
[
"2014",
33.84051335
],
[
"2015",
55.37
]
]
},
{
"index": 6,
"name": "Boston",
"data": [
[
"1985",
15.17977565
],
[
"1986",
18.2892736
],
[
"1987",
13.19714803
],
[
"1988",
16.03666706
],
[
"1989",
17.0661702
],
[
"1990",
24.9006152
],
[
"1991",
19.73957733
],
[
"1992",
12.74392394
],
[
"1993",
17.69368263
],
[
"1994",
15.26788858
],
[
"1995",
17.43188401
],
[
"1996",
10.67836581
],
[
"1997",
7.747412724
],
[
"1998",
6.075431847
],
[
"1999",
5.557427951
],
[
"2000",
6.619807482
],
[
"2001",
10.98076845
],
[
"2002",
10.05962001
],
[
"2003",
6.612467044
],
[
"2004",
10.51566403
],
[
"2005",
12.86141909
],
[
"2006",
13.33587011
],
[
"2007",
10.98241968
],
[
"2008",
10.25700413
],
[
"2009",
8.009970812
],
[
"2010",
11.82006302
],
[
"2011",
10.13906614
],
[
"2012",
9.038322487
],
[
"2013",
6.057791329
],
[
"2014",
8.098861117
],
[
"2015",
5.959539312
]
]
},
{
"index": 7,
"name": "Buffalo N.Y.",
"data": [
[
"1985",
9.12059784
],
[
"1986",
10.30366369
],
[
"1987",
10.74321566
],
[
"1988",
13.28333035
],
[
"1989",
11.77279149
],
[
"1990",
11.27625921
],
[
"1991",
15.18127966
],
[
"1992",
22.99782731
],
[
"1993",
23.39505318
],
[
"1994",
27.74746111
],
[
"1995",
19.84666848
],
[
"1996",
17.87777984
],
[
"1997",
14.72419345
],
[
"1998",
12.63575335
],
[
"1999",
10.62879274
],
[
"2000",
13.32659031
],
[
"2001",
21.82907155
],
[
"2002",
14.55451342
],
[
"2003",
22.55479949
],
[
"2004",
17.85920642
],
[
"2005",
19.76919465
],
[
"2006",
26.382026
],
[
"2007",
19.72012037
],
[
"2008",
13.68905135
],
[
"2009",
22.33347602
],
[
"2010",
21.04779763
],
[
"2011",
13.71512168
],
[
"2012",
18.29031299
],
[
"2013",
18.16151382
],
[
"2014",
23.21810703
],
[
"2015",
15.86570647
]
]
},
{
"index": 8,
"name": "Charlotte-Mecklenburg N.C.",
"data": [
[
"1985",
16.68205785
],
[
"1986",
15.59892515
],
[
"1987",
14.58232846
],
[
"1988",
12.41592261
],
[
"1989",
19.59142486
],
[
"1990",
23.48876328
],
[
"1991",
28.31468042
],
[
"1992",
24.20827923
],
[
"1993",
28.85101995
],
[
"1994",
16.50474938
],
[
"1995",
16.35590448
],
[
"1996",
12.81426535
],
[
"1997",
10.49812724
],
[
"1998",
10.95977258
],
[
"1999",
13.8858812
],
[
"2000",
11.98446813
],
[
"2001",
10.36987457
],
[
"2002",
10.35766405
],
[
"2003",
9.880195149
],
[
"2004",
8.913962135
],
[
"2005",
12.55312927
],
[
"2006",
11.86734878
],
[
"2007",
10.36423466
],
[
"2008",
10.93877056
],
[
"2009",
7.457811929
],
[
"2010",
7.825117601
],
[
"2011",
7.093294557
],
[
"2012",
6.431631754
],
[
"2013",
7.0436155
],
[
"2014",
5.484784973
],
[
"2015",
7.001853157
]
]
},
{
"index": 9,
"type": "line",
"name": "Chicago",
"data": [
[
"1985",
22.20857991
],
[
"1986",
25.10734723
],
[
"1987",
22.82713202
],
[
"1988",
22.04335193
],
[
"1989",
24.83050337
],
[
"1990",
30.57053747
],
[
"1991",
32.90084432
],
[
"1992",
33.88752378
],
[
"1993",
30.9071795
],
[
"1994",
33.47018763
],
[
"1995",
29.96569582
],
[
"1996",
28.64801
],
[
"1997",
27.36950495
],
[
"1998",
25.55511489
],
[
"1999",
22.7221811
],
[
"2000",
21.78855365
],
[
"2001",
22.88102315
],
[
"2002",
22.0535759
],
[
"2003",
20.63225795
],
[
"2004",
15.54073789
],
[
"2005",
15.59106312
],
[
"2006",
16.37625639
],
[
"2007",
15.68455839
],
[
"2008",
18.02563457
],
[
"2009",
16.07902737
],
[
"2010",
16.02612853
],
[
"2011",
15.94104108
],
[
"2012",
18.46120673
],
[
"2013",
15.29100323
],
[
"2014",
15.2342719
],
[
"2015",
17.5469445
]
]
},
{
"index": 10,
"name": "Cincinnati",
"data": [
[
"1985",
12.15565724
],
[
"1986",
12.41625774
],
[
"1987",
18.56910263
],
[
"1988",
12.44100449
],
[
"1989",
12.087611
],
[
"1990",
13.46005933
],
[
"1991",
14.70896675
],
[
"1992",
13.25373877
],
[
"1993",
10.63855905
],
[
"1994",
10.35554962
],
[
"1995",
13.89857929
],
[
"1996",
8.877619244
],
[
"1997",
null
],
[
"1998",
null
],
[
"1999",
8.288560307
],
[
"2000",
6.640807764
],
[
"2001",
16.87356876
],
[
"2002",
21.00380169
],
[
"2003",
22.20187051
],
[
"2004",
20.12546973
],
[
"2005",
25.13586092
],
[
"2006",
29.11641389
],
[
"2007",
18.65289962
],
[
"2008",
22.54906677
],
[
"2009",
16.48839217
],
[
"2010",
22.90001785
],
[
"2011",
20.52766187
],
[
"2012",
15.86744271
],
[
"2013",
23.60948562
],
[
"2014",
20.15648148
],
[
"2015",
22.11
]
]
},
{
"index": 11,
"name": "Cleveland",
"data": [
[
"1985",
23.9871385
],
[
"1986",
22.6880178
],
[
"1987",
26.45159996
],
[
"1988",
25.16000477
],
[
"1989",
27.4858467
],
[
"1990",
33.22679662
],
[
"1991",
34.32058961
],
[
"1992",
30.57526286
],
[
"1993",
33.02157278
],
[
"1994",
26.0751042
],
[
"1995",
26.05671071
],
[
"1996",
20.76407774
],
[
"1997",
15.50468765
],
[
"1998",
16.34659628
],
[
"1999",
15.66570195
],
[
"2000",
14.84104406
],
[
"2001",
16.06633519
],
[
"2002",
16.62254765
],
[
"2003",
15.58343971
],
[
"2004",
17.08994938
],
[
"2005",
23.97114746
],
[
"2006",
17.00684028
],
[
"2007",
20.45975339
],
[
"2008",
12.6888329
],
[
"2009",
19.33659182
],
[
"2010",
20.41253481
],
[
"2011",
18.63482294
],
[
"2012",
21.58560215
],
[
"2013",
14.90309136
],
[
"2014",
16.20974901
],
[
"2015",
"NaN"
]
]
},
{
"index": 12,
"name": "Columbus Ohio",
"data": [
[
"1985",
12.72799912
],
[
"1986",
13.77811929
],
[
"1987",
14.97005988
],
[
"1988",
11.72615851
],
[
"1989",
15.72489128
],
[
"1990",
14.06203094
],
[
"1991",
21.61203885
],
[
"1992",
17.57310724
],
[
"1993",
16.23042881
],
[
"1994",
15.43543358
],
[
"1995",
12.05519086
],
[
"1996",
13.89979962
],
[
"1997",
13.09761779
],
[
"1998",
11.79625151
],
[
"1999",
10.54349489
],
[
"2000",
9.417122296
],
[
"2001",
11.36446542
],
[
"2002",
11.31697448
],
[
"2003",
15.01065205
],
[
"2004",
10.68623435
],
[
"2005",
14.10323293
],
[
"2006",
11.61921244
],
[
"2007",
10.73397275
],
[
"2008",
13.29987086
],
[
"2009",
10.79812639
],
[
"2010",
12.07065015
],
[
"2011",
11.04609013
],
[
"2012",
8.904116461
],
[
"2013",
9.554561446
],
[
"2014",
10.23096709
],
[
"2015",
9.08
]
]
},
{
"index": 13,
"name": "Dallas",
"data": [
[
"1985",
30.17643691
],
[
"1986",
34.13714672
],
[
"1987",
31.98187628
],
[
"1988",
35.95927759
],
[
"1989",
35.22964509
],
[
"1990",
44.39469766
],
[
"1991",
48.62101089
],
[
"1992",
36.97822012
],
[
"1993",
30.40420326
],
[
"1994",
27.76008138
],
[
"1995",
26.48528723
],
[
"1996",
20.46040629
],
[
"1997",
19.39083101
],
[
"1998",
23.17927699
],
[
"1999",
17.50068262
],
[
"2000",
19.434956
],
[
"2001",
19.74410001
],
[
"2002",
15.78759562
],
[
"2003",
18.36947351
],
[
"2004",
20.1853635
],
[
"2005",
16.41871962
],
[
"2006",
14.98129741
],
[
"2007",
16.14069521
],
[
"2008",
13.32064999
],
[
"2009",
12.86556415
],
[
"2010",
12.35582093
],
[
"2011",
10.87471106
],
[
"2012",
12.40386002
],
[
"2013",
11.39428612
],
[
"2014",
9.11665865
],
[
"2015",
10.68849635
]
]
},
{
"index": 14,
"name": "Denver",
"data": [
[
"1985",
14.03377462
],
[
"1986",
17.54639672
],
[
"1987",
15.50451495
],
[
"1988",
13.78469898
],
[
"1989",
11.12034437
],
[
"1990",
14.32817947
],
[
"1991",
18.35367532
],
[
"1992",
19.28260587
],
[
"1993",
14.84745246
],
[
"1994",
15.84863575
],
[
"1995",
16.01287356
],
[
"1996",
12.39771882
],
[
"1997",
13.12303511
],
[
"1998",
10.01289897
],
[
"1999",
12.36205516
],
[
"2000",
5.769549759
],
[
"2001",
7.899545864
],
[
"2002",
8.776382926
],
[
"2003",
11.1326106
],
[
"2004",
15.43406991
],
[
"2005",
10.4507645
],
[
"2006",
8.97152859
],
[
"2007",
8.19690715
],
[
"2008",
6.746716457
],
[
"2009",
5.788185487
],
[
"2010",
4.665438101
],
[
"2011",
6.059494409
],
[
"2012",
6.204806338
],
[
"2013",
6.317596355
],
[
"2014",
4.659180916
],
[
"2015",
7.965696405
]
]
},
{
"index": 15,
"name": "Detroit",
"data": [
[
"1985",
58.22584476
],
[
"1986",
59.07304546
],
[
"1987",
62.84796564
],
[
"1988",
57.88091439
],
[
"1989",
60.02314354
],
[
"1990",
56.61621792
],
[
"1991",
59.34884188
],
[
"1992",
56.98535046
],
[
"1993",
56.76125569
],
[
"1994",
52.92076656
],
[
"1995",
47.62874049
],
[
"1996",
42.7018285
],
[
"1997",
45.91682886
],
[
"1998",
43.00103202
],
[
"1999",
42.56322947
],
[

[Erinnjoy]

Hi. To change color on hover you can add this to the code:

Code: Select all

Highcharts.extend(options, Highcharts.merge(options, {
  plotOptions: {
    line: {
      events: {
        mouseOver: function(e) {
          this.origColor = this.color;
          this.update({color: 'red'});
        },
        mouseOut: function (e) {
          this.update({color: this.origColor});
        }
      }
    }
  }
}));

Regards

yes, this is PERFECT! But how do I also make the series width larger and shadowed when I mouse over it? The same settings as the hover?

[pawel_d]

Hi Erinnjoy,

Look at the demo I created from your code. I hope this is what you had in mind. I added mouseOver and mouseOut events and options for a shadow of line series:

Code: Select all

shadow: {
    offsetX: 5,
    offsetY: 5,
    width: 10
}

Example:
https://jsfiddle.net/brucd5ua/2/

Regards.

[Erinnjoy]

Hi Erinnjoy,

Look at the demo I created from your code. I hope this is what you had in mind. I added mouseOver and mouseOut events and options for a shadow of line series:

Code: Select all

shadow: {
    offsetX: 5,
    offsetY: 5,
    width: 10
}

Example:
https://jsfiddle.net/brucd5ua/2/

Regards.

Thank you! Do you see how in the example the tooltip is still different from the line that is highlighted? Like the tooltip doesn't match the hover series...thats my problem this is what it gives me when I press 'share'

If you hover over the series you can see that the tooltip doesn't align.

<div id='highcharts-ebelixy'><script src='//cloud.highcharts.com/inject/ebelixy/17' defer='defer'></script></div>

[pawel_d]

Hi Erinnjoy,

Answer to your question can be found here: http://forum.highcharts.com/highcharts- ... es-t36416/.

Regards.