ApexCharts scatterplot with categories on the x-axis and each category has multiple y-values

I am trying to create a scatterplot with ApexCharts using Vue3. My chart will have several different categories on the x-axis and each category will have multiple y-values. However, I cannot figure out how to properly format my data to achieve this. The desired look of the chart should resemble a bunch of data points stacked vertically for each category. (not directly on top of each other, they y-values are all slightly different)

After referring to the documentation here: https://apexcharts.com/docs/series/

I've tried a few different approaches to formatting my data.

I've tried this way:

   let series = [
      {
        name: "Name 1",
        data: [10, NaN, NaN],
      },
      {
        name: "Name 1",
        data: [20, NaN, NaN],
      },
      {
        name: "Name 2",
        data: [NaN, 30, NaN],
      },
      {
        name: "Name 2",
        data: [NaN, 35, NaN],
      },
      {
        name: "Name 3",
        data: [NaN, NaN, 45],
      },
      {
        name: "Name 3",
        data: [NaN, NaN, 55],
      },
    ];

let chartOptions = {
   xaxis: {
      categories: ["cat1", "cat2", "cat3"]

The result here will not allow me to add more than one value for each category.

Next, I tried like this:

    let series = [
      {
        name: "name1",
        data: [
          { x: "cat1", y: 54 },
          { x: "cat1", y: 60 },
          { x: "cat2", y: 66 },
          { x: "cat2", y: 70 },
        ],
      },
       {
         name: "name2",
         data: [
           { x: "cat3", y: 33 },
           { x: "cat3", y: 40 },
           { x: "cat4", y: 54 },
           { x: "cat4", y: 58 },
         ],
       },

   let chartOptions = {
   xaxis: {
      type: "category"

The result here was two categories on the xaxis that say "cat1" with each having one data point from name1 and name2

I haven't been able to find any examples of an Apex scatterplot that show this particular case of category data with multiple y-values and I'm just not sure what the issue is with my formatting of the data. I have been able to achieve the desired outcome, but only if I use paired numeric values or a datetime on the x-axis.

Any help would be much appreciated!

Solution

You can have multiple points for the same category if you avoid duplicates within the same series.

let options = {
  series: [{
    name: 'name1',
    data: [
      { x: 'cat1', y: 54 },
      { x: 'cat2', y: 66 },
      { x: 'cat3', y: 33 },
      { x: 'cat4', y: 54 }
    ]
  }, {
    name: 'name2',
    data: [
      { x: 'cat1', y: 60 },
      { x: 'cat2', y: 70 },
      { x: 'cat3', y: 40 },
      { x: 'cat4', y: 58 }
    ]
  }],
  chart: {
    height: 350,
    type: 'scatter'
  },
  xaxis: {
    type: 'category'
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"></div>

EDIT

If you tweak your data and add explicit categories to the xaxis, you can get this:

let options = {
  series: [{
    name: 'name1',
    data: [
      [1, 54],
      [1, 60],
      [2, 66],
      [2, 70]
    ]
  }, {
    name: 'name2',
    data: [
      [3, 33],
      [3, 40],
      [4, 54],
      [4, 58]
    ]
  }],
  chart: {
    height: 350,
    type: 'scatter'
  },
  xaxis: {
    categories: ['cat1', 'cat2', 'cat3', 'cat4']
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"></div>