Chartjs-How to externally trigger datalabels-plugin (active) – ChartJS

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>