Update image yAxis chart.js

Question

I have some images displayed on my yAxis, but when I sort my data the images dont get sorted.

here is my custom plugin for the images

const flagImagePlugin = {
      id: 'flagImagePlugin',
      beforeDatasetsDraw: (chart: any, args: any, pluginOptions: any) => {
        const ctx = chart.ctx;
        const yAxis = chart.scales.y;
    
        yAxis.ticks.forEach((tick: any, index: number) => {
          const img = loadedImages[index];
          const y = yAxis.getPixelForTick(index);
    
          var height = 50;
          var gap = 5; // Adjust this value for the desired gap
          var xOffset = 8; // Adjust this value to move the images to the left
    
          // Calculate the width based on the aspect ratio
          const aspectRatio = img.height / img.width;
          const width = height / aspectRatio;
    
          this.flagWidth = width;
    
          // Draw rounded rectangle as a clipping mask
          ctx.save();
          ctx.beginPath();
          ctx.moveTo(yAxis.right - width + gap - xOffset, y - height / 2);
          ctx.arcTo(
            yAxis.right - xOffset,
            y - height / 2,
            yAxis.right - xOffset,
            y - height / 2 + 5,
            5
          ); // top-right
          ctx.arcTo(
            yAxis.right - xOffset,
            y + height / 2,
            yAxis.right - width + gap - xOffset,
            y + height / 2,
            5
          ); // bottom-right
          ctx.arcTo(
            yAxis.right - width + gap - xOffset,
            y + height / 2,
            yAxis.right - width + gap - xOffset,
            y - height / 2 + 5,
            5
          ); // bottom-left
          ctx.arcTo(
            yAxis.right - width + gap - xOffset,
            y - height / 2,
            yAxis.right - xOffset,
            y - height / 2,
            5
          ); // top-left
          ctx.closePath();
          ctx.clip();
    
          // Draw the image
          ctx.drawImage(
            img,
            yAxis.right - width + gap - xOffset, // Adjust x-coordinate for the new width
            y - height / 2, // Adjust y-coordinate to center the image
            width, // Use calculated width
            height // Fixed height
          );
    
          // Restore canvas state to remove clipping
          ctx.restore();
        });
      },
    };

then I set that over here:

this.winrateChart = new Chart('winrateChart', {
  type: 'bar',
  data: chartData,
  options: chartOptions,
  plugins: [ChartDataLabels, flagImagePlugin],
});

then when I sort my data, what do I have to do to update these images in the same order as the data

I was trying:

// Update the chart with the modified data and labels
this.winrateChart.update();
  
// Additionally, we need to trigger the plugin's beforeDraw function again
// to ensure that the flag images are updated
if (this.winrateChart.options.plugins) {
  const plugins = this.winrateChart.options.plugins;

  var flagImagePlugin = plugins.find((plugin: any) => plugin.id === 'flagImagePlugin');

  if (flagImagePlugin) {
    // flagImagePlugin.beforeDraw(this.winrateChart);
    flagImagePlugin.Draw(this.winrateChart);
    console.log('here');
  } else {
    console.log('why here')
  }
}

I have no idea how to proceed from here