RadialBar / Circular Gauge

What is a Radial Bar Chart/Circular Gauge?

A Radial Bar Chart, or Circular Gauge, is a typical Bar Chart plotted on a polar coordinate system (instead of a Cartesian plane). It indicates values on a circular numeric scale in terms of percentage with longer bars indicating larger values.

With ApexCharts Radial Bar Chart, you can represent data in several formats such as: multiple Radial Bar Charts, Radial Bar with an image, and even in semi-circular Gauge forms.

What are Radial Bar Charts used for?

Radial Bar Charts or Circular Gauge are mostly used in single-unit data to indicate progress/activity. They are also very valuable when you want to visualize comparisons between categories by using circularly shaped bars.

RadialBar vs gauge

Both radialBar and gauge draw on a polar coordinate system. The key differences:

  • radialBar accepts a percentage (0-100) per series and draws one arc per series, forming concentric rings when there are multiple series.
  • gauge accepts a raw numeric value interpreted against plotOptions.radialBar.min and max. It is designed for a single value with optional threshold bands and a needle indicator.

If you want to show a single value like "CPU temperature: 72°C" with warning/critical zones, use gauge. If you want to show completion percentages for several metrics as overlapping rings, use radialBar.

In ApexCharts, switching between them is one config change: chart.type: 'gauge' vs chart.type: 'radialBar'.

How do you make a Radial Bar?

In this section, we will show you how to make a Radial Bar Chart, how to set custom colors, how to change the startAngle and endAngle, and will demonstrate how you can easily display data labels.

By default, radialBar/gauge values are interpreted as percentages (0–100). To plot arbitrary domains, set plotOptions.radialBar.min and max to your value range (e.g. series: [120] with min: 0, max: 240), and override dataLabels.value.formatter to format the label (the default formatter appends %).

Basic Circle Chart

We will start with a very simple RadialBar / Circle Chart and gradually change some options.

The above example shows a basic circle chart with no additional customizations. Next, we will do some customizations in track / hollow background and colors

  • Change the stroke's lineCap
  • Change the inner hollow size
  • Customize the fontsize and color of the dataLabels

Next, we make a couple more changes to make it more visually appealing.

Customizing Colors

We will do the following changes to customize track/hollow background color

  • Add a background color to hollow
  • Add a subtle dropShadow to track
  • Fill path with gradient color

Next, we convert this Circle Chart into a Radial Gauge by changing 2 properties - startAngle & endAngle

Custom Angle

  • Change startAngle and endAngle of plotOptions.radialBar
  • Change startAngle and endAngle of plotOptions.radialBar.track
  • Change the hollow background colors of track color

DataLabels

The below code shows how to display data-labels in the inner circle of chart for each series when user hovers over each bar.
There is also an optional total property which shows the addition of all values of the series array. You can apply custom formatter to the plotOptions.dataLabels.radialBar.total.formatter function to modify the output.

plotOptions: { radialBar: { dataLabels: { name: { show: true, }, value: { show: true, fontSize: '14px', formatter: function (val) { return val + '%' } }, total: { show: true, label: 'Total' } } } }

To view all options for dataLabels, please view the radialBar configuration