AG Studio Launch Week 🚀🚀🚀 28 Sep - 2 Oct 2026 🚀🚀🚀 Join now
AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
What's New
Getting started
Quick StartKey FeaturesCommunity vs. Enterprise
AI Features
Skills
Core features
Specialised Charts
Org ChartQuadrant Chart
Series
BarLineAreaScatterBubblePieDonutCombinationBox PlotCandlestickOHLCHeatmapHistogramNightingaleRadar AreaRadar LineRadial BarRadial ColumnRange AreaRange BarWaterfallSunburstTreemapSankeyChordFunnelCone FunnelPyramid
Gauges
Radial GaugeLinear Gauge

JavaScript ChartsBar Series

Version 14.2.0

A Bar Series visualises numerical data with proportional bars that can be grouped, stacked or overlaid, and displayed in either vertical or horizontal layouts.

Simple Bar Copy Link

By default, bars are grouped, enabling side-by-side comparison of data against the same category.

To create a Bar Series, use the bar series type.

{
    series: [
        { type: 'bar', xKey: 'quarter', yKey: 'iphone', yName: 'iPhone' },
        { type: 'bar', xKey: 'quarter', yKey: 'mac', yName: 'Mac' },
        { type: 'bar', xKey: 'quarter', yKey: 'ipad', yName: 'iPad' },
        { type: 'bar', xKey: 'quarter', yKey: 'wearables', yName: 'Wearables' },
        { type: 'bar', xKey: 'quarter', yKey: 'services', yName: 'Services' },
    ],
}

In this configuration:

Horizontal Bar Copy Link

To show a Horizontal Bar Series, set direction: 'horizontal'.

{
    series: [
        { type: 'bar', direction: 'horizontal', xKey: 'quarter', yKey: 'iphone', yName: 'iPhone' },
        // ...
    ],
}

When the direction is 'horizontal' the xKey values will be plotted on the default y axis, while the yKey values will be plotted on the default x axis.

Stacked Bar Copy Link

Stacked bars are useful for visualising data in a cumulative manner across different categories.

To stack bars enable the stacked series option.

{
    series: [
        { type: 'bar', xKey: 'quarter', yKey: 'iphone', stacked: true },
        // ...
    ],
}

Normalised Bar Copy Link

The normalizedTo series option allows normalising bar totals to any non-zero value.

{
    series: [
        { type: 'bar', xKey: 'quarter', yKey: 'iphone', stacked: true, normalizedTo: 100 },
        // ...
    ],
}

Grouped Stacks Copy Link

The stackGroup property allows for stacking bars in distinct sets by specifying which series are grouped together. Series with an unspecified stackGroup will be stacked together by default.

{
    series: [
        { type: 'bar', xKey: 'quarter', yKey: 'iphone', stackGroup: 'Devices' },
        { type: 'bar', xKey: 'quarter', yKey: 'mac', stackGroup: 'Devices' },
        { type: 'bar', xKey: 'quarter', yKey: 'ipad', stackGroup: 'Devices' },
        { type: 'bar', xKey: 'quarter', yKey: 'wearables', stackGroup: 'Other' },
        { type: 'bar', xKey: 'quarter', yKey: 'services', stackGroup: 'Other' },
    ],
}

A matching legendItemName provided enables the creation of multiple bar series with synchronised legend items. When a legend item is clicked, all items possessing a matching legendItemName will be toggled collectively.

Grouped Category Copy Link

To display the bars in hierarchical grouped categories, use a Grouped Category Axis.

Fixed Width Bars Copy Link

The width of each Bar series can be set to a fixed pixel value or a proportion of the default width.

See Series Bars for details on customising bar widths and band alignment.

Actual vs Target Bars Copy Link

Multiple Bar series can be overlaid to visualise actual vs target values.

See Actual vs Target Bars for more details.

Customisation Copy Link

Corner Radius Copy Link

The corner radius can be customised with the cornerRadius property.

{
    series: [
        { type: 'bar', xKey: 'quarter', yKey: 'iphone', stacked: true, cornerRadius: 10 },
        { type: 'bar', xKey: 'quarter', yKey: 'mac', stacked: true, cornerRadius: 10 },
        // ...
    ],
}

A cornerRadius should be provided for all series within a stacked bar. The corner radius will only be applied at the end of a stack, but may affect more than one series.

Labels Copy Link

See Series Labels for how to enable and style Bar Series labels, including Placement and Orientation, which have bar-specific values.

Bar Chart Examples Copy Link

See more Bar Chart examples in the AG Charts Gallery.

Bar Chart Example
Grouped Stacked Bar Chart Example
Stacked Bar Chart Example
Horizontal Bar Chart Example
Stacked Horizontal Bar Chart Example
Grouped Horizontal Bar Chart Example

API Reference Copy Link

Properties available on the AgBarSeriesOptions interface.

type required 'bar'
Configuration for the Bar Series.
xKey required DatumKey
The key to use to retrieve x-values from the data.
yKey required DatumKey
The key to use to retrieve y-values from the data.
grouped boolean
Whether to group together (adjacently) separate bars.
stacked boolean
An option indicating if the bars should be stacked.
stackGroup string
An ID to be used to group stacked items.
normalizedTo number
The number to normalise the bar stacks to. Has no effect when `grouped` is `true`. For example, if `normalizedTo` is set to `100`, the bar stacks will all be scaled proportionally so that each of their totals is 100.
errorBar AgErrorBarOptions
Configuration for the Error Bars.
id string default: auto-generated value
Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value.
context ContextDefault
Context object to use in callbacks.
data DatumDefault[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible boolean
Whether to display the series.
cursor string
The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
selection AgSelectionOptions
Configuration for data selection.
nodeClickRange InteractionRange
Range from a node that a click triggers the listener.
showInLegend boolean
Whether to include the series in the legend.
listeners AgSeriesListeners
A map of event names to event listeners.
xKeyAxis string default: 'x'
The key of the x-axis to which this series is bound.
yKeyAxis string default: 'y'
The key of the y-axis to which this series is bound.
xName string
A human-readable description of the x-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
yName string
Human-readable description of the y-values. If supplied, a corresponding `yName` will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
legendItemName string
Human-readable description of the y-values. If supplied, matching items with the same value will be toggled together.
direction 'horizontal' | 'vertical'
Bar rendering direction. __Note:__ This option affects the layout direction of X and Y data values.
crisp boolean
Align bars to whole pixel values to remove anti-aliasing.
shadow AgDropShadowOptions
Configuration for the shadow used behind the chart series.
label AgBarSeriesLabelOptions
Configuration for the labels shown on bars.
tooltip AgSeriesTooltip
Series-specific tooltip configuration.
styler Styler
Function used to return formatting for entire series, based on the given parameters.
itemStyler Styler
Function used to return formatting for individual bars, based on the given parameters.
highlight AgMultiSeriesHighlightOptions
Configuration for highlighting when a series or legend item is hovered over.
segmentation AgSeriesSegmentation
Configuration for styling series as separate segments.
width PixelSize
Fixed width of each bar in the series.
widthRatio Ratio
Ratio of the bandwidth (or specified width) to use for the width for each bar in the series.
cornerRadius PixelSize
Apply rounded corners to each bar.
fill AgColorType
The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
fillOpacity Opacity
The opacity of the fill colour.
stroke AgCssColorOrRef
The colour for the stroke.
strokeWidth PixelSize
The width of the stroke in pixels.
strokeOpacity Opacity
The opacity of the stroke colour.
lineDash PixelSize[]
An array specifying the length in pixels of alternating dashes and gaps.
lineDashOffset PixelSize
The initial offset of the dashed line in pixels.
showInMiniChart boolean
Whether to include the series in the Mini Chart.