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
| Property | Type | Default | Description |
| data (Data Source) | array of records | Sample data | The array of records the chart plots. Bind to a data source query result, a variable, or static rows. |
| chartType | enum | selected at add time | Drives 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:
| Property | Where to Set | Description |
| Value | Content → X Axis → Value | The field plotted on the X axis (categories or numeric dimension). |
| Label | Content → X Axis → Label | Axis caption displayed next to the axis. |
| Type (scale) | Content → X Axis → Type | linear (numeric, proportional), time (chronological), or category (each distinct value equally spaced). Default linear. |
| Plot Periodic Values | Content → X Axis → Plot Periodic Values | Switches to period mode: map a Start value and End value field per row, tick labels use a period format like 02-09 Jan. |
| Tick labels | Content → X Axis (format fields) | Format for axis labels — date format on a time scale; decimal places and compact/standard notation on numeric scales. |
| Group by | Content → X Axis → Group by | A 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
| Format | Description |
| Number | Plain number. Supports decimal places and Compact notation (1200 → 1.2K). |
| Percent | Appends % symbol with configurable decimal places. |
| Currency | Currency code + decimal/notation options. Supports Compact notation. |
| Duration | Time duration with max significant units and precision. |
Series Modes
| Mode | Description |
| Manual | You add each series individually with its Label and Value field. |
| Mapped | The 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.
| Property | Where to Set | Description |
| Type (stacked) | Appearance → Type | Stacked vs Grouped bars. Shown once there is more than one plotted series. Default stacked. |
| Gap Between Bars | Appearance → Gap Between Bars | Spacing inside a grouped cluster (None to lg). Appears only when Type = Grouped. |
| Ticks → position | Appearance → X Axis → Ticks | Category labels Outside Bars (default) or Above Bars. |
| Slots → X-Axis Labels | Content → Slots | On a category axis, replaces axis labels with your own nested block. |
Column Chart
Vertical bars — categories on the horizontal edge, values running upward.
| Property | Where to Set | Description |
| Group by | Content → X Axis → Group by | Always offered on Column regardless of series count (unlike Bar which hides it with multiple series). |
| Type / Gap Between Bars | Appearance | Single 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 Orientation | Appearance → X Axis → Label Orientation | Horizontal / Slanted / Vertical X-axis labels. Offered on a time scale. |
| Data Callout | Series detail panel → Data Callout | Per-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).
| Property | Where to Set | Description |
| Visualisation (per axis) | Content → Y Axis Left/Right → Visualisation | How that axis's series render: COLUMN, LINE, or SCATTER. |
| Series (per axis) | Content → Y Axis Left/Right → Series | Independent series lists for left and right axes. |
| Tick labels (per axis) | Content → Y Axis Left/Right | Independent 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
| Property | Where to Set | Description |
| Tooltip | Content → Tooltip | Custom header/body text around the hover tooltip. |
| Summary | Content → Summary | A row of formatted stats rendered with the chart (String, Number, Currency, Percent, Time). |
| Threshold (add-on) | Content → Add ons | A 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 ons | A brushing control to pan and zoom the X axis. Labelled Scroller on category axes, Range Slider on time/linear axes. |
| Chart Colours | Appearance → Chart Colours | Color assignment by series, X-axis values, group values, or conditions. |
| Legend Position | Appearance → Legend Position | Top or Remove for most types. |
Events & Methods
| Event / Method | Description |
| On Data Point Click | Fires 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 Key | Type | Description |
| {{ id.selectedItem }} | object | The 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
Set up Column chart: Set Chart Type to Column. Bind data with one row per month per region.
Configure axes: Set X Axis → Value to the month field, one series with the revenue field, and Group by to the region field.
Set layout: In Appearance, set Type = Grouped and pick a Gap Between Bars.
Revenue Columns vs Conversion Line (Dual Axes)
Select Dual Axes: Set Chart Type to Dual Axes.
Configure left axis: Set Y Axis Left → Visualisation = Column, series = revenue, format Currency.
Configure right axis: Set Y Axis Right → Visualisation = Line, series = conversion, format Percent.
Related Pages
| Page | Relationship |
| Line & Area Charts | Continuous trend lines and area fills; shares cartesian axis configuration |
| Data Labels & Annotations | Per-bar value labels and Column-only data callout annotations |
| Scatter & Bubble Charts | Two-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.