highcharts - Show tooltip in column chart when hovering crosshair line -
using highstock ("stockchart"), tooltips each bar in column chart show if hovering "crosshair line" above actual bar. see example:
$('#container').highcharts('stockchart', { chart: { alignticks: false }, rangeselector: { selected: 1 }, title: { text: 'aapl stock volume' }, series: [{ type: 'column', name: 'aapl stock volume', data: data, datagrouping: { units: [[ 'week', // unit name [1] // allowed multiples ], [ 'month', [1, 2, 3, 4, 6] ]] } }] }); how achieve same result using highcharts column chart? example of similar highcharts example column chart can found here:
$('#container').highcharts({ chart: { type: 'column' }, title: { text: 'world\'s largest cities per 2014' }, subtitle: { text: 'source: <a href="http://en.wikipedia.org/wiki/list_of_cities_proper_by_population">wikipedia</a>' }, xaxis: { type: 'category', labels: { rotation: -45, style: { fontsize: '13px', fontfamily: 'verdana, sans-serif' } } }, yaxis: { min: 0, title: { text: 'population (millions)' } }, legend: { enabled: false }, tooltip: { pointformat: 'population in 2008: <b>{point.y:.1f} millions</b>' }, series: [{ name: 'population', data: [ ['shanghai', 23.7], ['lagos', 16.1], ['instanbul', 14.2], ['karachi', 14.0], ['mumbai', 12.5], ['moscow', 12.1], ['são paulo', 11.8], ['beijing', 11.7], ['guangzhou', 11.1], ['delhi', 11.1], ['shenzhen', 10.5], ['seoul', 10.4], ['jakarta', 10.0], ['kinshasa', 9.3], ['tianjin', 9.3], ['tokyo', 9.0], ['cairo', 8.9], ['dhaka', 8.9], ['mexico city', 8.9], ['lima', 8.9] ], datalabels: { enabled: true, rotation: -90, color: '#ffffff', align: 'right', format: '{point.y:.1f}', // 1 decimal y: 10, // 10 pixels down top style: { fontsize: '13px', fontfamily: 'verdana, sans-serif' } } }] }); as can see in second example, tooltips show when actual bars hovered. realize can achieve setting "shared" true tooltip, in example:
$('#container').highcharts({ chart: { type: 'column' }, title: { text: 'monthly average rainfall' }, subtitle: { text: 'source: worldclimate.com' }, xaxis: { categories: [ 'jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec' ], crosshair: true }, yaxis: { min: 0, title: { text: 'rainfall (mm)' } }, tooltip: { headerformat: '<span style="font-size:10px">{point.key}</span><table>', pointformat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerformat: '</table>', shared: true, usehtml: true }, plotoptions: { column: { pointpadding: 0.2, borderwidth: 0 } }, series: [{ name: 'tokyo', data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, { name: 'new york', data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] }, { name: 'london', data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] }, { name: 'berlin', data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] }] }); column jsfiddle example using shared tooltip
the problem solution don't want shared tooltip, want 1 individual tooltip each bar.
thank you.
there no need of using more 1 series when using shared tooltip. tooltip can 'shared itself' , achieve result need (jsfiddle). adding tooltip configs of third example in second trick.
tooltip: { headerformat: '<span style="font-size:10px">{point.key}</span><table>', pointformat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerformat: '</table>', shared: true, usehtml: true },
Comments
Post a Comment