radialBar

radialBar: {
  inverseOrder: boolean,
  startAngle: number,
  endAngle: number,
  offsetX: number,
  offsetY: number,
  hollow: { ... },
    margin: number,
    size: string,
    background: string,
    image: string,
    imageWidth: number,
    imageHeight: number,
    imageOffsetX: number,
    imageOffsetY: number,
    imageClipped: boolean,
    position: 'front' | 'back',
    dropShadow: ApexDropShadow,
      enabled: boolean,
      top: number,
      left: number,
      blur: number,
      opacity: number,
      color: string,
  track: { ... },
    show: boolean,
    startAngle: number,
    endAngle: number,
    background: string | string[],
    strokeWidth: string,
    opacity: number,
    margin: number,
    dropShadow: ApexDropShadow,
      enabled: boolean,
      top: number,
      left: number,
      blur: number,
      opacity: number,
      color: string,
  dataLabels: { ... },
    show: boolean,
    name: { ... },
      show: boolean,
      fontFamily: string,
      fontWeight: string | number,
      fontSize: string,
      color: string,
      offsetY: number,
    value: { ... },
      show: boolean,
      fontFamily: string,
      fontSize: string,
      fontWeight: string | number,
      color: string,
      offsetY: number,
      formatter: Function,
    total: { ... },
      show: boolean,
      label: string,
      color: string,
      fontFamily: string,
      fontWeight: string | number,
      fontSize: string,
      formatter: Function,
  barLabels: { ... },
    enabled: boolean,
    offsetX: number,
    offsetY: number,
    useSeriesColors: boolean,
    fontFamily: string,
    fontWeight: string | number,
    fontSize: string,
    formatter: Function,
    onClick: Function,
}

radialBar.hollow.size

Deprecated. This property is no longer available.

Default: false

Whether to make the first value of series innermost or outermost

Default: 0

Angle from which the radialBars should start

Default: 360

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

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.

Gauge value-to-angle mapping (lower bound). Defaults to 0. Override together with max to use a custom domain (e.g. min: 0, max: 240 for a speedometer).

Gauge 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 gauge radius.

Gap in pixels between adjacent bands.

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.

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.

Radius of the needle's base (the wide end attached to the pivot), in pixels.

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.

Controls the sweep animation when the gauge value changes.

Enable or disable needle animation.

Animation duration in milliseconds.

Easing function name applied to the needle sweep (e.g. '<>' for ease-in-out, '-' for linear).

Styling for the center pivot disk that the needle rotates around. Only relevant for shape: 'needle'.

Show or hide the pivot disk.

Fill color of the pivot disk.

Border color of the pivot disk.

Border width of the pivot disk.

radialBar.hollow.margin

Spacing which will be subtracted from the available hollow size

radialBar.hollow.size

Size in percentage relative to the total available size of chart

radialBar.hollow.background

Background color for the hollow part of the radialBars

radialBar.hollow.image

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

radialBar.hollow.imageWidth

Width of the hollow image

radialBar.hollow.imageHeight

Height of the hollow image

radialBar.hollow.imageOffsetX

Sets the left offset of hollow image

radialBar.hollow.imageOffsetY

Sets the top offset of hollow image

radialBar.hollow.imageClipped

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

radialBar.hollow.position

Available Options

front
back

radialBar.hollow.dropShadow

radialBar.hollow.dropShadow.enabled

Enable a dropshadow for paths of the SVG

radialBar.hollow.dropShadow.top

Set top offset for shadow

radialBar.hollow.dropShadow.left

Set left offset for shadow

radialBar.hollow.dropShadow.blur

Set blur distance for shadow

radialBar.hollow.dropShadow.opacity

Set the opacity of shadow.

radialBar.hollow.dropShadow.color

Color of the dropshadow

radialBar.track.show

Show track under the bar lines.

radialBar.track.startAngle

Angle from which the track should start.

radialBar.track.endAngle

Angle to which the track should end.

radialBar.track.background

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

radialBar.track.strokeWidth

Width of the track

radialBar.track.opacity

Opacity of the track

radialBar.track.margin

Spacing between each track

radialBar.track.dropShadow

radialBar.track.dropShadow.enabled

Enable a dropshadow for the track

radialBar.track.dropShadow.top

Set top offset for track shadow

radialBar.track.dropShadow.left

Set left offset for track shadow

radialBar.track.dropShadow.blur

Set blur distance for track shadow

radialBar.track.dropShadow.opacity

Opacity of the track shadow

radialBar.track.dropShadow.color

Color of the track dropshadow

radialBar.dataLabels.show

Whether to display labels inside radialBars or not

radialBar.dataLabels.name

radialBar.dataLabels.name.show

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

radialBar.dataLabels.name.fontSize

FontSize of the name in dataLabel

radialBar.dataLabels.name.fontFamily

FontFamily of the name in dataLabel

radialBar.dataLabels.name.fontWeight

Font-weight of the name in dataLabel

radialBar.dataLabels.name.color

Color of the name in dataLabel

radialBar.dataLabels.name.offsetY

Sets the top offset for name

radialBar.dataLabels.value

radialBar.dataLabels.value.show

Show the value label associated with the name label

radialBar.dataLabels.value.fontSize

FontSize of the value label in dataLabel

radialBar.dataLabels.value.fontFamily

fontFamily of the value label in dataLabel

radialBar.dataLabels.value.fontWeight

Font weight of the value label in dataLabel

radialBar.dataLabels.value.color

Color of the value label in dataLabel

radialBar.dataLabels.value.offsetY

Sets the top offset for value label

radialBar.dataLabels.value.formatter

A custom formatter function to apply on the value label in dataLabel

radialBar.dataLabels.total

radialBar.dataLabels.total.show

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

radialBar.dataLabels.total.label

Label for "total". Defaults to "Total"

radialBar.dataLabels.total.color

Color of the total label

radialBar.dataLabels.total.fontSize

Font-size of the total label in dataLabel

radialBar.dataLabels.total.fontFamily

font-family of the total label in dataLabel

radialBar.dataLabels.total.fontWeight

font-weight of the total label in dataLabel

radialBar.dataLabels.total.formatter

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 a total of all series percentage divided by the length of series.

radialBar.barLabels.enabled

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

radialBar.barLabels.offsetX

Left offset of the labels

radialBar.barLabels.offsetY

Top offset of the labels

radialBar.barLabels.useSeriesColors

Whether to use primary colors or not.

radialBar.barLabels.fontSize

Sets the font-size of legend text elements

radialBar.barLabels.fontFamily

Sets the font-family of legend text elements

radialBar.barLabels.fontWeight

Sets the font-weight of legend text elements

radialBar.barLabels.formatter

A custom formatter function to modify the label text

radialBar.barLabels.onClick

Fire an event when the label is clicked

radialBar

Configuration Structure

#size

#inverseOrder

#startAngle

#endAngle

#offsetX

#offsetY

#shape

#min

#max

#bands

#bandsStyle

#strokeWidth

#gap

#hideTrackWhenPresent

#linecap

#ticks

#show

#major

#count

#length

#width

#color

#placement

#minor

#count

#length

#width

#color

#placement

#labels

#show

#offset

#fontSize

#fontFamily

#fontWeight

#color

#formatter

#needle

#color

#baseRadius

#length

#baseWidth

#tipWidth

#animation

#enabled

#duration

#easing

#pivot

#show

#color

#strokeColor

#strokeWidth

#margin

#size

#background

#image

#imageWidth

#imageHeight

#imageOffsetX

#imageOffsetY

#imageClipped

#position

#dropShadow

#enabled

#top

#left

#blur

#opacity

#color

#track

#show

#startAngle

#endAngle

#background

#strokeWidth

#opacity

#margin

#dropShadow

`size`

`inverseOrder`

`startAngle`

`endAngle`

`offsetX`

`offsetY`

`shape`

`min`

`max`

`bands`

`bandsStyle`

`strokeWidth`

`gap`

`hideTrackWhenPresent`

`linecap`

`ticks`

`show`

`major`

`count`

`length`

`width`

`color`

`placement`

`minor`

`count`

`length`

`width`

`color`

`placement`

`labels`

`show`

`offset`

`fontSize`

`fontFamily`

`fontWeight`

`color`

`formatter`

`needle`

`color`

`baseRadius`

`length`

`baseWidth`

`tipWidth`

`animation`

`enabled`

`duration`

`easing`

`pivot`

`show`

`color`

`strokeColor`

`strokeWidth`

`margin`

`size`

`background`

`image`

`imageWidth`

`imageHeight`

`imageOffsetX`

`imageOffsetY`

`imageClipped`

`position`

`dropShadow`

`enabled`

`top`

`left`

`blur`

`opacity`

`color`

`track`

`show`

`startAngle`

`endAngle`

`background`

`strokeWidth`

`opacity`

`margin`

`dropShadow`

`enabled`

`top`