radialBar

    
    plotOptions: {
        radialBar: {
            inverseOrder: false,
            startAngle: 0,
            endAngle: 360,
            offsetX: 0,
            offsetY: 0,
            hollow: {
                margin: 5,
                size: '50%',
                background: 'transparent',
                image: undefined,
                imageWidth: 150,
                imageHeight: 150,
                imageOffsetX: 0,
                imageOffsetY: 0,
                imageClipped: true,
                position: 'front',
                dropShadow: {
                  enabled: false,
                  top: 0,
                  left: 0,
                  blur: 3,
                  opacity: 0.5
                }
            },
            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: {
                show: true,
                name: {
                    show: true,
                    fontSize: '16px',
                    fontFamily: undefined,
                    fontWeight: 600,
                    color: undefined,
                    offsetY: -10
                  },
                  value: {
                    show: true,
                    fontSize: '14px',
                    fontFamily: undefined,
                    fontWeight: 400,
                    color: undefined,
                    offsetY: 16,
                    formatter: function (val) {
                      return val + '%'
                    }
                  },
                  total: {
                    show: false,
                    label: 'Total',
                    color: '#373d3f',
                    fontSize: '16px',
                    fontFamily: undefined,
                    fontWeight: 600,
                    formatter: function (w) {
                      return w.globals.seriesTotals.reduce((a, b) => {
                        return a + b
                      }, 0) / w.globals.series.length + '%'
                    }
                }
            },
            barLabels: {
                enabled: false,
                offsetX: 0,
                offsetY: 0,
                useSeriesColors: true,
                fontFamily: undefined,
                fontWeight: 600,
                fontSize: '16px',
                formatter: (val) => {
                  return val
                },
                onClick: undefined,
            },
        }
    }

plotOptions

radialBar

size: Number

Deprecated. This property is no longer available.

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

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

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 || Array of Colors

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

width: Number

Width of the track

opacity: Number

Opacity of the track

margin: Number

Spacing between each track

dataLabels:

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

fontFamily: String

FontFamily of the name in dataLabel

fontWeight: String | Number

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

fontFamily: String

fontFamily of the value label in dataLabel

fontWeight: String | Number

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

fontSize: String

Font-size of the total label in dataLabel

fontFamily: String

font-family of the total label in dataLabel

fontWeight: String | Number

font-weight of the total label in dataLabel

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.

barLabels:

enabled: Boolean

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

offsetX: Number

Left offset of the labels

offsetY: Number

Top offset of the labels

useSeriesColors: Boolean

Whether to use primary colors or not.

fontSize: String

Sets the font-size of legend text elements

fontFamily: String

Sets the font-family of legend text elements

fontWeight: String | Number

Sets the font-weight of legend text elements

formatter: function

A custom formatter function to modify the label text

onClick: function

Fire an event when the label is clicked

Why Choose ApexCharts

radialBar

Stay Updated