Apex Charts Range Bar Colors

Question

Can you use a color array for range charts? I grabbed the same array that worked in a bar chart, but the colors are ignored in a range bar chart.

Answer 1

Most of the examples out there show you how to set the color of a series. With the range chart, you end up with 1 series and multiple groups by default. However, you can set the color of individual items within a series too.

Go to the App Galery and install the Sample Charts app. Go to page 23 (the Range Chart) page, drill into the Attributes of the Range region, and scroll down until you see JavaScript Initialization Code. Add this function there:

function( options ){
  options.dataFilter = function( data ) {
    data.series[0].items[0].color = "#0B6623";
    data.series[0].items[1].color = "#9DC183";
    data.series[0].items[2].color = "#708238";
    data.series[0].items[3].color = "#C7EA46";
    data.series[0].items[4].color = "#3F704D";

    return data;
  };

  return options;
}

When you run the page you'll see that each item has a different color: