Apexcharts.js: Is it possible set min and max range to radial bar?

[luckys]

I'd like to set a min and max values to radial bar chart.
Currently the min value is 0 and max value is 100, It would be nice if I could customize the min and max values like min 1000 and max 3000

[junedchhipa]

Sorry, not possible currently as radial-bar just expects values between 0 and 100.
Maybe in the future, we can think of it.

[luckys]

Thanks for you reply.
I solved it using a function to convert my values to percent.

const max = 3000
function valueToPercent (value) {
  return (value * 100) / max
} 

This function is used inside the serie like this:
series: [valueToPercent(2500)]

[mburger81]

Same request from us :) in combination of using always percentage the default output should be not % value. We should use formatter do adding % and not for removing it
Thx a lot

[RatherLogical]

Any updates on this or an eta on implementation?

[alansvieira]

Thanks for you reply.
I solved it using a function to convert my values to percent.

const max = 3000
function valueToPercent (value) {
  return (value * 100) / max
} 

This function is used inside the serie like this:
series: [valueToPercent(2500)]

Thanks man, that's exactly what I need.

[matthewlenz]

Those solutions work fine, the complexity happens when you want multiple bars. For that I ended up storing the series values in a variable.

var s_vals = [100,1000,10000];
var s_max =  series_vals.reduce(function (a, b) { return parseInt(a) + parseInt(b) }, 0);
var s_percs = series_vals.slice(0);
s_percs.forEach(function (val, idx, arr) { s_percs[idx] = 100 / (s_max / val); });

options.plotOptions.radialBar.dataLabels.value.formatter =
    (val) => { s_vals[s_percs.findIndex((perc) => { perc == val })];
options.series = s_percs;
options.categories = ['cat1', 'cat2', 'cat3'];

Hopefully this helps someone, but see the caveat below.

ISSUE: Anyone know of a better way to identify the dataLabels? My way won't work if there are multiple s_percs with the same percentage (because findIndex will just return the first one). The dataLabels.formatter doesn't receive the label or series index in the arguments. If it did, this would all be perfectly doable.

[sc979]

@luckys and @matthewlenz thanks for your comments. I used a formatter to convert % in real value ( >40k) with multiple radial bars :+1:

[bretscha]

Those solutions work fine, the complexity happens when you want multiple bars. For that I ended up storing the series values in a variable.

var s_vals = [100,1000,10000];
var s_max =  series_vals.reduce(function (a, b) { return parseInt(a) + parseInt(b) }, 0);
var s_percs = series_vals.slice(0);
s_percs.forEach(function (val, idx, arr) { s_percs[idx] = 100 / (s_max / val); });

options.plotOptions.radialBar.dataLabels.value.formatter =
    (val) => { s_vals[s_percs.findIndex((perc) => { perc == val })];
options.series = s_percs;
options.categories = ['cat1', 'cat2', 'cat3'];

Hopefully this helps someone, but see the caveat below.

ISSUE: Anyone know of a better way to identify the dataLabels? My way won't work if there are multiple s_percs with the same percentage (because findIndex will just return the first one). The dataLabels.formatter doesn't receive the label or series index in the arguments. If it did, this would all be perfectly doable.

Could you solve this problem? I would like to display the Actual number of the value in a multiple graph and not the percents. And have the graph be in percent but displaying the actual number. Kind of when you look at a speed indicator in your car. I dont want to know my velocity in Percent you know what I mean?

[matthewlenz]

@bretscha Didn't have time to fiddle it but here is a sample of my code https://pastebin.com/Qh9G0DWV. I think some fixes have been committed to include the radialLabel in the params to the formatter to avoid the issue with duplicate s_vals.

[alekbless]

Setting min and max to this chart would be valuable👍

[mcristo1844]

Any updates on this one?

[Thimows]

A feature like this will also help me out big time!

[mgpwilson]

This would be a useful feature!