Line color based on value

Is your feature request related to a problem? Please describe. I couldn’t find a way to set color on line based on value. I’d really like to set a different color on the line when it’s below zero.

Describe the solution you’d like Set the color as a function with value as parameter.

Describe alternatives you’ve considered const color = value => value >= 0 ? "#00ff00" : "#ff0000";

[JeremyBellaiche]

Hi,

I’m able to get this kind of charts using apexcharts. I guess that’s what you’re looking for :

First, I’ve a variable “data” containing all the values I will display on the chart. With that, I’ve created a function :

const generateColors = (data) => {
        return data.map((d, idx) => {
            let color = d > 0 ? '#22c55f': '#ef4544';

            return {
                offset: idx / data.length * 100,
                color,
                opacity: 1
            }
        })
    }

and my options looks like this :

const options = {
        chart: {
            type: 'line',
            height: 350,
            width: "auto",
        }, 
        // ...
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.7,
                opacityTo: 0.9,
                colorStops: generateColors(data)
            }
        } 
}

Hope that can help !

[junedchhipa]

I assume you’re talking about a line like this

Unfortunately, the line chart doesn’t currently support having a different color based on value. Hence, providing dataPointIndex will serve no purpose here.