How to add Class name for each data point in ECharts of bar type

Question

I was trying to e2e test with cypress for my Angular component which implements ngx-echarts of bar type. I was not able to pick any class to get my desired element to click. So I decided to put class in each data point in my bar chart. However, I was unable to do that.

This is my data for echart

options3: EChartsOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: 'Counters',
        type: 'bar',
        barWidth: '60%',
        data: [100, 330,34,443,112,223],
      },
    ],
  };

HTML Code

<div echarts [initOpts]="initOpts" [options]="options3" class="demo-chart"></div>

Options mentioned in the HTML file

initOpts = {
    renderer: 'svg',
    width: 'auto',
    height: 'auto'
  };

I tried to loop thorugh my all html elements to get my desired element. However this approach is not efficient and might break at any time due to change in value

`cy.get('demo-chart').then(($parentElement) => {

cy.wrap($parentElement).find('path').each(($path) => {
  if (hasRun) {
    return false;
  }
  const dValue = Cypress.$($path).attr('d');
  const fillElement = Cypress.$($path).attr('fill');
  if (dValue && !dValue.includes("330l75.164 0l0 0l-75.164") && fillElement != "none") {
    if (!hasRun) {
      hasRun = true
      cy.wrap($path).click();

      cy.get('cjp-popup').should('be.visible').then(($popup) => {
        if ($popup.length > 0) {
          cy.get('datatable-body-row')
            .should('exist')
            .parseDataTable()
            .then((data) => {
              cy.wrap(data.rowObjects[data.rowObjects.length - 1]).click();
            });
        }
      });
    }

  }
});