• What is a Radial Bar Chart/Circular Gauge?
• What are Radial Bar Charts used for?
• How do you make a Radial Bar?
• Basic Circle Chart
• Custom Angle
• DataLabels

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.

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.

Keep in mind that the value of these charts must be in percentage (between 0 and 100). You can still display the original value in labels, but the data presented in series must always be in a percentage.

Basic Circle Chart #

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

$data = [
    [
        'sport',
        'series-1'
    ],
    [
        'Cricket',
        70
    ]
];
\koolreport\apexcharts\RadialBarChart::create(array(
    "dataSource" => $data,
    "columns" => array(
        "sport",
        "series-1"
    ),
    

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 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

  "options" => [

  'plotOptions | radialBar' => [
      'offsetY' => 0,
      'startAngle' => 0,
      'endAngle' => 270,
      'hollow' => [
          'margin' => 5,
          'size' => '30%',
          'background' => 'transparent',
          'image' => null
      ],
  ],
  

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.

'options' => [
    '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