I want to add separate image in each bubble in bubble chart

[Bishalsnghd07]

Hi, I'm working on bubble chart in my project. The problem I'm facing is, in each bubble same image is showing. I want separate image in each bubble. How can I do that, please help me. I attached screenshot and code for your reference.

bubble-chart.tsx component

import ApexChart from '@/components/atoms/apex-chart/apex-chart';
import { bubbleChart, generateBubbleChartData } from '@/data/mock/bubble-chart';

const BubbleChart = () => {
const bubbleData = generateBubbleChartData();

return (
<>

<ApexChart series={[{ name: 'Bubbles', data: bubbleData }]} options={bubbleChart} type="bubble" height={350} />

</>
);
};

export default BubbleChart;

bubble-chart.ts component:

export const generateBubbleChartData = () => [
{
x: 'Jan 1',
y: 10,
z: 25,
image: '/static/images/workspace/Ellipse 105.png',
},
{
x: 'Jan 2',
y: 20,
z: 25,
image: '/static/images/workspace/Ellipse 105.png',
},
{
x: 'Today',
y: 35,
z: 25,
image: '/static/images/workspace/Rectangle 130.png',
},
{
x: 'Jan 4',
y: 30,
z: 25,
image: '/static/images/workspace/Ellipse 105.png',
},
{
x: 'Jan 5',
y: 20,
z: 25,
image: '/static/images/workspace/Rectangle 130.png',
},
];

export const bubbleChart = {
chart: {
fontFamily: 'var(--font-jakarta)',
height: 350,
type: 'bubble',
toolbar: {
show: false,
},
},
forecastDataPoints: {
count: 3,
},
dataLabels: {
enabled: false,
},
tooltip: {
enabled: true,
},

xaxis: {
type: 'category',
categories: ['Jan 1', 'Jan 2', 'Today', 'Jan 4', 'Jan 5'],
tickPlacement: 'between',
tickAmount: 4,
crosshairs: {
width: 1,
color: '#FF0000',
},
labels: {
style: {
color: '#3F4C5A',
},
},
},
yaxis: {
tickAmount: 4,
min: 0,
max: 40,
labels: {
formatter: function (val: string) {
return '$' + val; // Format tick labels with $
},
},
},
fill: {
type: 'image',
opacity: 1,
image: {
src: generateBubbleChartData().map((item) => item.image),
width: 50,
height: 50,
},
},

markers: {
size: 50,
},
grid: {
xaxis: {
lines: {
show: true,
},
},
},
legend: {
labels: {
useSeriesColors: true,
},
markers: {
customHTML: [
function () {
return '';
},
function () {
return '';
},
],
},
},
};

It's very urgent, please help me out from this.

[Bishalsnghd07]

@junedchhipa @Aksultan Please help I'm stuck in this from long time

[b0yblake]

I guess you miss smt on that iterator of map func, please look carefully at this link: https://apexcharts.com/javascript-chart-demos/scatter-charts/scatter-images/

The option [src ](src: ['../../assets/images/ico-messenger.png', '../../assets/images/ico-instagram.png'],) => you can mock with fixed image first, then check this out.

I got the same problem and solved it!
Gook luck!