How to externally trigger datalabels-plugin (active) - ChartJS - events

Question

I'm playing with this code:
https://jsfiddle.net/netquik/e3jp2k5o/37/
First created a plugin to hightlight Labels (ticks) on x axis when hovering on chart bars (used mousemove for now). Then i tried trigger externally setActiveElements for chart and tooltip. And it seems to work as intended.
expected result
My problem is i can't find a way to "update" datalabels at the same time so it can show me datalabels. In the code you can see i tried manually enable some $context property of $datalabels with no luck. After setActiveElements externally i see in debugging that datalabels trigger itself after chart update and try
display: function (context) {
return context.active; // display labels if active
},
but even if the element in chart is "active" ti return a false context.active.
Could be a problem of interaction modes? Thanks for your help.
trigger result without datalabel
var SCRIPTOBJ = null;
var LABEL = ["Gino", "Samantha", "Vercingetorige"];
var DATA = [5, 28, 500];
var MAX = Math.max(...DATA);
var ctx = $('#stat');
Chart.defaults.font.size = 14;
Chart.register(ChartDataLabels);
var lastLabelH = null;
var stat = new Chart(ctx, {
type: 'bar',
data: {
labels: LABEL,
datasets: [{
minBarLength: 15,
barPercentage: 1,
label: '# VOTES',
data: DATA,
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)',
'rgba(255, 206, 86, 0.5)',
'rgba(75, 192, 192, 0.5)',
'rgba(153, 102, 255, 0.5)',
'rgba(255, 159, 64, 0.5)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
hoverBackgroundColor: [
'rgba(255, 99, 132, 1.0)',
'rgba(54, 162, 235, 1.0)',
'rgba(255, 206, 86, 1.0)',
'rgba(75, 192, 192, 1.0)',
'rgba(153, 102, 255, 1.0)',
'rgba(255, 159, 64, 1.0)'
],
borderWidth: 1
}]
},
plugins: [{
id: 'LabelHighlight',
beforeEvent(c, args, pluginOptions) {
const event = args.event;
if (event.type === 'mouseout') {
if (lastLabelH != null) {
//c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
c.update();
lastLabelH = null;
}
} else if (event.type === 'mousemove') {
if (c._active.length > 0) {
let labelindex = c._active[0].index;
if (c.scales.x._labelItems) {
let label = c.scales.x._labelItems[labelindex];
label.color = "rgba(255, 255, 64, 1)";
}
if (lastLabelH != null && lastLabelH != labelindex) {
if (c.scales.x._labelItems) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
}
}
lastLabelH = labelindex;
} else {
if (lastLabelH != null) {
if (c.scales.x._labelItems) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
}
lastLabelH = null;
}
}
}
}
}],
options: {
responsive: false,
interaction: {
mode: 'index',
intersect: true
},
/* onHover: function (event, elements, c) {
if (elements && elements.length) {
if (c._active.length > 0) {
let labelindex = c._active[0].index;
let label = c.scales.x._labelItems[labelindex];
label.color = "rgba(255, 255, 64, 1)";
lastLabelH = labelindex;
}
} else {
if (lastLabelH != null) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
lastLabelH = null;
}
}
}, */
layout: {
padding: {
top: 50,
left: 0,
right: 0,
bottom: 0
}
},
indexAxis: 'x',
scales: {
x: {
beginAtZero: true,
ticks: {
display: true,
color: 'rgba(255, 159, 64, 1)',
autoSkip: false,
maxRotation: 90,
minRotation: 90,
labelOffset: -8,
textStrokeColor: 'rgba(0, 0, 0, 0.5)',
textStrokeWidth: '2',
font: {
weight: 'bold',
family: 'Arial',
size: 16
},
align: 'start'
}
},
y: {
max: MAX + 1,
beginAtZero: true,
ticks: {
color: 'rgba(255, 159, 64, 1)',
stepSize: 1
}
}
},
plugins: {
legend: {
display: false
},
datalabels: {
listeners: {
enter: function(context) {
// Receives `enter` events for any labels of any dataset. Indices of the
// clicked label are: `context.datasetIndex` and `context.dataIndex`.
// For example, we can modify keep track of the hovered state and
// return `true` to update the label and re-render the chart.
context.hovered = true;
return true;
},
leave: function(context) {
// Receives `leave` events for any labels of any dataset.
context.hovered = false;
return true;
}
},
display: function(context) {
return context.active; // display labels with an odd index
},
font: {
size: '24px'
},
padding: '6',
align: 'end',
anchor: 'end',
borderRadius: 4,
backgroundColor: function(context) {
return context.active ? context.dataset.hoverBackgroundColor : context.dataset.backgroundColor;
},
borderColor: function(context) {
return context.dataset.borderColor;
},
borderWidth: 1,
color: 'rgb(253, 225, 186)',
textShadowBlur: 4,
textShadowColor: 'rgb(0, 0, 0)',
formatter: Math.round
}
}
}
});
if (stat) {
console.log(stat);
$('#activate').click(function() {
if (stat.getActiveElements().length > 0) {
stat.setActiveElements([]);
} else {
stat.setActiveElements([{
datasetIndex: 0,
index: 2,
}]);
//stat.$datalabels._hovered = true;
stat.$datalabels._datasets[0][1]._el.$context.active = true;
stat.$datalabels._datasets[0][1].$context.active = true;
stat.$datalabels._labels[1].$context.active = true;
stat.$datalabels._labels[1]._el.active = true;
stat.$datalabels._labels[1]._el.$context.active = true;
stat.$datalabels._datasets[0][1].update(stat.$datalabels._datasets[0][1].$context);
stat.$datalabels._labels[1].update(stat.$datalabels._labels[1].$context);
}
const tooltip = stat.tooltip;
if (tooltip.getActiveElements().length > 0) {
tooltip.setActiveElements([], {
x: 0,
y: 0
});
} else {
const chartArea = stat.chartArea;
tooltip.setActiveElements([{
datasetIndex: 0,
index: 2,
}], {
x: (chartArea.left + chartArea.right) / 2,
y: (chartArea.top + chartArea.bottom) / 2,
});
}
stat.update();
});
}

Answer 1

Found a solution
I just modified the display function for datalabels integrating my external variable lastLabelH
var SCRIPTOBJ = null;
var LABEL = ["Gino", "Samantha", "Vercingetorige"];
var DATA = [5, 28, 500];
var MAX = Math.max(...DATA);
var ctx = $('#stat');
Chart.defaults.font.size = 14;
Chart.register(ChartDataLabels);
var lastLabelH = null;
var stat = new Chart(ctx, {
type: 'bar',
data: {
labels: LABEL,
datasets: [{
minBarLength: 15,
barPercentage: 1,
label: '# USERS',
data: DATA,
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)',
'rgba(255, 206, 86, 0.5)',
'rgba(75, 192, 192, 0.5)',
'rgba(153, 102, 255, 0.5)',
'rgba(255, 159, 64, 0.5)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
hoverBackgroundColor: [
'rgba(255, 99, 132, 1.0)',
'rgba(54, 162, 235, 1.0)',
'rgba(255, 206, 86, 1.0)',
'rgba(75, 192, 192, 1.0)',
'rgba(153, 102, 255, 1.0)',
'rgba(255, 159, 64, 1.0)'
],
borderWidth: 1
}]
},
plugins: [{
id: 'LabelHighlight',
beforeEvent(c, args, pluginOptions) {
const event = args.event;
/* if (event.type === 'mouseout') {
if (lastLabelH != null) {
//c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
c.update();
lastLabelH = null;
}
} else */
labelcolor(c);
}
}],
options: {
responsive: false,
interaction: {
mode: 'index',
intersect: true
},
/* onHover: function (event, elements, c) {
if (elements && elements.length) {
if (c._active.length > 0) {
let labelindex = c._active[0].index;
let label = c.scales.x._labelItems[labelindex];
label.color = "rgba(255, 255, 64, 1)";
lastLabelH = labelindex;
}
} else {
if (lastLabelH != null) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
lastLabelH = null;
}
}
}, */
layout: {
padding: {
top: 50,
left: 0,
right: 0,
bottom: 0
}
},
indexAxis: 'x',
scales: {
x: {
beginAtZero: true,
ticks: {
display: true,
color: function(c) {
return lastLabelH != null && c.index == lastLabelH ? "rgba(255, 255, 64, 1)" : "rgba(255, 159, 64, 1)";
},
autoSkip: false,
maxRotation: 90,
minRotation: 90,
labelOffset: -8,
textStrokeColor: 'rgba(0, 0, 0, 0.5)',
textStrokeWidth: '2',
font: {
weight: 'bold',
family: 'Arial',
size: 16
},
align: 'start'
}
},
y: {
max: MAX + 1,
beginAtZero: true,
ticks: {
color: 'rgba(255, 159, 64, 1)',
stepSize: 1
}
}
},
plugins: {
legend: {
display: false
},
datalabels: {
listeners: {
enter: function(context) {
// Receives `enter` events for any labels of any dataset. Indices of the
// clicked label are: `context.datasetIndex` and `context.dataIndex`.
// For example, we can modify keep track of the hovered state and
// return `true` to update the label and re-render the chart.
context.hovered = true;
return true;
},
leave: function(context) {
// Receives `leave` events for any labels of any dataset.
context.hovered = false;
return true;
}
},
display: function(context) {
return lastLabelH != null && context.dataIndex == lastLabelH || context.active;
},
font: {
size: '24px'
},
padding: '6',
align: 'end',
anchor: 'end',
borderRadius: 4,
backgroundColor: function(context) {
return context.active ? context.dataset.hoverBackgroundColor : context.dataset.backgroundColor;
},
borderColor: function(context) {
return context.dataset.borderColor;
},
borderWidth: 1,
color: 'rgb(253, 225, 186)',
textShadowBlur: 4,
textShadowColor: 'rgb(0, 0, 0)',
formatter: Math.round
}
}
}
});
function labelcolor(c) {
if (c._active.length > 0) {
let labelindex = c._active[0].index;
if (c.scales.x._labelItems) {
let label = c.scales.x._labelItems[labelindex];
label.color = "rgba(255, 255, 64, 1)";
}
if (lastLabelH != null && lastLabelH != labelindex) {
if (c.scales.x._labelItems) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
}
}
lastLabelH = labelindex;
} else {
if (lastLabelH != null) {
if (c.scales.x._labelItems) {
c.scales.x._labelItems[lastLabelH].color = "rgba(255, 159, 64, 1)";
}
lastLabelH = null;
c.update();
}
}
}
if (stat) {
$('#activate').click(function() {
if (stat.getActiveElements().length > 0) {
stat.setActiveElements([]);
} else {
stat.setActiveElements([{
datasetIndex: 0,
index: 2,
}]);
labelcolor(stat);
}
const tooltip = stat.tooltip;
if (tooltip.getActiveElements().length > 0) {
tooltip.setActiveElements([], {
x: 0,
y: 0
});
} else {
const chartArea = stat.chartArea;
tooltip.setActiveElements([{
datasetIndex: 0,
index: 2,
}], {
x: (chartArea.left + chartArea.right) / 2,
y: (chartArea.top + chartArea.bottom) / 2,
});
}
stat.update();
});
}
body {
background-color: grey;
}
#stat {
margin-top: auto;
}
#content {
width: 300px;
margin: auto;
}
;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
<div id="content">
<canvas id="stat" width="300" height="300" style="margin-top:10px"></canvas>
<input id="activate" type="button" value="Vergingetorige">
</div>
</div>
had to modify the color fuction to update when set null lastLabelH i also add color label from external trigger
updated jsfiddle
https://jsfiddle.net/netquik/e3jp2k5o/41/