Unify Logo Footer.svg
Unify Applications
Logo
Bar & Column Charts

Bar & Column Charts

Logo

9 mins READ

Overview

Bar and Column charts are cartesian charts within the single Chart block. Bar renders horizontal bars with categories on the vertical edge; Column renders vertical bars with categories on the horizontal edge. Both share the same X-axis configuration, series system, and add-ons. Switch between them via Chart Type in the Content inspector — switching never loses your configuration when the data fits.

Tip: Column is always vertical bars. Bar is always horizontal bars. Switch between them rather than trying to rotate one. Column always offers Group by; Bar only offers Group by while there is at most one series.

Chart Block Basics

The Chart block covers 18 plot types from a single Chart Type picker. Changing the type swaps the entire Content and Appearance inspector for the new type's property set. When the current configuration fits the new type, data mappings are carried over (though chart colors reset). When they don't fit, the block resets to the new type's defaults.

Data Binding

PropertyTypeDefaultDescription
data (Data Source)array of recordsSample dataThe array of records the chart plots. Bind to a data source query result, a variable, or static rows.
chartTypeenumselected at add timeDrives everything in the inspector. Set to BAR or COLUMN for these chart types.

X Axis Configuration

Both Bar and Column configure the X axis identically:

PropertyWhere to SetDescription
ValueContent → X Axis → ValueThe field plotted on the X axis (categories or numeric dimension).
LabelContent → X Axis → LabelAxis caption displayed next to the axis.
Type (scale)Content → X Axis → Typelinear (numeric, proportional), time (chronological), or category (each distinct value equally spaced). Default linear.
Plot Periodic ValuesContent → X Axis → Plot Periodic ValuesSwitches to period mode: map a Start value and End value field per row, tick labels use a period format like 02-09 Jan.
Tick labelsContent → X Axis (format fields)Format for axis labels — date format on a time scale; decimal places and compact/standard notation on numeric scales.
Group byContent → X Axis → Group byA second dimension pivoted into one bar series per group value. Bar: available only with at most one series. Column: always available.

Y Axis & Series

The Y axis carries the value axis label, tick formatting, and the series list. Each series has a Label and a Value field.

Y Axis Tick Label Formats

FormatDescription
NumberPlain number. Supports decimal places and Compact notation (1200 → 1.2K).
PercentAppends % symbol with configurable decimal places.
CurrencyCurrency code + decimal/notation options. Supports Compact notation.
DurationTime duration with max significant units and precision.

Series Modes

ModeDescription
ManualYou add each series individually with its Label and Value field.
MappedThe series list is generated from a bound array — one series per row. New rows in the source appear as new series automatically.

Bar Chart

Horizontal bars — categories on the vertical edge, values running horizontally.

PropertyWhere to SetDescription
Type (stacked)Appearance → TypeStacked vs Grouped bars. Shown once there is more than one plotted series. Default stacked.
Gap Between BarsAppearance → Gap Between BarsSpacing inside a grouped cluster (None to lg). Appears only when Type = Grouped.
Ticks → positionAppearance → X Axis → TicksCategory labels Outside Bars (default) or Above Bars.
Slots → X-Axis LabelsContent → SlotsOn a category axis, replaces axis labels with your own nested block.

Column Chart

Vertical bars — categories on the horizontal edge, values running upward.

PropertyWhere to SetDescription
Group byContent → X Axis → Group byAlways offered on Column regardless of series count (unlike Bar which hides it with multiple series).
Type / Gap Between BarsAppearanceSingle series + Group by → Type toggle; multiple series without Group by → Type toggle; multiple series with Group by → only Gap Between Bars (layout forced stacked).
Label OrientationAppearance → X Axis → Label OrientationHorizontal / Slanted / Vertical X-axis labels. Offered on a time scale.
Data CalloutSeries detail panel → Data CalloutPer-series annotation from a second field printed above each bar. Column is the only chart type offering this. See Annotations.

Dual Axes Chart

Two independent value axes — Y Axis Left and Y Axis Right — each with its own series list, value format, and visualization type. Use it to overlay measures with different units (revenue columns against a conversion-rate line).

PropertyWhere to SetDescription
Visualisation (per axis)Content → Y Axis Left/Right → VisualisationHow that axis's series render: COLUMN, LINE, or SCATTER.
Series (per axis)Content → Y Axis Left/Right → SeriesIndependent series lists for left and right axes.
Tick labels (per axis)Content → Y Axis Left/RightIndependent value formats per axis.

Note: Dual Axes has no Group by and no Threshold add-on. When both axes are set to Column, Bar Width and Gap Between Bars move up to the top level and apply to both. Switching a multi-series chart to Dual Axes puts the first series on the left axis and the second on the right; further series are dropped.

Common Chart Properties

PropertyWhere to SetDescription
TooltipContent → TooltipCustom header/body text around the hover tooltip.
SummaryContent → SummaryA row of formatted stats rendered with the chart (String, Number, Currency, Percent, Time).
Threshold (add-on)Content → Add onsA reference line at a single value or a min–max band. Available on Bar, Column, and Line (not Dual Axes).
Scroller / Range Slider (add-on)Content → Add onsA brushing control to pan and zoom the X axis. Labelled Scroller on category axes, Range Slider on time/linear axes.
Chart ColoursAppearance → Chart ColoursColor assignment by series, X-axis values, group values, or conditions.
Legend PositionAppearance → Legend PositionTop or Remove for most types.

Events & Methods

Event / MethodDescription
On Data Point ClickFires when user clicks a bar. Payload is the clicked record (all fields). Use to filter a table, open a detail drawer, etc.

Exposed State

State KeyTypeDescription
{{ id.selectedItem }}objectThe last clicked data point's record

Behavior & Gotchas

⚠ Only the first row per category is plotted

On category and time scales, a second row with the same X value is silently dropped — values are not merged or summed. Aggregate your data before binding it. Rows with a missing or empty category are also dropped.

⚠ Non-numeric series values plot as zero

A null, missing, or non-numeric value in a series field renders as 0 — the bar still exists rather than leaving a gap.

⚠ Multiple series + Group by forces stacked Column on a category axis

Combining more than one series with a Group by removes the Grouped option and time/linear scale choices — the chart is forced to stacked bars on a category scale.

⚠ Bar hides Group by once you add a second series

On Bar, the Group by picker is only present while the series list has at most one entry. Column keeps it visible always. To group a multi-series bar chart, remove series down to one first.

⚠ Data labels vanish when the layout can't place them

On Bar and Column, data labels are only supported for a single series, or for multiple series in Grouped layout without a Group by. Stacking or adding a Group by silently switches every series' data labels off.

⚠ Scroller caps chart height at 400px

When the Scroller add-on is active, the chart's computed height stops growing at 400px. The scroller is the intended way to reach the rest of the data.

Common Patterns

Grouped Monthly Comparison

  1. Set up Column chart: Set Chart Type to Column. Bind data with one row per month per region.

  2. Configure axes: Set X Axis → Value to the month field, one series with the revenue field, and Group by to the region field.

  3. Set layout: In Appearance, set Type = Grouped and pick a Gap Between Bars.

Revenue Columns vs Conversion Line (Dual Axes)

  1. Select Dual Axes: Set Chart Type to Dual Axes.

  2. Configure left axis: Set Y Axis Left → Visualisation = Column, series = revenue, format Currency.

  3. Configure right axis: Set Y Axis Right → Visualisation = Line, series = conversion, format Percent.

PageRelationship
Line & Area ChartsContinuous trend lines and area fills; shares cartesian axis configuration
Data Labels & AnnotationsPer-bar value labels and Column-only data callout annotations
Scatter & Bubble ChartsTwo-dimensional point plots; shares cartesian axis machinery

Frequently Asked Questions

What is the difference between a Bar chart and a Column chart?

Both plot the same data in the same way — they differ only in orientation. A Column chart renders bars vertically (categories on the X axis, values on the Y axis). A Bar chart renders bars horizontally (categories on the Y axis, values on the X axis). Column charts are better for time-series comparisons; Bar charts are better for long category labels.

How do I add a second Y axis?

Select Dual Axes as the Chart Type. This gives you two independent Y axes — Axis A (left) and Axis B (right). Assign each series to an axis in the series configuration. Each axis has its own format and scale settings.

My X-axis labels are overlapping. How do I fix this?

In X Axis → Tick Labels, enable the Rotate option and choose a rotation angle (e.g., 45°). You can also reduce the number of ticks by enabling auto-tick reduction, or shorten the label text in your data source before binding.

Can I stack and group bars at the same time?

No. The Type option on a Bar chart is either stacked or grouped — you cannot combine both simultaneously on a single series set. If you need a mix, consider using a Dual Axes chart where one axis shows a stacked Column and the other shows a Line.

How do I highlight a threshold line on a bar chart?

Use the Threshold property in the Common Properties section. Add a threshold with a fixed value and a label. The threshold renders as a horizontal line across all bars. Apply a distinct color to make it stand out. For a dynamic threshold, bind the value to a variable or data source field.