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

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -