Search code examples
javascriptreactjschartsgradientapexcharts

Gradient in 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 a dynamic gradient color depending upon the value.

For example, for negative values, I need it to go from light orange to dark orange and for positive, light blue to dark blue.

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.

This is related to: Change color of range column chart in ApexCharts but I need a gradient instead of fillColor which seems to take just a string.

enter image description here

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

Thanks in advance!

Solution

  • Fixed it using the following.

    I add a fill property like this.

                fill: {
                type: ["gradient"],
                gradient: {
                    shade: "light",
                    type: "horizontal",
                    shadeIntensity: 0.25,
                    opacityFrom: 0.4,
                    opacityTo: 0.9,
                    stops: [0, 100]
                }
            }

    The fillColor property on each data point object still exists and the gradient is applied on each of those colors.