How to Set Min and Max Range for Radial Bar (Gauge) in ApexCharts

The Problem#

Maybe you'd like to set min and max values for a radial bar chart (gauge) in ApexCharts.

Currently, by default, the min value is 0 and the max value is 100. It would be nice if you could customize the min and max values, right?

The problem here is that ApexCharts does not provide a way to change max and min values, so you have to figure it out yourself.

I ran into this problem previously and came up with a solution that solves this issue. Currently, ApexCharts does not give you the possibility of changing the max and min values for a Radial Bar; it just expects values between 0 and 100.

I already found a solution on the Internet that solves the max values. But there are some caveats: when you use that solution, it solves only the max values; the Radial Bar assumes that the min value is 0.

For a better explanation of the second caveat, you should know that the tooltip of the Radial Bar expects values in percentage (%). So you should change all your max values to percentage. When you do that, the value inside the radial bar is shown as a percentage and not the real value you provided in the first place.

The Solution I've Provided#

Please read the whole solution carefully so you get a full understanding of how it works.

Custom max value only#

First, write a function as mentioned below.

Let's define a max value and targeted value.

With a simple formula we can see that the percentage is:

percentage = (value * 100) / maxValue;

So we use the formula above in our function (I will take 60 as my maximum value):

const maxValue = 60;
 
const valueToPercent = (val) => (val * 100) / maxValue;

Now, if you pass the output of this function to the series like this:

series: [valueToPercent(value)],

In your chart it will display the number as a percentage, and of course you don't want that—you still need the original value to be printed in the chart. To do that, add a formatter inside:

const config = {
    series: [valueToPercent(value)],
    options: {
        ...
        plotOptions: {
        radialBar: {
          ...
          dataLabels: {
            name: {
              ...
            },
            value: {
              ...
              formatter: (val) => (val * maxValue) / 100 ,
              ...
              },
            },
          },
        },
      },
       ...
    },

And now in your chart you will see the original value, but in the series it is stored as a percentage so your chart looks correct.

Custom min and max values#

You can do the same thing if you have a min value different from 0, but with a slight difference in the formula:

percentage = ( (value - minValue) * 100 ) / (maxValue - minValue)

Thus the function will be:

const maxValue = 60;
const minValue = 10;
 
const valueToPercent = (val) => ( (val - minValue) * 100 ) / (maxValue - minValue);

With a little bit of math from the previous formula above, the formatter will be:

formatter: (val) => ( val * (maxValue - minValue) ) / 100 + minValue,

Note#

I've published this solution on the GitHub Issues page. You can check it: Is it possible to set min and max range to radial bar? #449.