Chart styling
The styling every chart shares: legend, axes, grid, title, value labels, categories, style, tooltip and colours, with every option explained.
10 min read
On this page
Every chart shares these options on the Style tab of the inspector. Each chart's own page lists which of them apply to it and adds its own options. "Automatic" means BankSync picks a value from the chart's size and data.
Legend#
The key that names each series or category and shows its colour.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Show legend | Show or hide the legend. It only appears when the chart has two or more series or categories. | On or off | Automatic |
| Legend position | Where the legend sits around the chart. Inline right writes each name at the end of its line instead, on line charts. | Top, Right, Bottom, Left, Inline right | Automatic |
| Legend title | A heading shown before the legend items, such as the name of the field. | Text | Automatic |
| Legend title size | Text size of the legend title, in pixels. | Number | Automatic |
| Legend title colour | Colour of the legend title text. | Colour | Automatic |
| Marker size | Size of the coloured marker next to each legend item, in pixels. | Number | Automatic |
| Marker shape | Shape of the legend markers. Circle and line are drawn as chosen; the other shapes show as squares. | Circle, Square, Triangle, Diamond, Line | Automatic |
| Legend text size | Text size of the legend item names, in pixels. | Number | Automatic |
| Legend text colour | Colour of the legend item names. | Colour | Automatic |
| Item spacing | Gap between legend items, in pixels. | Number | Automatic |
| Legend background | Fill colour behind the legend block. Leave empty for no background. | Text | Automatic |
| Legend border colour | Draws an outline in this colour around the legend block. | Colour | Automatic |
| Legend corner radius | Rounds the corners of the legend background or border, in pixels. Has no effect without a background or border colour. | Number | Automatic |
| Maximum legend items | Show at most this many items; the rest are summarised as "+N more". Useful when a chart has many categories. | Whole number, 0 to 9007199254740991 | Automatic |
Axes#
Titles, labels, ticks and grid lines for the x, y and right axes of charts that have axes. Each option can be set for the horizontal axis, the vertical axis and, on layered charts, the right-hand axis.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Chart title | A title and subtitle drawn inside the chart, above the plot. | Text | Automatic |
| Title padding | Number | Automatic | |
| Title font size | Number | Automatic | |
| Title font weight | Normal, Medium, Semibold, Bold | Automatic | |
| Title color | Colour | Automatic | |
| Title anchor | Start, Center, End | Automatic | |
| Slice labels | Text written on or beside each slice: its name, value or share. | On or off | Automatic |
| Label angle | Number | Automatic | |
| Label limit | Number | Automatic | |
| Label overlap | None, Parity, Greedy | Automatic | |
| Label size | Text size of the labels, in pixels. | Number | Automatic |
| Label font weight | Normal, Medium, Semibold, Bold | Automatic | |
| Label colour | Colour of the label text. Leave empty for an automatic, readable colour. | Colour | Automatic |
| Label padding | Number | Automatic | |
| Ticks | On or off | Automatic | |
| Tick count | Number | Automatic | |
| Tick min step | Number | Automatic | |
| Tick size | Number | Automatic | |
| Tick color | Colour | Automatic | |
| Grid | Background lines across the plot that help you read values. | On or off | Automatic |
| Grid color | Colour | Automatic | |
| Grid opacity | Number, 0 to 1 | Automatic | |
| Domain | On or off | Automatic | |
| Domain color | Colour | Automatic | |
| Number format | How the number is written: currency, percent, decimals and locale. | Text | Automatic |
| Format type | Number, Time, Currency, Percent, Compact | Automatic | |
| Orient | Top, Bottom, Left, Right | Automatic | |
| Hidden | On or off | Automatic |
Grid#
Background lines across the plot that help you read values.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Show grid | Master switch for grid lines. Turn off to remove every grid line. | On or off | Automatic |
| Vertical grid lines | Draw vertical lines at the x axis values. Off by default. | On or off | Automatic |
| Horizontal grid lines | Draw horizontal lines at the y axis values. On by default. | On or off | Automatic |
| Grid colour | Colour of the grid lines. | Colour | Automatic |
| Grid opacity | How strong the grid lines are, from 0 (invisible) to 1 (solid). | Number, 0 to 1 | Automatic |
| Grid line width | Thickness of the grid lines, in pixels. | Number | Automatic |
Title#
A title and subtitle drawn inside the chart, above the plot.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Title | The title text drawn above the plot. | Text | Automatic |
| Subtitle | A smaller line of text under the title. | Text | Automatic |
| Title alignment | Place the title at the start, centre or end of the chart width. | Start, Center, End | Start |
| Title size | Text size of the title, in pixels. | Number | Automatic |
| Title weight | How bold the title is. | Normal, Medium, Semibold, Bold | Automatic |
| Title colour | Colour of the title text. | Colour | Automatic |
| Subtitle size | Text size of the subtitle, in pixels. | Number | Automatic |
| Subtitle colour | Colour of the subtitle text. | Colour | Automatic |
| Title spacing | Space between the title block and the plot, in pixels. | Number | Automatic |
Padding#
Space around the chart, in pixels. Replaces the automatic spacing when set.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Top padding | Space above the chart, in pixels. | Number | Automatic |
| Right padding | Space to the right of the chart, in pixels. | Number | Automatic |
| Bottom padding | Space below the chart, in pixels. | Number | Automatic |
| Left padding | Space to the left of the chart, in pixels. | Number | Automatic |
Background#
A fill behind the chart. Leave empty to use the dashboard card’s surface.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Background colour | Colour painted behind the whole chart. | Colour | Automatic |
Value labels#
Numbers written next to or inside the bars, points or slices.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Show value labels | Write each mark’s value on the chart. Labels that would overlap or leave the chart are dropped. | On or off | Automatic |
| Label position | Where labels sit. On bar charts, Inside and Center put the number inside the bar; other charts place labels automatically. | Top, Bottom, Left, Right, Inside, Outside, Center, End | Automatic |
| Label size | Text size of the value labels, in pixels. | Number | Automatic |
| Label weight | How bold the value labels are. | Normal, Medium, Semibold, Bold | Automatic |
| Label colour | Colour of the value labels. Leave empty to pick black or white for contrast automatically. | Colour | Automatic |
| Overlapping labels | What to do when labels collide: Hide drops one, Shift nudges it up first, Allow draws them all. | Allow, Hide, Shift | Automatic |
| Label background | Draws a rounded pill of this colour behind each label, for readability. | Text | Automatic |
| Label pill padding | Space inside the label background pill, in pixels. | Number | Automatic |
Categories and labels#
How categories are chosen, ordered and named, and the handwritten callout on the sketch drawing styles.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Maximum categories | Keep the largest categories and fold the rest into "Other". Used by bar, pie and donut charts. | Whole number, 2 to 50 | Automatic |
| Sort categories | Order categories by value, by label, or leave them as they come. | None, Value, Label | Automatic |
| Tidy labels | Turn machine-style names such as LOAN_PAYMENTS into readable text. Turn off to show values exactly as stored. | On or off | Automatic |
| Callout point | Which value the note points at: the highest, the lowest, a chart-chosen one, or none. Shown only in the hand-drawn look. | Auto, Max, Min, None | Automatic |
| Callout text | Replaces the default "highest" or "lowest" wording, up to 24 characters. | Text, up to 24 characters | Automatic |
Style#
Fine-tuning for marks, animation and hover effects.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Corner radius | Rounds tile corners on treemaps that have no radius of their own, in pixels. | Number | Automatic |
| Line width | Thickness of lines on line, area, radar, sparkline and combined charts, in pixels. | Number | Automatic |
| Fill opacity | How solid filled areas are on sparklines, from 0 (clear) to 1 (solid). | Number | Automatic |
| Animate | Play the entry animation when the chart first draws or its data changes. | On or off | Automatic |
| Animation length | How long the entry animation runs, in milliseconds. 0 turns it off. | Number | Automatic |
| Hide legend | Hide the legend, whatever the legend settings say. | On or off | Automatic |
| Hover dimming | How faint the other marks become while you hover one, from 0 (hidden) to 1 (no dimming). | Number, 0 to 1 | Automatic |
Tooltip#
The popup that shows the exact values when you hover over the chart.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Show tooltip | Show a popup with the exact values when you hover over a mark. | On or off | Automatic |
When there is no data#
What the chart shows when the data has no rows.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Empty message | Text shown in place of the chart when there is no data to draw. | Text | Automatic |
| Empty icon | An emoji or icon shown above the empty message. | Text | Automatic |
Palette#
Colours for the series and categories. By default a chart follows the dashboard palette, set in the dashboard settings; see Theming for palettes and the Clean, Sketch and Doodle drawing styles.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Palette | The colours used for series and categories. Default follows the dashboard; you can also list your own colours. | Text | Automatic |
Use this page with your AI assistant
Every BankSync doc is available as plain Markdown for agents and LLMs.