--- title: "Chart styling" description: "The styling every chart shares: legend, axes, grid, title, value labels, categories, style, tooltip and colours, with every option explained." section: "Widgets" canonical: "https://banksync.io/docs/widgets/chart-styling" specs: ["dashboards"] operationBindings: [{"capability":"dashboards","operation":"dashboards.author"}] --- 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](/docs/dashboards/dashboards-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 |