How to set min and max range to radial bar (Gauge) ApexCharts

The Problem

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

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

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

I run into this problem previously, and I come up with a solution that solves this issue. because currently, ApexCharts does not gives you the possibility of changing the Max and Min values for a Radial Bar, it just expects values between 0 and 100.

Already I found a solution on the Internet that solves the max values. But, there are some caveats here, when you use that solution, it solves just the Max values, the Radial Bar assumes that the Min value is 0.

For a better explanation about the second caveat, you should know how the tooltip of the Radial Bar expect, the values expect is in percentage %, so you should change all your Max values to percentage, When you do that, the Value inside the radial bar is shown on percentage and not the real value you provide in the first place.

The Solution I've provided

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

First, write a function as mentioned below.

Let's define a max value and targeted value.

With a simple formula we can know 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 type the output of this function to the series like this:

series: [valueToPercent(value)],

In your chart, it will display the number in Percentage and of course, you don't want that you still need the original value to be printed in the chart, to do that, make a function inside :

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

And now you in your chart you will see the original value but in the series in count as a percentage to make your chart looks correct.

You can do the same thing if you have a min value different than 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

This solution I provided, I've published on the Github Issues page, you can check it from:

Is it possible set min and max range to radial bar? #449

Contact

How to set min and max range to radial bar (Gauge) ApexCharts

The Problem

The Solution I've provided

Note