Apexcharts.js: Hiding Labels on Radial Chart

Created on 19 Apr 2019  路  9Comments  路  Source: apexcharts/apexcharts.js

On a Radial chart, the Label is displayed within the middle of the chart. How can we completely hide this, while moving the dataLabels up to it's position, ideally without changing it's offsetY.

Here is the radial example provided in the docs.

var options = {
  chart: {
      height: 350,
      type: 'radialBar',
  },
  series: [70],
  labels: ['Progress'],
}

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

chart.render();

This produces the label of Progress, but if we completely remove the Label key, it defaults to series-1

var options = {
  chart: {
      height: 350,
      type: 'radialBar',
  },
  series: [70],
 //  labels: ['Progress'], <-- hidden
}

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

chart.render();

Is there a way to hide the Label entirely without just adding a whitespace?

labes: [' ']

Most helpful comment

Try this,

options:{
    legend: {
       show: false
    },
}

All 9 comments

plotOptions: {
  radialBar: {
     dataLabels: {
       show: false
     }
  }
}

https://apexcharts.com/docs/options/plotoptions/radialbar/#dataLabelsShow

@junedchhipa This does not solve the issue I was asking. This hides the dataLabels & the chat Labels. I am asking how to only hide the chart Labels.

Which labels?
Please show an image as I am not getting your point.

Using the Basic Circle Char codepen example.

https://codepen.io/junedchhipa/pen/eQmmbO

Line 7 labels: ['Progress']

Is there a way to disable these, WITHOUT just entering an empty whitespace. Not supplying the chart with a label key, defaults the label to series-1.

Ideally, when not supplying labels, it removes that SVG and bumps everything below up.

plotOptions: {
  radialBar: {
     dataLabels: {
       name: {
          show: false
       }
     }
  }
}

This is the same as your previous attempt. DataLables are not the same as Labels. Keep dataLabels, hide Labels.

I'm sorry, but I would like to see what you're expecting.

I see two texts in the center of the circle
SeriesName
DataPointValue in percentage

What do you want to hide and what do you want to show from these two? Have you gone through the doc I provided?

Try this,

options:{
    legend: {
       show: false
    },
}

As @junedchhipa said or in additional

plotOptions: {
  radialBar: {
     dataLabels: {
       name: {
          show: false
       },
value: {
          show: false
       }
     }
  }
}
Was this page helpful?
0 / 5 - 0 ratings