apexcharts Radial Charts font size

user_8268644 0
Viewed 1048

Im using apexcharts to my website, I have some conflict , anyone know how to change font size of value and labels put the bottom and value put the center

code here

JavaScript

var options = {
          series: [70],
          chart: {
          height: 350,
          type: 'radialBar',
        },
        plotOptions: {
          radialBar: {
            hollow: {
              size: '70%',
            }
          },
        },
        labels: ['Cricket'],
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
apexcharts
1 Answers

Do refer the documentation for formatting the data labels and their corresponding values. Following properties can be overridden in your chart options to set the font size and positioning.

plotOptions: {
  ...
  dataLabels: {
    name: {  // label name, eg: "Cricket"
     ...
     fontSize: '<font size in px>' // default: 16px; change to preferred size
     offsetY: <position offset from top> // +ve for downward, -ve for upward direction> // default: -10; change to >120 to push the label down
    },

    value: {  // label value, eg: "70%"
      ...
      fontSize: '<font size in px>' // default: 14px; change to required size
      offsetY: <position offset from top> // default: +16; set to 0 to center the value
    }

  }
}

Here's the CodePen with above settings modified to set the label at bottom of the plot, and value centered.

user_65192240
Related