$(function () { var tempDb = { 'tokyo': [ {'feellike': -1, 'detail': 'Cloudy'}, {'feellike': -2, 'detail': 'Sunny'}, {'feellike': -6, 'detail': 'Cloudy'}, {'feellike': -7, 'detail': 'Sunny'}, {'feellike': -8, 'detail': 'Foggy'}, ], 'newyork': [ {'feellike': -2, 'detail': 'Sunny'}, {'feellike': -3, 'detail': 'Foggy'}, {'feellike': -6, 'detail': 'Cloudy'}, {'feellike': -7, 'detail': 'Sunny'}, {'feellike': -8, 'detail': 'Foggy'}, ], 'berlin': [ {'feellike': -2, 'detail': 'Sunny'}, {'feellike': -3, 'detail': 'Foggy'}, {'feellike': -4, 'detail': 'Funny'}, {'feellike': -5, 'detail': 'Rainy'}, {'feellike': -6, 'detail': 'Cloudy'}, ], 'london': [ {'feellike': -4, 'detail': 'Funny'}, {'feellike': -5, 'detail': 'Rainy'}, {'feellike': -6, 'detail': 'Cloudy'}, {'feellike': -7, 'detail': 'Sunny'}, {'feellike': -8, 'detail': 'Foggy'}, ] }; $('#container').highcharts({ title: { text: 'Monthly Average Temperature', x: -20 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { categories: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Temperature (°C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { var i = this.series.data.indexOf( this.point ), data = tempDb[this.series.options._id][i]; /* * You definitly will want to check for * null / undefine here before output */ return '<b>' + this.series.name + '</b>' + '<br />Country: ' + this.series.options.country + '<br />Month: ' + this.x + '<br />Temperature: ' + this.y +'°C' + '<br />Feel like: ' + data.feellike +'°C' + '<br />Detail: ' + data.detail; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: 'Tokyo', data: [14.5, 18.2, 21.5, 25.2, 26.5], country: 'Japan', _id: 'tokyo' }, { name: 'New York', data: [11.3, 17.0, 22.0, 24.8, 24.1], country: 'USA', _id: 'newyork' }, { name: 'Berlin', data: [8.4, 13.5, 17.0, 18.6, 17.9], country: 'German', _id: 'berlin' }, { name: 'London', data: [8.5, 11.9, 15.2, 17.0, 16.6], country: 'UK', _id: 'london' }] }); });
<script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>