radialBar

Whether to make the first value of series innermost or outermost

Angle from which the radialBars should start

Angle to which the radialBars should end. The sum of the startAngle and endAngle should not exceed 360.

The dial always runs clockwise from startAngle. When startAngle is larger than endAngle, the track, value arc, needle, ticks and bands all sweep clockwise from startAngle across the same span, so swapping the two angles moves the dial rather than reversing it.

Sets the left offset for radialBars

Sets the top offset for radialBars

Available since v5.12.0. Sub-shape used when rendering a gauge (chart.type: 'gauge'). Both shapes honor bands and ticks independently.

Available Options:

• arc (default): fills a colored value-arc proportional to the series value, mirroring the classic radialBar look.
• needle: replaces the value-arc with a rotating pointer/needle. Use together with needle and pivot to style the indicator.

Value-to-angle mapping (lower bound) for both radialBar and gauge. Defaults to 0. Override together with max to use a custom domain (e.g. min: 0, max: 240 for a speedometer). The value arc, needle, ticks and bands all share this domain.

A value outside min to max is drawn at the nearest bound, so a reading below zero needs a negative min to show.

On any domain other than the default 0 to 100, the default value and total labels print the plain number without a %.

Value-to-angle mapping (upper bound). Defaults to 100.

Threshold bands rendered as colored arc segments along the gauge arc. Each band spans [from, to] in the gauge's min..max domain and is filled with color. Useful for showing healthy / warning / critical zones.

plotOptions: {
  radialBar: {
    bands: [
      { from: 0,  to: 50, color: '#00E396', label: 'Healthy' },
      { from: 50, to: 80, color: '#FEB019', label: 'Warning' },
      { from: 80, to: 100, color: '#FF4560', label: 'Critical' }
    ]
  }
}

Styling applied to all bands.

Width of the band arc. Accepts a percentage string (e.g. '97%') relative to the stroke width of the value arc.

Gap between adjacent bands. A number or a '4px' string is pixels along the arc, so it takes a smaller angle on a larger gauge. Since 8.5.0 two units keep the same look at every size: '1%' is a share of the min..max scale and '1.5deg' is an angle.

A band narrower than the gap is not drawn, and the chart warns once in the console naming it.

Before 8.1.0 the gap was applied in value units, so a gap tuned on an older version draws at a different width now: thinner on a 0 to 100 dial, wider on a domain that spans many more units. Re-tune it in pixels.

When true, the background track is hidden if at least one band is defined. The bands then act as the visual track.

How the ends of each band arc are drawn. Available options: butt, round, square.

Available since v8.5.0. Marks at a value on a ring: a target, a limit, last period's reading. They are drawn over the rings and bands, turned to their value around the dial's centre, and animated with the chart (in with the ring on mount, from the old value on a data update). Targets work on every ring of a radialBar and on both gauge shapes, and change with updateOptions.

Targets are an add-on outside the default bundle, free to use. Import apexcharts/features/radial-targets, or add dist/features/radial-targets.js after apexcharts.js on a script-tag page. apexcharts.full.min.js includes it. Without the add-on the dial draws without targets and warns once in the console.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/radial-targets'

new ApexCharts(el, {
  chart: { type: 'radialBar', height: 320 },
  series: [72, 54],
  labels: ['Sales', 'Support'],
  plotOptions: {
    radialBar: {
      targets: [
        { value: 85, seriesIndex: 0, label: { text: 'Goal' } },
        { value: 60, seriesIndex: 1, shape: 'triangle' }
      ]
    }
  }
}).render()

To read where the dial was drawn, for example to place your own overlay, call getRadialScales().

Where the mark sits, in the min..max domain (clamped to it). Pass 'series' to follow the ring's own value, which draws a pointer on the rim. A missing or non-numeric value draws nothing.

The ring the mark sits on, by series index. Defaults to 0.

'line' (default), 'triangle' or 'circle'.

'across' draws the mark across the ring's centre line. 'outside' and 'inside' put it off the ring's outer or inner edge (on a needle gauge with no value arc, off the bands' edge). A triangle points at the ring. Defaults to 'across', or 'outside' for a triangle.

Extent along the radius: pixels, or a percentage string such as '130%' of the ring's thickness. It is a line's length, a triangle's height or a circle's diameter. Defaults to '130%' for a line and 10 for the other shapes.

Extent across the radius in pixels: a line's stroke width or a triangle's base. A circle ignores it. Defaults to 3 for a line and 12 for a triangle.

The mark's colour. Defaults to chart.foreColor, so it follows the theme.

Outline of a triangle or circle, for example so it reads over a band of its own colour.

Outline width. Defaults to 0.

Text drawn off the mark's outer end (its inner end with position: 'inside'). It stays upright at every angle.

The label text.

Pixels between the mark and the text. Defaults to 4.

Font of the label.

Font size of the label.

Font family of the label.

Font weight of the label.

Text colour. Defaults to the target's color.

A class added to the target's apexcharts-radial-target group.

Keeps a target's identity across updates, so when the list is reordered it moves from where it was. Without an id, targets match by position in the array.

Tick marks rendered along the gauge arc. Independent of bands and works for both arc and needle shapes.

Show or hide all tick marks.

Major (large) tick marks. Typically used to highlight round numbers in the gauge domain.

Number of major tick marks to render across the arc.

Length of each major tick mark in pixels.

Stroke width of each major tick mark.

Color of major tick marks.

Where to draw the major tick marks relative to the gauge arc. Available options: inside, outside.

Minor (small) tick marks rendered between major ticks.

Number of minor tick marks between each pair of major ticks.

Length of each minor tick mark in pixels.

Stroke width of each minor tick mark.

Color of minor tick marks.

Where to draw the minor tick marks relative to the gauge arc. Available options: inside, outside.

Numeric labels rendered alongside major ticks.

Show or hide tick labels.

Distance between each label and its tick mark.

Font-size for tick labels.

Font-family for tick labels.

Font-weight for tick labels.

Color for tick labels.

A custom formatter that receives the tick's domain value and returns the string to display.

ticks: {
  labels: {
    formatter: function (value) {
      return value + ' km/h'
    }
  }
}

Styling for the gauge needle. Only used when shape: 'needle'.

Fill color of the needle.

Length of the needle. Accepts a number (pixels) or a percentage string relative to the gauge radius (e.g. '85%').

Width of the needle at its base.

Width of the needle at its tip. Set lower than baseWidth for a tapered pointer.

When true, the filled value-arc is rendered alongside the needle (progress ring plus pointer indicator). When false (default), only the needle is drawn.

Available Options:

• false (default)
• true

Pixel offset of the needle's rotation center on the Y axis. Positive values push the base down (toward the chord midpoint of a ∩-shape partial-arc gauge); negative values push it up. The needle rotates around this shifted point.

Controls the needle's sweep on the first render and when the gauge value changes.

Enable or disable needle animation. When false, the needle lands on its value at once. It also lands at once whenever the chart itself does not animate (chart.animations.enabled, and chart.animations.dynamicAnimation.enabled for updates).

Animation duration in milliseconds. When unset, the needle moves at the value arc's speed: chart.animations.speed on the first render and chart.animations.dynamicAnimation.speed on updates, so the needle and the arc arrive together. Set it to give the needle its own speed for both.

Accepted but not read. The needle settles with a slight overshoot on the first render and eases out without overshoot on updates. Use duration to change how long the sweep takes.

Spacing which will be subtracted from the available hollow size

Size in percentage relative to the total available size of chart

Background color for the hollow part of the radialBars

Optional image URL which can be displayed in the hollow area.

Width of the hollow image

Height of the hollow image

Sets the left offset of hollow image

Sets the top offset of hollow image

If true, the image doesn't exceeds the hollow area and is contained within.

Available Options

• front
• back

Stroke color drawn around the hollow ring. Combine with strokeDasharray to produce a dashed indicator circle around the value text.

Stroke width in pixels of the hollow ring border. Only applied when stroke is set.

SVG stroke-dasharray pattern applied to the hollow ring border. Accepts a single number (uniform dashes), a string of comma/space-separated lengths (e.g. '4 2') or, since 8.5.0, an array of lengths.

Enable a dropshadow for paths of the SVG

Set top offset for shadow

Set left offset for shadow

Set blur distance for shadow

Set the opacity of shadow.

Color of the dropshadow

Show track under the bar lines.

Angle from which the track should start.

Angle to which the track should end.

Color of the track. If you want different color for each track, you can pass an array of colors.

Width of the track

Opacity of the track

Spacing between each track

Enable a dropshadow for the track

Set top offset for track shadow

Set left offset for track shadow

Set blur distance for track shadow

Opacity of the track shadow

Color of the track dropshadow

Whether to display labels inside radialBars or not

Show the name of the respective bar associated with it's value

FontSize of the name in dataLabel

FontFamily of the name in dataLabel

Font-weight of the name in dataLabel

Color of the name in dataLabel

Sets the top offset for name

A custom formatter that receives the series name and returns the string to display as the name label.

dataLabels: {
  name: {
    formatter: function (seriesName) {
      return seriesName.toUpperCase()
    }
  }
}

Show the value label associated with the name label

FontSize of the value label in dataLabel

fontFamily of the value label in dataLabel

Font weight of the value label in dataLabel

Color of the value label in dataLabel

Sets the top offset for value label

A custom formatter function to apply on the value label in dataLabel. It receives the series value and w.

The default formatter appends % on the default 0 to 100 domain, and prints the plain value when min or max is set to anything else.

Show the total of all the series in the inner area of radialBar

Label for "total". Defaults to "Total"

Color of the total label

Font-size of the total label in dataLabel

font-family of the total label in dataLabel

font-weight of the total label in dataLabel

A custom formatter function to apply on the total value. It accepts one parameter w which contains the chart's config and global objects. Defaults to the average of the series values (their sum divided by the number of series), followed by % on the default 0 to 100 domain only.

When using custom angles in a radial bar chart, you can use this option. Here's a demo using this option

Left offset of the labels

Top offset of the labels

Whether to use primary colors or not.

Sets the font-size of legend text elements

Sets the font-family of legend text elements

Sets the font-weight of legend text elements

A custom formatter function to modify the label text

Fire an event when the label is clicked

Start of the band, in the gauge's min to max domain.

End of the band, in the same domain.

Fill colour of the band's arc segment.

Optional label for the band, for use in a legend or tooltip.