How to set multiple colors for bars in ApexCharts horizontal bar chart (sparkline mode)?

Question

I'm trying to create a horizontal bar chart using ApexCharts in sparkline mode. I want to set different colors for each bar, but I'm unable to achieve this using the colors option.

Here's my code:

const categories = stats.map(([domain]) => domain);
const series = stats.map(([, value]) => value);

this.chartOptions = {
    chart: {
        type: 'bar',
        height: 100,
        sparkline: {enabled: true}
    },
    colors: ['#0abd0a', '#4CB140', '#7CC674', '#A9D1A8',
        '#009596', '#00B2B2', '#00C8C8', '#00E0E0', '#00F0F0', '#00FFFF'],
    fill: {
        colors: ['#0abd0a', '#4CB140', '#7CC674', '#A9D1A8',
            '#009596', '#00B2B2', '#00C8C8', '#00E0E0', '#00F0F0', '#00FFFF'],
        opacity: 1,
    },
    plotOptions: {bar: {horizontal: true}},
    series: [{name: 'Links', data: series}],
    xaxis: {categories: categories},
    tooltip: {fixed: {enabled: true}, y: {formatter: function(val) {return val}}, theme: 'dark'},
};

Is there a workaround to set multiple colors for bars in a horizontal bar chart with ApexCharts in sparkline mode?

Additional details:

I've tried using the colors option in the chart configuration, but it doesn't seem to work for sparklines. I'm using ApexCharts version 1.6 in Vue 2. I've searched online for solutions but haven't found anything that works specifically for sparkline mode. Any help would be appreciated!

Answer 1

Looks like the default color value applies to all the charts that's why the colors in the color array don't have any effect. To fix this problem, need to set the distributed parameter as true. Setting the distributed option as true makes the bars discrete. Each value indicates one bar per series so each bar takes the color value from the color array you defined. Therefore, adding distributed: true into the plotOptions.bar object fixes the issue:

const categories = stats.map(([domain]) => domain);
const series = stats.map(([, value]) => value);

this.chartOptions = {
    chart: {
        type: 'bar',
        height: 100,
        sparkline: {enabled: true}
    },
    colors: ['#0abd0a', '#4CB140', '#7CC674', '#A9D1A8',
        '#009596', '#00B2B2', '#00C8C8', '#00E0E0', '#00F0F0', '#00FFFF'],
    fill: {
        colors: ['#0abd0a', '#4CB140', '#7CC674', '#A9D1A8',
            '#009596', '#00B2B2', '#00C8C8', '#00E0E0', '#00F0F0', '#00FFFF'],
        opacity: 1,
    },
    plotOptions: {
       bar: {
          horizontal: true,
          // Added here
          distributed: true
       }
    },
    series: [{name: 'Links', data: series}],
    xaxis: {categories: categories},
    tooltip: {fixed: {enabled: true}, y: {formatter: function(val) {return val}}, theme: 'dark'},
};

I also created a DEMO LINK to review and test it easily

Hope, it's clear and helpful