Highchart : Json Array For ToolTip

Question

I have a Json Array like below:

[{"label":"08\/09\/2015 03:15:49 AM","y":0.6,"y1":0.3,"y2":"0.3(XYZ)","y3":"0.6(XYZ)"},
 {"label":"03\/09\/2015 04:23:04 AM","y":0.2,"y1":0.4,"y2":0.4,"y3":0.2},
 {"label":"02\/09\/2015 12:50:56 AM","y":0.4,"y1":0.4,"y2(XYZ)":0.4,"y3":0.4}]

And My javascript code in HighChart as below:

    for (var i = 0; i < length; i++) {
        dataXAxis.push(obj[i].label);
        dataPointsLeft.push(obj[i].y);
        dataPointsRight.push(obj[i].y1);
        dataPointsLeft1.push(obj[i].y2);
        dataPointsRight1.push(obj[i].y3);
    }

     $('#xyz').highcharts({
            title: {
                text: "Demo",
                x: -20 //center
            },
            xAxis: {
                categories: dataXAxis
            },
            tooltip: {
                useHTML: true,
                shared: true
            },
            series: [{
                    name: "X",
                    data: dataPointsRight,
                    color: '#FF0000'
                }, {
                    name: "Y",
                    data: dataPointsLeft,
                    color: '#0000FF'
                }]
        });

Now my question is that i want to display "dataPointsLeft1" array as in ToolTip. Right now my ToolTip display same as dataPointsLeft data but i want the data on tooltip from "dataPointsLeft1" array. Please advice As soon As possible.

Thank you.

Nishith Kant Chaturvedi · Accepted Answer · 2015-09-09 12:07:07Z

3

Use like this while pushing:

    dataPointsLeft.push({y: obj[i].y, custom: obj[i].y1}); 
    dataPointsRight.push({y: obj[i].y1, custom: obj[i].y3});

and in tooltip you can use

 tooltip: {              
     formatter: function () { 
          var series = this.series;
         return this.point.custom;
      }
  }

See the fiddle at https://jsfiddle.net/Nishith/gjezx1kq/

edited Sep 9, 2015 at 12:07

answered Sep 9, 2015 at 7:28

Nishith Kant Chaturvedi

4,7892 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Chetan Nakum Over a year ago

What i need to do if i do the mouse hover on same point then it's display both values at same time? For Example, If i do the mouse hover on point of "X" then it's display for both "X" and "Y" values at same time. And also if i do the mouse hover on point of "Y" then it's also displays both "X" and "Y" values of same points at same time. Please Advice ASAP.

Nishith Kant Chaturvedi Over a year ago

@ChetanNakum both values ? means Y and Y1 ?

Chetan Nakum Over a year ago

No, It's Y1 and Y3. For Ex., If i do the mouse over on point of "X" then it's display like : X : 0.6 (XYZ) Y : 0.3 And also if i do the mouse over on point of "Y" then it's also display like : X : 0.6 (XYZ) Y : 0.3

Nishith Kant Chaturvedi Over a year ago

use return this.y +" and"+this.point.custom; see updated fiddle at jsfiddle.net/Nishith/gjezx1kq/1

Chetan Nakum Over a year ago

Thank you for reply but i want the result like : X : 0.6 (XYZ) Y : 0.3 On any point of Mouse Hover ("X" or "Y"). Please Advice ASAP.

|

Collectives™ on Stack Overflow

Highchart : Json Array For ToolTip

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related