I'm using angular-chart.js to show charts. I want to show tooltip in stacked bar charts with labels with each bar.
Here I'm passing data in chart-option but it's not working.
Is there anyway I can pass data with $scope variable to html markup values?
$scope.optionsData = {
type: "HorizontalBar",
responsive: true, // set to false to remove responsiveness. Default responsive value is true.
maintainAspectRatio: false,
legend: { display: false },
data: {
datasets: [{
data: [2000, 4000, 6000, 8000, 10000, 12000, 14000],
labels: ["Label 11", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7"],
backgroundColor: ["#73BFB8", "#73BFB8", "#73BFB8", "#73BFB8", "#73BFB8", "#73BFB8", "#73BFB8"],
}, {
data: [2200, 400, 600, 800, 1000, 1200, 1400],
labels: ["Label 21", "Label 22", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7"],
backgroundColor: ["#47cf73", "#47cf73", "#47cf73", "#47cf73", "#47cf73", "#47cf73", "#47cf73"]
}]
},
tooltips:{
callbacks: {
label: function(tooltipItem, data) {
console.log(data);
var datasetData = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var datasetLabel = data.datasets[tooltipItem.datasetIndex].labels[tooltipItem.index];
return datasetLabel +':'+ datasetData;
},
},
},
scales: {
xAxes: [{
id: 'x-axis-1',
display: true,
scaleOverride: true,
scaleStartValue: 0,
staked:true,
//To FIX y-axis label getting truncated
ticks:{
userCallback: function(value, index, values) {
return formatNumber(value);
},
fontSize: 12
}
} ],
yAxes: [{
id: 'y-axis-1',
display: true,
scaleOverride: true,
stacked: true,
position: 'left'
}]
}
}<canvas id="mixed-chart"
class="chart chart-horizontal-bar"
chart-data="top25skuData"
chart-colors="colours"
chart-labels="top25skuLabels"
chart-options="optionsData"
></canvas>