jquery - Customize tool tip in highchart -
i want customize tooltip functionality in highchart. have bar chart , on hover tooltip showing 1 value right now, wanted show 3 value.
below code :
$(function () { $('#container').highcharts({ chart: { type: 'bar' }, title: { text: '' }, subtitle: { }, xaxis: { categories: ['question\'s'], title: { text: '' } }, yaxis: { min: 0, title: { text: 'average scores', }, labels: { overflow: 'justify' } }, tooltip: { valuesuffix: '' }, plotoptions: { bar: { datalabels: { enabled: true } } }, legend: { layout: 'vertical', align: 'right', verticalalign: 'top', x: 10, y: -10, floating: true, borderwidth: 1, backgroundcolor: ((highcharts.theme && highcharts.theme.legendbackgroundcolor) || '#ffffff'), shadow: true }, credits: { enabled: false }, series: [{ name: 'my issue', data: [5.4] // want add value here display }, { name: 'my knowledge', data: [8.2] // want add value here display }, { name: 'my friendliness', data: [7] // want add value here display }, { name: 'my time', data: [6] // want add value here display }, { name: 'z score', data: [9] // want add value here display } ] }); });
js fiddle : http://jsfiddle.net/bu5fs1lj/2/
you can use chart.tooltip.options.formatter
like:
chart.tooltip.options.formatter = function() { var xyarr=[]; $.each(this.points,function(){ xyarr.push('serie: ' + this.series.name + ', ' +'x: ' + this.x + ', y: ' +this.y); }); return xyarr.join('<br/>'); }
here's fiddle
here more info on formating tooltips
Comments
Post a Comment