TypeError: Cannot read properties of undefined (reading 'x')

[emanuuele]

Every chart does a request to API and the error just happens in this one. Maybe it's because it's a chart with several funcionarios . Here is the API request:

    url: `/indicadores/tarefas/${urlParams()}`,
    success: (response) => {
      if (response.success) {
        $("#grafico-tarefas").html(``);
        const optionsTasks = optionsGraficoTarefas(response.lista);
        const tasks = new ApexCharts(
          document.querySelector("#grafico-tarefas"),
          optionsTasks
        );
        tasks.render(); **// the error happen here**
        response.tarefas.map((funcionario)=> {
          $("#resumo-tarefas").append(`
          <div class="row" style="align-items: center">
            <div class="col-1 text-center">
              <img src="${response.url}/users/${funcionario.foto}" alt="user-img" width="30" id="user-avatar" class="rounded-circle img-circle ml-2">
            </div>
            <div class="col-11">
              <div class="pb-2">
                <div class="row">
                  <div class="col-6 text-left"><strong>Nome:</strong> ${funcionario.nome_funcionario}</div>
                </div>
                <div class="row">
                  <div class="col-6 text-left"><strong>${funcionario.total_pontos} pontos</strong> <strong>${funcionario.total} tarefas</strong></div>
                </div>
              </div>
            </div>
          </div>
          `);
        })
      } else {
        mostraDialogo(`<strong>${response.msg}</strong>`, "danger", 6000);
      }
    },
    error: ({ a, b, c }) => {
      console.log({ a, b, c });
      mostraDialogo(`<strong>${a.responseText} </br> ${b}, </br> ${c}</strong>`, "danger", 6000);
    },
  }); ```

**Here is the formatting api data**

``` function optionsGraficoTarefas(lista) {
  let values = Object.values(lista);
  let lista_meses = Object.keys(lista);

  let funcionarios = [];
  values.map((mes) => {
    let tarefasMes = Object.values(mes);
    tarefasMes.map((tarefa, index) => {
      let indiceFuncionario = null;
      funcionarios.map((funcionario, i) => {
        if (funcionario.name == tarefa["nome_funcionario"]) {
          indiceFuncionario = i;
        }
      });
      let mes = Number(tarefasMes[index]["mes"]);
      if (indiceFuncionario == null) {
        let data = new Array(12);
        data[mes - 1] = tarefasMes[index]["total"];
        funcionarios.push({ data, name: tarefa["nome_funcionario"] });
      } else {
        funcionarios[indiceFuncionario].data[mes - 1] =
          tarefasMes[index]["total"];
      }
    });
  });

  let series = funcionarios;
  let optionsTasks = optionsGeneral( "GESTÃO ANUAL EQUIPE", series, lista_meses)
  return optionsTasks;
} ```

```function optionsGeneral(title, series, categories) {
  let optionsTasks = {
    series,
    chart: {
      type: "bar",
      height: 430,
    },
    plotOptions: {
      bar: {
        horizontal: false,
        dataLabels: {
          position: "top",
        },
      },
    },
    dataLabels: {
      enabled: true,
      offsetX: -6,
      style: {
        fontSize: "12px",
        colors: ["#fff"],
      },
    },
    stroke: {
      show: true,
      width: 1,
      colors: ["#fff"],
    },
    title: {
      text: title,
    },
    tooltip: {
      shared: true,
      intersect: false,
    },
    xaxis: {
      categories,
    },
  };
  return optionsTasks;
}

Expected Behavior

Actual Behavior

Screenshots

Reproduction Link

[augustosnk12]

It does also happen to me. Did you solve it?

[brianlagunas]

Please do not double post. Original: https://github.com/apexcharts/apexcharts.js/discussions/4513