CODEWITHSUNDEEP
javascripthighcharts
Echchama Nayak
Echchama Nayak

Reputation: 933

Additional data in pointFormat of tooltip in highcarts

I have the following js script, where my intention is to display an additional bit of information for each point. The following code contains a point a z dimension which I want displayed.

$(function () {
$('#container').highcharts({

    chart: {
        type: 'boxplot'
    },

    title: {
        text: 'Highcharts Box Plot Example'
    },

    legend: {
        enabled: false
    },

    xAxis: {
        categories: ['1', '2', '3', '4', '5'],
        title: {
            text: 'Experiment No.'
        }
    },

    yAxis: {
        title: {
            text: 'Observations'
        },
        plotLines: [{
            value: 932,
            color: 'red',
            width: 1,
            label: {
                text: 'Theoretical mean: 932',
                align: 'center',
                style: {
                    color: 'gray'
                }
            }
        }]
    },

    series: [{
        name: 'Observations',
        data: [
            [760, 801, 848, 895, 965],
            [733, 853, 939, 980, 1080],
            [714, 762, 817, 870, 918],
            [724, 802, 806, 871, 950],
            [834, 836, 864, 882, 910]
        ],
        tooltip: {
            headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
    }, {
        name: 'Outlier',
        color: Highcharts.getOptions().colors[0],
        type: 'scatter',
        data: [ // x, y positions where 0 is the first category
            [0, 644, 766],
            [4, 718],
            [4, 951],
            [4, 969]
        ],
        marker: {
            fillColor: 'white',
            lineWidth: 1,
            lineColor: Highcharts.getOptions().colors[0]
        },
        tooltip: {
            pointFormat: 'Observation: {point.z}'
        }
    }]

});
});

The fiddle is here. The code is not displaying the 'z'. Can anybody help me with this?

Upvotes: 0

Views: 86

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

I think that the best idea is to use keys array in case of your chart. This will give you possibility to add new parameters inside your data points. Here you can find more information about keys parameter: http://api.highcharts.com/highcharts#plotOptions.boxplot.keys

{
  name: 'Outlier',
  color: Highcharts.getOptions().colors[0],
  type: 'scatter',
  keys: ['x', 'y', 'z'],
  data: [ // x, y positions where 0 is the first category
    [0, 644, 766],
    [4, 718],
    [4, 951],
    [4, 969]
  ],
  marker: {
    fillColor: 'white',
    lineWidth: 1,
    lineColor: Highcharts.getOptions().colors[0]
  },
  tooltip: {
    pointFormat: 'Observation: {point.z}'
  }
}

And here you can see an example how your chart can looks using keys: http://jsfiddle.net/uejv2Lyh/2/

Best regards.

Upvotes: 1

Related Questions