How to show different text on mouse over/tool tip on chart

Hi,

i am working with chart,every thing is fine.

Requirements:

How can i show different text on mouse over / tool tip , i have text array on "tooltiptext" which i want to show on tool tip accordingly

My code:

function onsuccessBindchart(response) {
//alert('yes');
if (response.d.length > 0) {
var dataarray = [];
var datapending = [];
var datareject = [];
var datalabel = [];//['Approved', 'Pending', 'Rejected'];
var mycolor = ['#5cb85c', '#f0ad4e', '#9C27B0'];
var tooltiptext=[];
for (var i = 0; i < response.d.length; i++) {
console.log(response.d[i].DepartName);
// dataarray.push({ name:response.d[i].DepartName + '( ' + response.d[i].totaldocs + ' )', data: [response.d[i].pendingdocs, response.d[i].approveddocs, response.d[i].rejecteddocs] });
dataarray.push(response.d[i].approveddocs);
datapending.push(response.d[i].pendingdocs);
datareject.push(response.d[i].rejecteddocs);
datalabel.push(response.d[i].DepartName + ' ( ' + response.d[i].totaldocs + ' )');
tooltiptext.push(response.d[i].ShowDepartNamechart);
}
new Vue({
el: '#app',
components: {
apexchart: VueApexCharts,
},
data: {
series: dataarray,
series: [{
name: 'Approved',
data: dataarray,
//colors: mycolor[0]
}, {
name: 'Pending',
data: datapending,
// colors: mycolor[1]
}, {
name: 'Rejected',
data: datareject,
// colors: mycolor[2]
}],
chartOptions: {
colors: mycolor,
chart: {
type: 'bar',
height: 350,
stacked: true,
},
plotOptions: {
bar: {
horizontal: false,
vertical:true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: 'Publication Grid', align: 'center', style: {
fontSize: '14px',
fontWeight: 'bold',
fontFamily: undefined,
color: '#263238'
},
},
xaxis: {
categories: datalabel,
labels: {
formatter: function (val) {
return val
}
}
},
yaxis: {
title: {
text: ''
},
},
//tooltip: {
// y: {
// formatter: function (val) {
// return val;
// }
// }
//}
tooltip: {
enabled: true,
y: {
formatter: function (val) {
return val
},
title: {
formatter: function (tooltiptext) {
return ''
}
}
}
}
,
fill: {
opacity: 1,
//colors: ['##5cb85c', '##f0ad4e', '#9C27B0'],
},
legend: {
position: 'top',
horizontalAlign: 'center',
offsetX: 40
},
},
},
})
}
}

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Laxmidhar Sahoo6y ago
Hi the bellow code may help you .May use this or ciustom that link is bellow
tooltips: {
      callbacks: {
        label(tooltipItem, data) {
          // Get the dataset label.
          const label = data.datasets[tooltipItem.datasetIndex].label;

          // Format the y-axis value.
          const value = numeral(tooltipItem.yLabel).format('$0,0');

          return `${label}: ${value}`;
        }
      }
    }
https://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips
0