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

Question

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://i.stack.imgur.com/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>
    );
  }
}

Answer 1

The option plotOptions.bar.dumbbellColors is an array that allows you to set different colors, but each item in that array sets the start and end markers colors for a series. So, if there are no reasons that prevent you to set each segment as a separate series, adding the option plotOptions.bar.rangeBarGroupRows = true to prevent segments of the same x but different series to be offset waterfall-style, you can have markers colored differently.

Here's an example (I set the colors of the markers that are covered to transparent rgba(0,0,0,0)):

const options = {
    series: [{
        data: [{x: 'Amarela', y: [2100, 3000]}]
    }, {
        data: [{x: 'Amarela', y: [3000, 5000]}]
    }, {
        data: [{x: 'Amarela', y: [5000, 6500]}]
    }, {
        data: [{x: 'Amarela', y: [6500, 8000]}]
    }, {
        data: [{x: 'Branca', y: [2100, 5000]}]
    }, {
        data: [{x: 'Branca', y: [5000, 8000]}]
    }, {
        data: [{x: 'Indígina', y: [2100, 8000]}]
    }, {
        data: [{x: 'Parda', y: [2100, 8000]}]
    }, {
        data: [{x: 'Preta', y: [2100, 8000]}]
    }],
    chart: {
        type: 'rangeBar',
        height: 380,
        zoom: {
            enabled: false
        }
    },
    colors: ['#808080', '#808080'],
    plotOptions: {
        bar: {
            horizontal: true,
            isDumbbell: true,
            rangeBarGroupRows: true,
            dumbbellColors: [
                ['#EC7D31', 'rgba(0,0,0,0)'], // start and end color for markers of series 0
                ['#7D31EC', 'rgba(0,0,0,0)'], // start and end color for markers of series 1
                ['#FDCB36', 'rgba(0,0,0,0)'], // .....
                ['#FD31EC', '#36BDCB'],
                ['#2DF13C', 'rgba(0,0,0,0)'],
                ['#FF313C', '#2D3BFF'],
                ['#2DD1AC', '#BDCB36'],
                ['#7D31EC', '#433366'],
                ['#8F8F8F', '#ADCBF6']
            ]
        },
    },
    legend: {
        show: false,
        showForSingleSeries: false,
        position: 'top',
        horizontalAlign: 'left',
        customLegendItems: ['Female', 'Male'],
    },
    grid: {
        xaxis: {
            lines: {
                show: false,
            },
            labels: {
                show: false,
            },
        },
        yaxis: {
            lines: {
                show: false,
            },
            yaxis: {lines: {show: false}},
        },
    },
    xaxis: {
        labels: {
            show: false,
        },
    }
};

const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

<div id="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.45.2/apexcharts.min.js"
        integrity="sha512-vIqZt7ReO939RQssENNbZ+Iu3j0CSsgk41nP3AYabLiIFajyebORlk7rKPjGddmO1FQkbuOb2EVK6rJkiHsmag=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Answer 2

As per your need, to use different colors for each range in a rangeBar chart and refer to them as "dumbbells." While the rangeBar chart type does not natively support different colors for each bar. So, to achieve alternate view:

• set "isDumbbell" false.
• set barHeight: '10%' for make it interactive on hover.
• use "fillColor" for different color on each data.

Here is suggested code change:

plotOptions: {
      bar: {
        isDumbbell: false,
        barHeight: '10%',
        horizontal: true,
      },
    },

data: { x: string; y: [number, number]; fillColor:string; }[];

series: [
    {
      data: [
        { x: 'Amarela', y: [2100, 3000], fillColor: "#000"},
        { x: 'Amarela', y: [3000, 5000], fillColor: "#00ff00"},
        ...
      ]
     }
    ]

Can refer full working example code in this snippet : https://stackblitz.com/edit/stackblitz-starters-r9bmyz?file=app%2Fpage.tsx