Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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'
                  }
                }]
         },
like image 818
Clancinio Avatar asked Sep 17 '25 15:09

Clancinio


1 Answers

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

like image 137
junedchhipa Avatar answered Sep 19 '25 06:09

junedchhipa