Search code examples
javascriptreactjsapexcharts

How to Customize Label Unit on ApexChart RadialBar?

Is there a way to customize the unit shown on Apexchart RadialBar?
It looks like it automatically assumes the radial bar is out of 100, which is not true in all use cases..but I couldn't find any documents on how to get rid of it.

var options = {
  chart: {
      height: 350,
      type: 'radialBar',
  },
  series: [21],
  labels: ['Amount'],
  plotOptions: {
          radialBar: {
            hollow: {
              size: "70%",
            },
            total:{
              show: true,
            },
            value:{
              show: true,
            },
            dataLabels:{
              value:{
                show: false,
              },
            }
          },
        },
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

There's only option to hide the value with dataLabels:{ value:{ show: false},} but not change or hide the unit.

Is there a way to change this so that it's out of a non-100 total(let's say 40), and also not show the '%' unit at the end?

enter image description here

Solution

  • You can pass formatter as function parameter to customize the default label of the value like this:

    dataLabels:{
  value: {
    show: true,
    fontSize: '24px',
    formatter: function (val) {
      return (val * 40) / 100;
    }
  },
}

    You can take a look at this codepen for a live working example of this solution.