Set Additional Data to Highcharts Series

Set Additional Data to highcharts series

Yes, if you set up the series object like the following, where each data point is a hash, then you can pass extra values:

new Highcharts.Chart( {
    ...,
    series: [ {
        name: 'Foo',
        data: [
            {
                y : 3,
                myData : 'firstPoint'
            },
            {
                y : 7,
                myData : 'secondPoint'
            },
            {
                y : 1,
                myData : 'thirdPoint'
            }
        ]
    } ]
} );

In your tooltip you can access it via the "point" attribute of the object passed in:

tooltip: {
    formatter: function() {
        return 'Extra data: <b>' + this.point.myData + '</b>';
    }
}

Full example here: https://jsfiddle.net/burwelldesigns/jeoL5y7s/

Add additional data to a Highcharts series for use in formatters

Yes this is possible, the extra configuration properties is located under the options property (this.series refers to the series instance, not the configuration objects). See the reference here and scroll down to properties section.

So instead use this line in the formatter:

if (this.series.options.hasCustomFlag) { ... }

Full example on jsfiddle

Highcharts: Passing a secondary data variable in the tooltip

Try this.points[index].point.options.tt

// Data gathered from http://populationpyramid.net/germany/2015/
// Age categoriesvar categories = [  'column 1', 'column 2', 'column 3', 'column 4'];
Highcharts.chart('container', {  chart: {    type: 'bar',    followTouchMove: true,    spacingTop: 10,    spacingLeft: 5,    spacingRight: 5  },
  xAxis: [{      reversed: true,      tickPosition: 'inside',      startOnTick: true,      endOnTick: true,      categories: categories,      labels: {        enabled: false      }    },    { // mirror axis on right side         opposite: true,      reversed: true,      linkedTo: 0,      tickPosition: 'inside',      categories: [        'NIL'      ],      labels: {        step: 1,        enabled: false      }    }  ],
  plotOptions: {    series: {      stacking: 'normal',      borderColor: '#fafafa'    }  },
  tooltip: {    shared: true,    formatter: function() {      var points = this.points;      var series = this.series;      var pointsLength = points.length;      var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
      for (index = 0; index < pointsLength; index++) {        tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].point.options.tt + '<br/>';      }
      return tooltipMarkup;    }  },
  series: [{    data: [{      y: -2.2,      tt: "1"    }, {      y: -2.6,      tt: "2"    }, {      y: -1.3,      tt: "3"    }, {      y: -5.2,      tt: "4"    }]  }, {    color: '#FF0000',    dataLabels: {      enabled: true,      inside: true,      align: 'left',      format: '{x}'    },    data: [{      y: 1.3,      tt: "5"    }, {      y: 2.3,      tt: "6"    }, {      y: 4.3,      tt: "7"    }, {      y: 1.7,      tt: "8"    }]  }]});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script src="https://code.highcharts.com/highcharts.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Highcharts Additional data in Tooltip

Instead of using a numerical array, you will have to define your Targeted array as an array of objects:

{
   "type": "bar",
   "color": "#FF5733",
   "name": "Targeted",
   "data": [{
     y: 11,
     USMFalse: 3,
     sentNotAnswered: 8
   }, {
     y: 0,
     USMFalse: 0,
     sentNotAnswered: 0
   }, {
     y: 0,
     USMFalse: 0,
     sentNotAnswered: 0
   }, {
     y: 0,
     USMFalse: 0,
     sentNotAnswered: 0
   }, {
     y: 13,
     USMFalse: 4,
     sentNotAnswered: 9
   }, {
     y: 0,
     USMFalse: 0,
     sentNotAnswered: 0
   }, {
     y: 0,
     USMFalse: 0,
     sentNotAnswered: 0
   }]
 }

Then, in your formatter function you will need to refer to the current point:

if (this.series.name == 'Targeted') {
  text = '<b>' + this.x + '</b> <br>' 
    + this.series.name + ': ' + this.y + '<br>' 
    + this.point.USMFalse + '<br>' 
    + this.point.sentNotAnswered;
}

Here's a jsfiddle: https://jsfiddle.net/d15wad74/

Setting additional data to Highchart series via %= #{} % works for integers but not Strings

I'm not familiar with Highcharts, but here is a rough example of how you might use the JSON module to convert your Ruby data to be JavaScript-friendly (this was run from the interpreter).

require 'json'

chart_data = { 
  series: [{ 
    data: @show.map do |i| 
      { x: i.year, y: i.maturity, myData: i.extraData } 
    end
  }] 
}
chart_data.to_json

# => "{\"series\":[{\"data\":[{\"x\":0,\"y\":0,\"myData\":\"origin\"},{\"x\":1,\"y\":1,\"myData\":\"I'm linear... so far\"}]}]}"

How to show additional data in tooltip of PIE Chart-Highcharts

The values you have in your additionalData property are numbers, but they include the euro symbol so you probably want to be using strings, otherwise you will have invalid json.

[{"name": "apples", "y": 20,"additionalData": "33$"},{"name": "oranges", "y": 40,"additionalData": "20$"},{"name": "bananas", "y": 50,"additionalData": "10$"}]

https://jsfiddle.net/0sacqubp/

Adding new data to highchart tooltip

You can attach the additional data with each point in the series.data as follows

series: [{
    name: 'Series 1',
    data: [{
        y: 2,
        players: ['a', 'b']},
    {
        y: 3,
        players: ['a', 'b', 'c']},
    {
        y: 2,
        players: ['x', 'y']},
    {
        y: 4,
        players: ['a', 'b', 'c', 'd']}
    ]
}]

Now in the tooltip.formatter you can consume the additional data as follows

formatter: function() {
    var result = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';
    $.each(this.points, function(i, datum) {
        result += '<br />' + datum.y + ' players online';
        $.each(datum.point.players, function() {
            result += '<br/>' + this;
        });
    });
    return result;
}

Complex tooltip | Highchart & Highstock @ jsFiddle

---

Related Topics