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 + '%'
                  }
                }
          }
      }
  }

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.

Why Choose ApexCharts

radialBar

Stay Updated