radialBar


plotOptions: {
    radialBar: {
        size: undefined,
        inverseOrder: false,
        startAngle: 0,
        endAngle: 360,
        offsetX: 0,
        offsetY: 0,
        hollow: {
            margin: 5,
            size: '50%',
            background: 'transparent',
            image: undefined,
            width: 150,
            height: 150,
            offsetX: 0,
            offsetY: 0,
            clipped: true,
            position: 'front',
        },
        track: {
            show: true,
            startAngle: undefined,
            endAngle: undefined,
            background: '#f2f2f2',
            strokeWidth: '97%',
            opacity: 1,
            margin: 5, 
            dropShadow: {
                enabled: false,
                top: 0,
                left: 0,
                blur: 3,
                opacity: 0.5
            }
        },
        dataLabels: {
            showOn: 'always',
            show: true,
            name: {
                show: true,
                fontSize: '22px',
                color: undefined,
                offsetY: -10
              },
              value: {
                show: true,
                fontSize: '16px',
                color: undefined,
                offsetY: 16,
                formatter: function (val) {
                  return val + '%'
                }
              },
              total: {
                show: false,
                label: 'Total',
                color: '#373d3f',
                formatter: function (w) {
                  return w.globals.seriesTotals.reduce((a, b) => {
                    return a + b
                  }, 0) / w.globals.series.length + '%'
                }
              }
        }
    }
}

plotOptions

radialBar

size: Number

Manual size of the radialBars instead of calculating automatically from default height / width.

inverseOrder: Boolean

Whether to make the first value of series innermost or outermost

startAngle: Number

Angle from which the radialBars should start

endAngle: Number

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

offsetX: Number

Sets the left offset for radialBars

offsetY: Number

Sets the top offset for radialBars

hollow:

margin: Number

Spacing which will be subtracted from the available hollow size

size: String

Size in percentage relative to the total available size of chart

background: String

Background color for the hollow part of the radialBars

image: String

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

imageWidth: Number

Width of the hollow image

imageHeight: Number

Height of the hollow image

hollowImageOffsetX: Number

Sets the left offset of hollow image

imageOffsetY: Number

Sets the top offset of hollow image

imageClipped: Boolean

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

position: String

Available Options

front
back

dropShadow

enabled: Boolean

Enable a dropshadow for paths of the SVG
See example

top: Number

Set top offset for shadow

left: Number

Set left offset for shadow

blur: Number

Set blur distance for shadow

opacity: Number

Set the opacity of shadow.

track:

show: Boolean

Show track under the bar lines.

startAngle: Number

Angle from which the track should start.

endAngle: Number

Angle to which the track should end.

background: Color

Color of the track

width: Number

Width of the track

opacity: Number

Opacity of the track

margin: Number

Spacing between each track

dataLabels:

showOn: String

Deprecated

Available Options

always
hover

show: Boolean

Whether to display labels inside radialBars or not

name

show: Boolean

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

fontSize: String

FontSize of the name in dataLabel

color: Color

Color of the name in dataLabel

offsetY: Number

Sets the top offset for name

value

show: Boolean

Show the value label associated with the name label

fontSize: String

FontSize of the value label in dataLabel

color: Color

Color of the value label in dataLabel

offsetY: Number

Sets the top offset for value label

formatter: function

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

total

show: Boolean

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

label: String

Label for “total”. Defaults to “Total”

color: Color

Color of the total label

formatter: function

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

Sponsorship