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

Question

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!

Answer 1

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>