how to pass values to tooltip which not in x and y axis in highcharts

Question

I need to display additional values on the tooltip: the name, the count and another value(android). I saw this in an Example I tried to create similar one but I could not result same

$(function() {
  var hour = 3600 * 1000;
  var options = {
    chart: {
      renderTo: 'container',
      type: 'line',
      options3d: {
        enabled: true,
        alpha: 0,
        beta: 0,
        depth: 0,
        viewDistance: 25
      }
    },
    title: {
      text: ''
    },
    subtitle: {
      text: ''
    },
    legend: {
      enabled: false
    },
    credits: {
      enabled: false
    },

    xAxis: {
      labels: {
        align: 'left',
        style: {
          color: '#423D3C',
          fontWeight: 'normal',
          fontFamily: 'Open Sans'
        }
      },
      showLastLabel: false,
      tickmarkPlacement: 'on',
      tickPosition: 'inside',
      tickWidth: 0,
      tickPixelInterval: 60,
      lineWidth: 2,
      lineColor: '#423D3C',
      maxPadding: 0,
      minPadding: 0,
      gridLineWidth: 0,
      offset: 0,
      startOnTick: true,
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%H:%M'
      },

      endOnTick: true
    },
    yAxis: {
      tickPositioner: function() {

        var maxDeviation = Math.ceil(Math.max(Math.abs(this.dataMax), Math.abs(this.dataMin)));
        var halfMaxDeviation = Math.ceil(maxDeviation / 2);

        return [0, halfMaxDeviation, maxDeviation];
      },
      title: {
        text: "user"
      }
    },
    tooltip: {
      backgroundColor: '#1B1A1A',
      borderColor: '#1B1A1A',
      crosshairs: true,
      shadow: false,
      style: {
        color: 'white',
        fontSize: '12px',
        padding: '8px'
      },
      enabled: true,
      crosshairs: false,
      shared: false,
      snap: 30,
      formatter: function() {
        var s = '<b>' + Highcharts.dateFormat('%H:%M',
          new Date(this.x)) + '</b>';

        $.each(this.points, function() {
          s += '<br/>' + this.series.name + ': ' +
            point.y + 'm' + '<br/>' + this.series.android + ': ' +
            this.series.android + 'm';
          console.log(this.series.android);
        });

        return s;
      },
      shared: true
    },
    plotOptions: {
      line: {
        //dashStyle: 'ShortDot',
        lineWidth: 2
      },
      series: {
        pointStart: 0 * hour,
        pointInterval: hour,
      },
      dataGrouping: {
        enabled: false
      },
      marker: {
        enabled: false,
        states: {
          hover: {
            enabled: true
          }
        },
        symbol: 'circle'
      },
    },
    series: [],
  };
  $.getJSON('data.json', function(list) {
    var newseries;

    $.each(list, function(i, item) {
      newseries = {};
      newseries.name = item.name;
      newseries.data = item.data;
      newseries.android = item.android;
      options.series.push(newseries);
    });
    var chart = new Highcharts.Chart(options);

    console.log(options.series);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>


<div id="container" style="width: 50%;min-width: 310px; height: 400px; margin: 0 auto"></div>

and my data.json has

[
  {
    "name":"Today",
    "data":[17, 5, 27, 0, 28, 0, 27, 0, 25, 0, 27, 28, 26, 0, 0, 0, 60, 0, 46, 0, 0, 0, 0, 0],
    "android":[0, 0, 13, 0, 14, 0, 8, 0, 12, 0, 20, 0, 22, 0, 17, 19, 0, 0, 0, 0, 0, 0, 20, 21],
    "ios":[0, 0, 0, 0, 22, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36, 48, 0, 38, 30]
},
{
    "name":"Yesterday",
    "data":[0, 0, 0, 0, 22, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36, 48, 0, 38, 30],
    "android":[17, 5, 27, 0, 28, 0, 27, 0, 25, 0, 27, 28, 26, 0, 0, 0, 60, 0, 46, 0, 0, 0, 0, 0],
    "ios":[0, 0, 13, 0, 14, 0, 8, 0, 12, 0, 20, 0, 22, 0, 17, 19, 0, 0, 0, 0, 0, 0, 20, 21]
},
{
    "name":"Week_ago",
    "data":[0, 0, 13, 0, 14, 0, 8, 0, 12, 0, 20, 0, 22, 0, 17, 19, 0, 0, 0, 0, 0, 0, 20, 21],
    "android":[0, 0, 0, 0, 22, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36, 48, 0, 38, 30],
    "ios":[17, 5, 27, 0, 28, 0, 27, 0, 25, 0, 27, 28, 26, 0, 0, 0, 60, 0, 46, 0, 0, 0, 0, 0]
  }
]

my result is like

my expected tooltip

I need values in tooltip I don't know why it results in undefined value but in console.log has a value of android also, but when I do console.log(this.series.android) am getting undefined for android values.

Am new to high charts any help would be appreciated

Thanks in advance

score 2 · Accepted Answer · answered Jan 31 '18 at 06:43

Here modified_data is the data object containing additional data need for displaying exta information in tooltip

  var newseries;
  $.each(jsond, function(i, item) {
    var modified_data = [];

    $.each(item.data, function(j) {
      modified_data.push({
        y: item.data[j],
        android: item.android[j]
      })
    })

    newseries = {};
    newseries.name = item.name;
    newseries.data = modified_data;
    //newseries.android = item.android;
    options.series.push(newseries);
  });

Tooltip formatter

  formatter: function() {
    var s = '<b>' + Highcharts.dateFormat('%H:%M',
      new Date(this.x)) + '</b>';
    $.each(this.points, function() {
      //console.log(this)
      s += '<br/>' + this.series.name + ': ' +
        this.y + 'm' + '<br/>' + 'Android' + ': ' +
        this.point.android + 'm';
    });

    return s;
  },

Fiddle Snippet

$(function() {
  var hour = 3600 * 1000;
  var options = {
    chart: {
      renderTo: 'container',
      type: 'line',
      options3d: {
        enabled: true,
        alpha: 0,
        beta: 0,
        depth: 0,
        viewDistance: 25
      }
    },
    title: {
      text: ''
    },
    subtitle: {
      text: ''
    },
    legend: {
      enabled: false
    },
    credits: {
      enabled: false
    },

    xAxis: {
      labels: {
        align: 'left',
        style: {
          color: '#423D3C',
          fontWeight: 'normal',
          fontFamily: 'Open Sans'
        }
      },
      showLastLabel: false,
      tickmarkPlacement: 'on',
      tickPosition: 'inside',
      tickWidth: 0,
      tickPixelInterval: 60,
      lineWidth: 2,
      lineColor: '#423D3C',
      maxPadding: 0,
      minPadding: 0,
      gridLineWidth: 0,
      offset: 0,
      startOnTick: true,
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%H:%M'
      },

      endOnTick: true
    },
    yAxis: {
      tickPositioner: function() {

        var maxDeviation = Math.ceil(Math.max(Math.abs(this.dataMax), Math.abs(this.dataMin)));
        var halfMaxDeviation = Math.ceil(maxDeviation / 2);

        return [0, halfMaxDeviation, maxDeviation];
      },
      title: {
        text: "user"
      }
    },
    tooltip: {
      backgroundColor: '#1B1A1A',
      borderColor: '#1B1A1A',
      crosshairs: true,
      shadow: false,
      style: {
        color: 'white',
        fontSize: '12px',
        padding: '8px'
      },
      enabled: true,
      crosshairs: false,
      shared: false,
      snap: 30,
      formatter: function() {
        var s = '<b>' + Highcharts.dateFormat('%H:%M',
          new Date(this.x)) + '</b>';
        $.each(this.points, function() {
          //console.log(this)
          s += '<br/>' + this.series.name + ': ' +
            this.y + 'm' + '<br/>' + 'Android' + ': ' +
            this.point.android + 'm';
        });

        return s;
      },
      shared: true
    },
    plotOptions: {
      line: {
        //dashStyle: 'ShortDot',
        lineWidth: 2
      },
      series: {
        pointStart: 0 * hour,
        pointInterval: hour,
      },
      dataGrouping: {
        enabled: false
      },
      marker: {
        enabled: false,
        states: {
          hover: {
            enabled: true
          }
        },
        symbol: 'circle'
      },
    },
    series: [],
  };

  var jsond = [{
    "name": "Today",
    "data": [17, 5, 27, 0, 28, 0, 27, 0, 25, 0, 27, 28, 26, 0, 0, 0, 60, 0,
      46, 0, 0, 0, 0, 0
    ],
    "android": [0, 0, 13, 0, 14, 0, 8, 0, 12, 0, 20, 0, 22, 0, 17, 19, 0, 0,
      0, 0, 0, 0, 20, 21
    ]
  }, {
    "name": "Yesterday",
    "data": [0, 0, 0, 0, 22, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36,
      48, 0, 38, 30
    ],
    "android": [17, 5, 27, 0, 28, 0, 27, 0, 25, 0, 27, 28, 26, 0, 0, 0, 60, 0,
      46, 0, 0, 0, 0, 0
    ]
  }, {
    "name": "Week_ago",
    "data": [0, 0, 13, 0, 14, 0, 8, 0, 12, 0, 20, 0, 22, 0, 17, 19, 0, 0, 0,
      0, 0, 0, 20, 21
    ],
    "android": [0, 0, 0, 0, 22, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36,
      48, 0, 38, 30
    ]
  }]

  //$.getJSON('data.json', function(list) {
  var newseries;

  $.each(jsond, function(i, item) {
    var modified_data = [];

    $.each(item.data, function(j) {
      modified_data.push({
        y: item.data[j],
        android: item.android[j]
      })
    })



    newseries = {};
    newseries.name = item.name;
    newseries.data = modified_data;
    //newseries.android = item.android;
    options.series.push(newseries);
  });
  var chart = new Highcharts.Chart(options);

  //console.log(  options.series);
});
//});
/*
  
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container" style="width: 50%;min-width: 310px; height: 400px; margin: 0 auto"></div>

thank you! it works fine , awesome work, i have given +1 but my reputation is less its not show :) — pinky gifty, Jan 31 '18 at 07:14
No problems , just mark it accepted if it helpd. More info how to accept here https://meta.stackexchange.com/a/5235 — Deep 3015, Jan 31 '18 at 07:15

score 1 · Answer 2 · answered Jan 31 '18 at 06:24

1

It is the problem with your data.json file. Check the highcharts documentation. Change your value in the formats mentioned in documentation. For eg:

[
      {
        "name":"Today",
        "data":[[17,0],[5,0], [27,13], [0,0], [28,14], [0,0], [27,8], [0,0], [25,12], [0,0], [27,20], [28,0], [26,22], [0,0], [0,17], [0,19], [60,0], [0,0], [46,0], [0,0], [0,0], [0,0], [0,20], [0,21]]
      }
 ]

and change the tooltip formatter function according to this.

answered Jan 31 '18 at 06:24

sainu

2,686
3
22
41

1

this format of data is for x and y value i have a static x axis value of 24 hour time axis, i need to display addition values to tooltip alone , adding additional tooltip works i can also another array value for ios users, now i have attached my expected output – pinky gifty Jan 31 '18 at 06:34

how to pass values to tooltip which not in x and y axis in highcharts

2 Answers2

Linked