Bar-X series
A Bar-X series displays vertical columns. Each point provides an x coordinate or category and a y value. Set series.data[].type to bar-x.
See the BarXSeries API reference for all series options and ChartSeriesOptions for shared defaults.
Grouping and stacking
Multiple series are grouped by default. Use stacking: 'normal' to stack their values or stacking: 'percent' to show their proportions. Percent stacking supports only non-negative values. Use stackId to create separate stacks and series.options['bar-x'].stackGap to set the gap between segments in pixels.
In percent stacks, the available plot height is shared between the segments and their gaps. The outer column edge aligns with the visible edge of the 100% grid line. Zero and skipped null values do not add gaps. If the requested gaps exceed the plot height, they are reduced to fit and segment heights become zero.
Set grouping: false to overlay bars at the category center without taking up grouped slots. Non-stacked bars start at the value-axis baseline; stacking still accumulates values within each stackId. Omitted or true grouping preserves side-by-side positions.
Later series in series.data cover earlier ones, including their borders. The example places Plan before Actual to draw Actual on top.
Bar thickness is shared through series.options['bar-x'].barPadding and barMaxWidth. Per-series thickness is tracked in #761.
All series in the same stack must use the same grouping value; omitted grouping counts as true. Mixing values within a stack is a configuration error. To overlay complete stacks, give each stack a distinct stackId and set grouping: false on every series in those stacks.
Appearance
Borders
Set borderWidth in pixels (default 0), borderColor as a CSS color, and borderRadius in pixels. Set defaults in series.options['bar-x'] and override them on individual series. The default border color is var(--gcharts-shape-border-color).
Borders are drawn inside the column bounds and follow rounded corners. For stacks, only the outer value ends are rounded, including on reversed axes. Borders are disabled in the range slider and when the column width or height is at most twice the border width. Point-level border overrides are not supported.
Opacity
Set opacity from 0 to 1 in series.options['bar-x'], and override it on individual series or points. Omitted or null values inherit the next level, defaulting to 1. Opacity affects the fill and border, including the bar-x range slider, and leaves normal data labels opaque.
The legend symbol follows series opacity. Tooltip markers follow point opacity, falling back to series opacity. Legend and tooltip text remain opaque; hidden series keep the standard inactive legend symbol.
The example uses the default palette with rounded borders and a shared opacity of 0.6.
States
Hover changes the fill color; the border retains its configured color. The inactive state multiplies the resolved fill and border opacity by states.inactive.opacity, so transparent bars stay transparent. SVG data labels use the inactive opacity directly. When it ends, bars restore their point or series opacity.