How to change bar color at a specific value with Apex Charts?

9.9k views Asked by At

Is there a way to change the color of a bar on Apex charts below a specific value? For example when a weight above 200 lbs the bar changes red.

Here is the code I am working with but I am not quite sure what I am supposed to put for value, seriesIndex, and w

colors: ['#02DFDE'],
             fill: {
                 colors: [function({ value, seriesIndex, w }) {
                    if(value < 360) {
                      return '#FF0000'
                  } else {
                      return '#02DFDE'
                  }
                }]
         },
1

There are 1 answers

4
junedchhipa On BEST ANSWER

If you want to set the color based on value, then this function will suffice

colors: [
  function({ value, seriesIndex, w }) {
    if (value < 5000) {
      return '#FF0000'
    } else {
      return '#02DFDE'
    }
  }
]

Full example - https://codepen.io/apexcharts/pen/RwRNXzX?editors=0010 enter image description here