Search code examples
javascriptreactjschartsapexcharts

Change color of range column chart in ApexCharts

I am trying to implement a waterfall chart for 1 of my projects using ApexCharts. This chart isn't available out of the box with ApexCharts. So, I'm trying to modify the range column chart into a Waterfall chart. This is pretty much all I need but I need to change the color of the columns where the range is decreasing. Here the middle columns have a blue color, but I need to change it to red. Any leads are appreciated.

I have already checked the fill and the colors property, they don't seem to work properly with range column charts.

CodePen: https://codesandbox.io/s/apx-range-column-forked-8dv67

Thanks in advance.

enter image description here

Solution

  • The closest thing I've been able to get working is setting a fillColor for each data point in a series:

    this.chartOptions = {
  series: [
    {
      name: "blue",
      data: [
        {
          x: "Team A",
          y: [0, 100],
          fillColor: "#FF0000",
        },
      ],
    },
  ],
}

    For this to work though, you'd need to do some pre-processing before you add the data points to the series. You would need a function to check if the range is negative and if so sets the color to red.

    function barColor(dataPoint1, dataPoint2) {
  return (dataPoint1 - dataPoint2) < 0 ? "" : "#FF0000";
}

    There's a code Sandbox showing the fillColor in use.