bar

  
  plotOptions: {
      bar: {
          horizontal: false,
          borderRadius: 0,
          borderRadiusApplication: 'around',
          borderRadiusWhenStacked: 'last',
          columnWidth: '70%',
          barHeight: '70%',
          distributed: false,
          rangeBarOverlap: true,
          rangeBarGroupRows: false,
          colors: {
              ranges: [{
                  from: 0,
                  to: 0,
                  color: undefined
              }],
              backgroundBarColors: [],
              backgroundBarOpacity: 1,
              backgroundBarRadius: 0,
          },
          dataLabels: {
              position: 'top',
              maxItems: 100,
              hideOverflowingLabels: true,
              orientation: horizontal,
              total: {
                enabled: false,
                formatter: undefined,
                offsetX: 0,
                offsetY: 0,
                style: {
                  color: '#373d3f',
                  fontSize: '12px',
                  fontFamily: undefined,
                  fontWeight: 600
                }
              }
          }
      }
  }

plotOptions

bar

horizontal: Boolean

This option will turn a column chart into a horizontal bar chart.

borderRadius: Number

Rounded corners around the bars/columns

Note: This option is available since v3.26.0

borderRadiusApplication: String

Whether to apply border-radius around both ends or only to single end
Accepts one of the 2 options

around
end

borderRadiusWhenStacked: String

Whether to apply border-radius to all bars or only to the data-set that is drawn last
Accepts one of the 2 options

all
last

columnWidth: String

In column charts, columnWidth is the percentage of the available width in the grid-rect.
Accepts ‘0%’ to ‘100%’

barHeight: String

In horizontal bar charts, barHeight is the percentage of the available height in the grid-rect.
Accepts ‘0%’ to ‘100%’

distributed: Boolean

Turn this option to make the bars discrete. Each value indicates one bar per series.

rangeBarOverlap: Boolean

In a range-Bar / timeline chart, the bars should overlap over each other instead of stacking if this option is enabled.

rangeBarGroupRows: Boolean

In a multi-series range-Bar / timeline chart, group rows (horizontal bars) together instead of stacking up. Helpful when there are no overlapping rows but distinct values.

Full example

colors:

ranges: Array

from: Number

Value indicating range’s upper limit

to: Number

Value indicating range’s lower limit

color: String

Color to fill the range with

backgroundBarColors: Array

Custom colors for background rects. The number of colors in the array is repeated if fewer colors than data points are specified.

backgroundBarOpacity: Number

Opacity for background colors of the bar

backgroundBarRadius: Number

Border radius for background rect of the bar

dataLabels:

position: String

Available Options

top
center
bottom

maxItems: Number

Maximum limit of data-labels that can be displayed on a bar chart. If data-points exceed this number, data-labels won’t be shown.

hideOverflowingLabels: Boolean

When there are values that are very close to one another, this property prevents it by hiding overlapping labels.
Note: This affects only stacked charts

orientation: String

Available Options

horizontal
vertical

total:

enabled: String

Enable total data-label in stacked bar charts which adds all the values of the category for those stacked data-sets

formatter: Function

Applies a custom function for the total value. The function accepts 2 params where the 1st one is the value while the 2nd one is the config object.

offsetX: Number

Sets the left offset of the total label

offsetY: Number

Sets the top offset of the total label

style:

color: String

Color of the total label

fontSize: String

FontSize of the total label

fontFamily: String

FontFamily of the total label

fontWeight: String | Number

Font-weight of the total label

Why Choose ApexCharts

bar

Stay Updated