Javascript – How to change the color of each marker APEXCHARTS chart in next js

Do you know if there is a way to define the color of each point? Ex: { x: ‘Yellow’, y: [2100, 3000], colors: ‘#808080’,} because it is set by default for all markers: plotOptions > dumbbellColors, I would like a color for each marker. documentation is confusing

Example:
[] (https://phpout.com/wp-content/uploads/2024/01/26IUq.png)
……………………………………………………………………………………………………………………………………………………………………………

'use client';
import Image from 'next/image';
import ReactApexChart from 'react-apexcharts';
import React, { Component } from 'react';
import { Show } from '@chakra-ui/react';
import { Colors } from 'chart.js';

interface GraficoDumbbleState {
  series: {
    data: { x: string; y: [number, number] }[];
    dataLabels?: {
      enabled: boolean;
    };
  }[];
  options: {
    chart: {
      height: number;
      type: string;
      zoom: {
        enabled: boolean;
      };
    };
    colors: string[];
    plotOptions: {
      bar: {
        horizontal: boolean;
        isDumbbell: boolean;
        dumbbellColors: string[][];
      };
    };
    legend: {
      show: boolean;
      showForSingleSeries: boolean;
      position: string;
      horizontalAlign: string;
      customLegendItems: string[];
    };
    fill: {
      type: string;
      gradient: {
        gradientToColors: string[];
        inverseColors: boolean;
        stops: number[];
      };
    };
    grid: {
      xaxis: {
        lines: {
          show: boolean;
        };
      };
      yaxis: {
        lines: {
          show: boolean;
        };
        yaxis: {
          lines: {
            show: boolean;
          };
        };
      };
    };
  };
}

export default class GraficoDumbble extends Component<{}, GraficoDumbbleState> {
  constructor(props: any) {
    super(props);

    this.state = {
      series: [
        {
          data: [
            { x: 'Amarela', y: [2100, 3000], colors: "#808089"},
            { x: 'Amarela', y: [3000, 5000]},
            { x: 'Amarela', y: [5000, 6500]},
            { x: 'Amarela', y: [6500, 8000]},

            {x: 'Branca', y: [2100, 5000],},
            {x: 'Branca', y: [5000, 8000],},
            {
              x: 'Indígina',
              y: [2100, 8000],
            },
            {
              x: 'Parda',
              y: [2100, 8000],
            },
            {
              x: 'Preta',
              y: [2100, 8000],
            },
          ],
          dataLabels: {
            enabled: false,
          },
        },
      ],
      options: {
        chart: {
          height: 390,
          type: 'rangeBar',
          zoom: {
            enabled: false,
          },
        },
        
        colors: ['#808080', '#808080'],
        plotOptions: {
          bar: {
            horizontal: true,
            isDumbbell: true,
          },
        },
        legend: {
          show: false,
          showForSingleSeries: false,
          position: 'top',
          horizontalAlign: 'left',
          customLegendItems: ['Female', 'Male'],
        },
        fill: {
          type: 'gradient',
          gradient: {
            gradientToColors: ['#808080'],
            inverseColors: false,
            stops: [0, 100],
          },
        },
        grid: {
          xaxis: {
            lines: {
              show: false,
            },
            labels: {
              show: false,
            },
          },
          yaxis: {
            lines: {
              show: false,
            },
            yaxis: { lines: { show: false } },
          },
        },
        xaxis: {
          labels: {
            show: false,
          },
        },
      },
    };
  }

  render() {
    return (
      <div>
        <div id="chart">
          <ReactApexChart
            options={this.state.options as any}
            series={this.state.series}
            type="rangeBar"
            height={390}
          />
        </div>
        <div id="html-dist"></div>
      </div>
    );
  }
}