From ce85f2db9e448b97922c3f6e30a3b560e8e75b65 Mon Sep 17 00:00:00 2001 From: Igor Lukanin Date: Wed, 9 Sep 2026 12:53:04 +0200 Subject: [PATCH 1/4] docs: chart builder Fields and Style tabs for bar, line, area and scatter charts --- docs-mintlify/docs.json | 13 +- .../charts/chart-types/area.mdx | 20 ++- .../charts/chart-types/bar.mdx | 40 ++--- .../charts/chart-types/heatmap.mdx | 2 +- .../charts/chart-types/line.mdx | 27 +++- .../charts/chart-types/map.mdx | 4 +- .../charts/chart-types/scatter.mdx | 12 +- .../charts/configuration/axes.mdx | 117 +++++++++----- .../configuration/color-and-stacking.mdx | 101 ++++++------ .../charts/configuration/data-labels.mdx | 15 +- .../charts/configuration/fields.mdx | 144 ++++++++++++++++++ .../charts/configuration/index.mdx | 16 +- .../configuration/series-configuration.mdx | 48 ------ .../charts/configuration/series-mapping.mdx | 38 ----- .../charts/configuration/small-multiples.mdx | 4 +- .../charts/configuration/tooltips.mdx | 27 ++-- .../docs/explore-analyze/charts/index.mdx | 10 +- 17 files changed, 391 insertions(+), 247 deletions(-) create mode 100644 docs-mintlify/docs/explore-analyze/charts/configuration/fields.mdx delete mode 100644 docs-mintlify/docs/explore-analyze/charts/configuration/series-configuration.mdx delete mode 100644 docs-mintlify/docs/explore-analyze/charts/configuration/series-mapping.mdx diff --git a/docs-mintlify/docs.json b/docs-mintlify/docs.json index 06f357ba51950..4b5b81430ad3b 100644 --- a/docs-mintlify/docs.json +++ b/docs-mintlify/docs.json @@ -86,11 +86,10 @@ "group": "Configure charts", "root": "docs/explore-analyze/charts/configuration/index", "pages": [ - "docs/explore-analyze/charts/configuration/series-mapping", - "docs/explore-analyze/charts/configuration/series-configuration", + "docs/explore-analyze/charts/configuration/fields", + "docs/explore-analyze/charts/configuration/axes", "docs/explore-analyze/charts/configuration/color-and-stacking", "docs/explore-analyze/charts/configuration/small-multiples", - "docs/explore-analyze/charts/configuration/axes", "docs/explore-analyze/charts/configuration/tooltips", "docs/explore-analyze/charts/configuration/data-labels" ] @@ -1288,6 +1287,14 @@ { "source": "/api-reference/workbooks/update-published-dashboard-ai-widget-thread", "destination": "/api-reference/workbooks/update-workbook-dashboard" + }, + { + "source": "/docs/explore-analyze/charts/configuration/series-mapping", + "destination": "/docs/explore-analyze/charts/configuration/fields" + }, + { + "source": "/docs/explore-analyze/charts/configuration/series-configuration", + "destination": "/docs/explore-analyze/charts/configuration/fields" } ] } diff --git a/docs-mintlify/docs/explore-analyze/charts/chart-types/area.mdx b/docs-mintlify/docs/explore-analyze/charts/chart-types/area.mdx index fc1eb87af68c7..4fdd59c895561 100644 --- a/docs-mintlify/docs/explore-analyze/charts/chart-types/area.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/chart-types/area.mdx @@ -9,30 +9,34 @@ Area charts add a filled region beneath the line. The fill communicates magnitud ### Stacked -Each series is stacked on top of the previous one. The top edge shows the cumulative total; each filled band shows the individual contribution. Use this for part-to-whole breakdowns over time (e.g. revenue by product category over months). +Break the measure down by a dimension and leave its placement at **Stacked**: the areas stack on each other. The top edge shows the cumulative total and each filled band its individual contribution. Use this for part-to-whole breakdowns over time, such as revenue by product category over months. {/* Screenshot: stacked area chart — total sale price by month, split by product category (4–5 stacked bands). Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} -### Percentage stacked (Stack %) +### Stacked to 100% -Each series is normalized to 100% at every X-axis value, showing proportional contribution over time. Use when relative share matters more than absolute volume. +Set the placement to **Stacked to 100%** and the areas fill the full height at every position, showing proportional contribution over time. Use when relative share matters more than absolute volume. {/* Screenshot: percentage stacked area chart — same data normalized to 100%. Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} ### Overlaid -All series share the same baseline. Use only when series are clearly separated in value and you want to compare trajectories rather than totals — with many series, fills will occlude each other. +Set the placement to **Overlaid** and the areas share the baseline. Use only when the series are clearly separated in value and you want to compare trajectories rather than totals — with many series, the fills occlude each other. {/* Screenshot: overlaid area chart — two series, clearly separated in value. Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} -## Stacking +## Placement -Set stacking behavior in the **Color & stacking** section of the Style tab. The **Stack**, **Stack %**, and **Overlay** options are the relevant modes for area charts. +Placement is set on the measure's **Break down by** row in the Fields tab: **Stacked**, **Overlaid**, or **Stacked to 100%**. Each measure is placed independently. See [Fields](/docs/explore-analyze/charts/configuration/fields#break-down-by) for the full reference. {/* Screenshot: stacking dropdown in the Style tab. Place inline, 50% width, right-aligned. (hidden — replace this comment with when image is ready) */} -See [Color & stacking](/docs/explore-analyze/charts/configuration/color-and-stacking) for palette options and stacked segment sorting. +See [Color & legend](/docs/explore-analyze/charts/configuration/color-and-stacking) for palette options. + +## Area appearance + +An area's row in its axis section on the Style tab carries an **Interpolation** picker — **Linear**, **Step**, or **Smooth** — and a **Trend line** toggle. ## Axis behavior -Area charts use a temporal X axis for time dimensions — continuous and time-aware. For non-time fields, the axis is ordinal. +Area charts use a temporal dimension axis for time dimensions — continuous and time-aware. For non-time fields, the axis is ordinal. diff --git a/docs-mintlify/docs/explore-analyze/charts/chart-types/bar.mdx b/docs-mintlify/docs/explore-analyze/charts/chart-types/bar.mdx index da3505d375cb6..6bb0a8cd82700 100644 --- a/docs-mintlify/docs/explore-analyze/charts/chart-types/bar.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/chart-types/bar.mdx @@ -9,7 +9,7 @@ Bar charts compare values across discrete categories. Use them when the magnitud ### Basic -One dimension on the X axis, one measure on the Y axis. Each category gets a single bar. +One dimension and one measure with no break-down. Each category gets a single bar. @@ -17,62 +17,64 @@ One dimension on the X axis, one measure on the Y axis. Each category gets a sin ### Grouped -Each series renders as a separate cluster of bars side-by-side at every X-axis value. Best for comparing absolute values across multiple series at each category. +Break the measure down by a dimension and set its placement to **Side by side**: each value gets its own bar within the category's band. Best for comparing absolute values across several series at each category. {/* Screenshot: grouped bar chart — order count by status, grouped by product category. Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} ### Stacked -Series are stacked on top of each other at each X-axis value. Use when you want to show both individual contributions and the total at a glance. +Break the measure down and leave its placement at **Stacked**: the values stack inside each bar. Use when you want to show both individual contributions and the total at a glance. {/* Screenshot: stacked bar chart — revenue by product category stacked by order status. Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} -### Percentage stacked (Stack %) +### Stacked Bar % -Each stack is normalized to 100%, showing each series as a proportion of the total per X-axis value. Use when relative distribution matters more than absolute values. +Set the placement to **Stacked to 100%** and every bar is stretched to the full height, showing each value as a proportion of the category's total. Use when relative distribution matters more than absolute values. {/* Screenshot: percentage stacked bar — same data as stacked but normalized to 100%. Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} ### Horizontal -All three vertical variants are also available horizontally. Horizontal bars work well for long category labels, many categories, or when a left-to-right reading direction feels more natural. +All three vertical variants are also available horizontally — flip the chart with the orientation switch in the **Dimension** section of the Fields tab. Horizontal bars work well for long category labels, many categories, or when a left-to-right reading direction feels more natural. {/* Screenshot: horizontal stacked bar chart. Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} ### Composite (bar + line) -Assign one series to the right Y axis and set its mark type to **Line** in [series configuration](/docs/explore-analyze/charts/configuration/series-configuration). This creates a dual-axis chart — useful for overlaying a rate on top of volume data (e.g. order count as bars, revenue per order as a line). +Add a second measure from the **Measure actions** menu, set its mark to **Line**, and assign it to the right axis. This gives a dual-axis chart — useful for overlaying a rate on top of volume data, such as order count as bars and revenue per order as a line. The chart type reads **Composite** once the marks differ. {/* Screenshot: composite bar+line chart with dual Y axes — order count (bars, left axis) and average order value (line, right axis). Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} -## Stacking +## Placement -Stacking behavior is set in the **Color & stacking** section of the Style tab: +How a broken-down measure's values sit relative to each other is set by the placement control on that measure's **Break down by** row in the Fields tab: | Option | Behavior | |---|---| -| **Automatic** | Cube picks the best option based on your data | -| **Stack** | Series at the same X value are stacked | -| **Group** | Series at the same X value are placed side-by-side | -| **Overlay** | Series are drawn on top of each other (rarely useful for bars) | -| **Stack %** | Series are stacked and normalized to 100% | +| **Stacked** | The values stack inside each bar | +| **Side by side** | One bar per value | +| **Stacked to 100%** | Each bar stretched to the full height | -Stacking can also be set independently per Y-axis series — enabling grouped clusters of stacked sub-groups. +Each measure is placed independently, so one can stack while another sits side by side. Two bar measures on the same axis are already drawn side by side within each band, one per measure, so the side-by-side placement is unavailable there. + +See [Fields](/docs/explore-analyze/charts/configuration/fields#break-down-by) for the full reference. {/* Screenshot: stacking dropdown open in the Style tab showing all five options. Place inline, 50% width, right-aligned. (hidden — replace this comment with when image is ready) */} ## Data labels -Bar charts support totals labels on stacked charts — showing the aggregate value above each full stack. Enable **Data Labels** in the Fields tab, then configure: +A bar is labeled with its total at the end of the bar. Turn on **Show data labels** in the **Data labels** section of the Style tab, then configure: -- **Format** — number format applied to the label value +- **Data label position** — inside or outside the bar end +- **Label format** — number, percentage, currency, or date - **Font size** — size of the label text -- **Position** — Outside end, Inside end, Inside center, or Inside base + +See [Data labels](/docs/explore-analyze/charts/configuration/data-labels) for the full reference. {/* Screenshot: stacked bar with total labels above each stack, Fields tab open showing Data Labels toggle enabled and Position set to "Outside end". Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} ## Axis behavior -Bar charts use an ordinal X axis — each bar is labeled independently, the axis is not time-aware, and categories not present in the result set are not plotted. With time fields, bars are ordered ascending automatically. For other data types, order follows the results table sort. +Bar charts use an ordinal dimension axis — each bar is labeled independently, the axis is not time-aware, and categories not present in the result set are not plotted. With time fields, bars are ordered ascending automatically. For other data types, order follows the results table sort. Tooltips on stacked bars are scoped to the segment under the cursor, not the full stack total. diff --git a/docs-mintlify/docs/explore-analyze/charts/chart-types/heatmap.mdx b/docs-mintlify/docs/explore-analyze/charts/chart-types/heatmap.mdx index b364a10377c76..3520d1cd0e07e 100644 --- a/docs-mintlify/docs/explore-analyze/charts/chart-types/heatmap.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/chart-types/heatmap.mdx @@ -19,7 +19,7 @@ A continuous gradient palette is applied by default — low values map to the li {/* Screenshot: Style tab Color section open — showing the palette picker and Reverse colors toggle. Place inline, 50% width, right-aligned. (hidden — replace this comment with when image is ready) */} -For custom palettes, see [Color & stacking](/docs/explore-analyze/charts/configuration/color-and-stacking). +For custom palettes, see [Color & legend](/docs/explore-analyze/charts/configuration/color-and-stacking). ## Data structure diff --git a/docs-mintlify/docs/explore-analyze/charts/chart-types/line.mdx b/docs-mintlify/docs/explore-analyze/charts/chart-types/line.mdx index 61fbb46e74578..4d24a87066b3b 100644 --- a/docs-mintlify/docs/explore-analyze/charts/chart-types/line.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/chart-types/line.mdx @@ -15,28 +15,43 @@ One measure plotted against a time or ordered dimension. The simplest and most c ### Multi-series -Multiple lines plotted on the same axes. Map a second dimension to the **Color** channel to split one measure into one line per dimension value, or add multiple measures to the Y axis to plot them as separate series. +Multiple lines plotted on the same axes. Pick a dimension in the measure's **Break down by** row to split it into one line per dimension value, or add more measures to plot them as separate series. {/* Screenshot: multi-series line chart — order count by week, split by order status (3–4 colored lines). Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} ### With reference line -A horizontal reference line marks a target, threshold, or benchmark. Added via the **Axes** section of the Style tab. +A reference line marks a target, threshold, or benchmark. Add one from the axis's **Axis actions** menu on the Style tab. {/* Screenshot: line chart with a dashed reference line at a target value, label visible on the right side of the line. Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} +## Line appearance + +A line's row in its axis section on the Style tab carries the controls that shape it: + +| Control | Options | +|---|---| +| **Line style** | **Solid**, **Dashed**, **Dotted** — Auto assigns styles by list order | +| **Point shape** | **Circle**, **Square**, **Triangle**, **Diamond**, **None** — Auto draws a marker-free line | +| **Interpolation** | **Linear**, **Step**, **Smooth** | +| **Trend line** | A dashed least-squares regression line in the measure's color | + +Line style earns its keep on a chart where color already belongs to a break-down: it tells the measures apart when their colors cannot. + ## Reference lines -Add a horizontal reference line in the **Y axis** section of the Style tab. Set the value, label, color, and line style (solid, dashed, or dotted). A labelled line also takes horizontal (start / middle / end) and vertical (above / below) placement for its text. Multiple reference lines are supported. +Add a reference line from the **Axis actions** menu (⋮) in any axis header on the Style tab. Set the value, label, color, line width, and line style. A labeled line also takes horizontal (start / middle / end) and vertical (above / below) placement for its text. Multiple reference lines are supported on the same axis. {/* Screenshot: reference line configuration panel open — value field, label field, style dropdown. Place inline, 50% width, right-aligned. (hidden — replace this comment with when image is ready) */} -See [Axes](/docs/explore-analyze/charts/configuration/axes) for the full configuration reference. +See [Axes & series style](/docs/explore-analyze/charts/configuration/axes) for the full configuration reference. ## Axis behavior -Line charts use a temporal X axis for time dimensions — continuous, time-aware, and not constrained to the result set. For non-time dimensions, the axis is ordinal and follows the result set sort order. Gaps in the line indicate missing data points. +Line charts use a temporal dimension axis for time dimensions — continuous, time-aware, and not constrained to the result set. For non-time dimensions, the axis is ordinal and follows the result set sort order. Gaps in the line indicate missing data points. + +A line is drawn against a category axis whenever the chart also draws a bar, so the two marks always agree on the same bands. ## Combining with bars -To layer a line on top of a bar chart, add a second series to the Y axis, set its mark type to **Line** in [series configuration](/docs/explore-analyze/charts/configuration/series-configuration), and assign it to the right Y axis for a dual-axis layout. +Add a second measure from the **Measure actions** menu on the Fields tab, set its mark to **Line**, and assign it to the right axis for a dual-axis layout. The chart type reads **Composite** once the marks differ. diff --git a/docs-mintlify/docs/explore-analyze/charts/chart-types/map.mdx b/docs-mintlify/docs/explore-analyze/charts/chart-types/map.mdx index df9754e14fb7e..7fa766dbe7ff6 100644 --- a/docs-mintlify/docs/explore-analyze/charts/chart-types/map.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/chart-types/map.mdx @@ -44,7 +44,7 @@ Optional: ### Point color -When no **Color** field is assigned, all points render in the configurable **Default color**. When a dimension is assigned, each unique value gets a distinct color from the active palette — pick from the built-in palettes or supply a custom one, see [Color and stacking](/docs/explore-analyze/charts/configuration/color-and-stacking). +When no **Color** field is assigned, all points render in the configurable **Default color**. When a dimension is assigned, each unique value gets a distinct color from the active palette — pick from the built-in palettes or supply a custom one, see [Color & legend](/docs/explore-analyze/charts/configuration/color-and-stacking). ### Point size @@ -67,7 +67,7 @@ Built-in sources expose a fixed list of allowed properties. **Custom** lets you When the chart enters Region mode, the join dimension and measure are auto-picked when an unambiguous match exists in your query. -The choropleth gradient comes from the active palette — pick from the built-in palettes or supply a custom one, see [Color and stacking](/docs/explore-analyze/charts/configuration/color-and-stacking). +The choropleth gradient comes from the active palette — pick from the built-in palettes or supply a custom one, see [Color & legend](/docs/explore-analyze/charts/configuration/color-and-stacking). ### Custom GeoJSON diff --git a/docs-mintlify/docs/explore-analyze/charts/chart-types/scatter.mdx b/docs-mintlify/docs/explore-analyze/charts/chart-types/scatter.mdx index 70feeb5640368..e6e55f46e310c 100644 --- a/docs-mintlify/docs/explore-analyze/charts/chart-types/scatter.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/chart-types/scatter.mdx @@ -15,7 +15,7 @@ Two measures on the X and Y axes. Each row in your result set becomes one point. ### With color grouping -Map a dimension to the **Color** channel to assign each point a color by category. Use this to compare how different groups distribute across the same two measures. +Pick a dimension in the **Series** slot to color the points by category. Use this to compare how different groups distribute across the same two measures. {/* Screenshot: scatter chart — same axes, points colored by traffic source (4–5 colors). Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} @@ -27,12 +27,18 @@ Map a third numeric measure to the **Size** channel to scale each point's radius ## Size encoding -Assign a measure to the **Size** channel in the Fields tab. Points scale proportionally to the measure value. Configure the minimum and maximum radius in the Style tab. +Assign a measure to the **Size** slot in the Fields tab. Points scale proportionally to the measure value. Configure the minimum and maximum radius in the Style tab. + +A scatter chart takes **X-Axis**, **Y-Axis**, **Series** and **Size** rather than the measure sections the other cartesian charts use, and has no orientation switch. See [Fields](/docs/explore-analyze/charts/configuration/fields#scatter-charts). {/* Screenshot: Fields tab with Size channel assigned — showing the size field token. Place inline, 50% width, right-aligned. (hidden — replace this comment with when image is ready) */} +## Point appearance + +The measure's row in its axis section on the Style tab carries a **Shape** picker — **Circle**, **Square**, **Triangle**, **Diamond**, or **None** — and a **Trend line** toggle that draws a dashed least-squares regression line through the points. + ## Tooltips -All mapped fields appear in the tooltip by default. Add or remove fields in the **Tooltips** section of the Fields tab. +The fields the chart draws appear in the tooltip by default. Check or uncheck the query's columns in the **Tooltips** row of the Fields tab. See [Tooltips](/docs/explore-analyze/charts/configuration/tooltips) for details. diff --git a/docs-mintlify/docs/explore-analyze/charts/configuration/axes.mdx b/docs-mintlify/docs/explore-analyze/charts/configuration/axes.mdx index 817a7833f03e5..57e6268d49991 100644 --- a/docs-mintlify/docs/explore-analyze/charts/configuration/axes.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/configuration/axes.mdx @@ -1,64 +1,109 @@ --- -title: Axes -description: Configure axis titles, grid lines, label formatting, dual Y-axis, and reference lines. +title: Axes & series style +description: Configure axis sections in the Style tab — measure appearance, titles, grid lines, label formatting, scale, and reference lines. --- -The **Axes** section in the Style tab controls the appearance and behavior of the X axis and Y axis (or left and right Y axes in dual-axis charts). Most axis settings are available for all Vega-based chart types (bar, line, area, scatter, heatmap). +The **Style** tab of a bar, line, area, or scatter chart is a flat list of sections in chart order: +one section per axis in use, then [data labels](/docs/explore-analyze/charts/configuration/data-labels), +then the [legend](/docs/explore-analyze/charts/configuration/color-and-stacking#legend). {/* TODO screenshot: axes configuration panel open in Style tab (hidden — replace this comment with when image is ready) */} -## X axis +## Axis sections + +A measure axis gets a section for each side a measure uses. Its title names the side: + +| Title | When | +|---|---| +| **Y-Axis** | Every measure is on one side of a vertical chart | +| **Left Y-Axis**, **Right Y-Axis** | Both sides of a vertical chart are in use | +| **X-Axis** | Every measure is on one side of a horizontal chart | +| **Bottom X-Axis**, **Top X-Axis** | Both sides of a horizontal chart are in use | + +Below the measure axes comes the dimension axis — **X-Axis** on a vertical chart, **Y-Axis** on a +horizontal one. + +Each section holds one row per measure drawn against that axis, then the axis's own settings. + +## Measure appearance + +A measure's row inside its axis section is labeled with its mark glyph and name, followed by the +controls that apply to that mark: + +| Control | Applies to | Options | +|---|---|---| +| **Palette** | A measure broken down by a dimension | The built-in palettes and a custom one — see [palettes](/docs/explore-analyze/charts/configuration/color-and-stacking#palettes) | +| **Color** | A measure with no break-down | A single color swatch | +| **Line style** | Line marks | **Solid**, **Dashed**, **Dotted** | +| **Point shape** | Line marks | **Circle**, **Square**, **Triangle**, **Diamond**, **None** | +| **Shape** | Scatter marks | The same five shapes | +| **Interpolation** | Line and area marks | **Linear**, **Step**, **Smooth** | +| **Trend line** | Any measure on a time or numeric dimension | On or off | + +Line style and point shape both default to **Auto**. Auto line style assigns styles by list order, so +measures sharing a color scale can still be told apart. Auto point shape draws a marker-free line; +on a scatter mark it assigns shapes by list order. + +A **Trend line** adds a dashed least-squares regression line in the measure's color — one per series +when the measure is broken down. It needs a time or numeric dimension to regress against, and is +disabled with a reason on an ordinal one. + +{/* TODO screenshot: Y-axis settings panel with title and grid controls (hidden — replace this comment with when image is ready) */} + +## Axis settings + +Every axis section carries the same two rows of controls: | Setting | Description | |---|---| -| **Show axis** | Toggle the X axis on or off | -| **Title** | Custom axis label — leave blank to hide the axis title | -| **Grid lines** | Toggle grid lines perpendicular to the X axis | -| **Labels** | Toggle axis tick labels | -| **Label angle** | Rotate axis labels (useful for long category names) | -| **Label format** | Number or date format applied to axis labels | +| **Show the axis** | Draw the axis or hide it | +| **Grid lines** | Draw grid lines perpendicular to the axis | +| **Tick labels** | Draw the axis tick labels | +| **Axis title** | Override the title — the default is the measures' names | +| **Label angle** | **Horizontal labels**, **Labels at 45°**, or **Vertical labels** | +| **Label format** | **Number**, **Percentage**, **Currency**, or **Date** | +| **Thin out overlapping labels** | Drop labels rather than let them collide | -## Y axis (left) +A measure axis adds a third row for its scale: | Setting | Description | |---|---| -| **Show axis** | Toggle the Y axis on or off | -| **Title** | Custom axis label | -| **Grid lines** | Toggle horizontal grid lines | -| **Labels** | Toggle axis tick labels | -| **Label format** | Number format applied to axis labels (e.g. `$,.0f` for currency) | -| **Min / Max** | Override the axis scale minimum and maximum values | +| **Logarithmic scale** | Draw the axis on a log scale. Needs values above zero, and is disabled with a reason when the side's data holds a zero or a negative | +| **Min** / **Max** | Pin the scale's ends. Leave either empty to let it scale to the data | -{/* TODO screenshot: Y-axis settings panel with title and grid controls (hidden — replace this comment with when image is ready) */} +Min and Max are not offered on a side stacked to 100%, whose scale is fixed by definition. -## Dual Y axis (right axis) +### The same scale on both sides -Add a second Y axis on the right side of the chart to plot a series on a different scale. This is useful for combining measures with different units or magnitudes — for example, showing order count on the left axis and average order value on the right. +When both sides of a chart are in use, the second section's header carries a **Same scale as the left +axis** toggle — **Same scale as the bottom axis** on a horizontal chart. Turning it on draws both +sides against one shared scale, so the two series are directly comparable rather than each filling +the plot height. -To use the right axis: -1. In the **Series configuration** for a specific series, change the **Y axis** assignment from **Left** to **Right**. -2. The right axis settings appear in the Style tab — configure its title, labels, and scale independently from the left axis. +A [period-over-period comparison](/docs/explore-analyze/workbooks/querying-data#period-over-period-comparison) +column of a measure already on the chart takes the shared scale by default: comparing a measure with +its own earlier values is only meaningful on one scale. {/* TODO screenshot: dual-axis chart with bar on left axis and line on right axis (hidden — replace this comment with when image is ready) */} ## Reference lines -Add horizontal reference lines to mark a target, threshold, or benchmark value. Reference lines appear at a fixed Y value across the full width of the chart. +A reference line marks a target, threshold, or benchmark. Add one from the **Axis actions** menu (⋮) +in any axis header: **Add reference line**. Every axis with a scale can carry them, measure axes and +the dimension axis alike, and each axis can carry several, configured independently. -To add a reference line: -1. In the **Y axis** section of the Style tab, click **Add reference line**. -2. Set the **Value** — the Y position of the line. -3. Optionally set a **Label** that appears next to the line. -4. Configure **Color** and **Style** (solid, dashed, or dotted). +A reference line takes: -{/* TODO screenshot: chart with a dashed reference line and label (hidden — replace this comment with when image is ready) */} +1. A **Value** — where the line sits on that axis. +2. An optional **Label** naming it, for example `Target 18k`. +3. A **Color**, **Line width**, and **Line style** (solid, dashed, or dotted). -You can add multiple reference lines to the same axis. Each is configured independently. +{/* TODO screenshot: chart with a dashed reference line and label (hidden — replace this comment with when image is ready) */} ### Reference line labels A reference line with no label renders as a bare rule — the reader has to already know what it -means. Type text into **Label** to name it, for example `Target 18k`. +means. Type text into **Label** to name it. Once a label is set, two alignment controls appear next to it: @@ -76,6 +121,8 @@ A label on a line near the top or bottom edge of the plot flips to the other sid automatically, so the text stays inside the chart area. - -Reference lines are only available on the left Y axis. For right-axis reference lines, use a [custom Vega-Lite spec](/docs/explore-analyze/charts/custom). - +## Style settings survive Fields edits + +Axis settings belong to the axis side, not to the measure that happens to be drawn against it. An +axis title, a log scale, a pinned Min and Max, or a legend position set on the Style tab is unchanged +when you reorder the measures, change a mark, or add a measure on the Fields tab. diff --git a/docs-mintlify/docs/explore-analyze/charts/configuration/color-and-stacking.mdx b/docs-mintlify/docs/explore-analyze/charts/configuration/color-and-stacking.mdx index 510f6b29682f5..4f2fc0343db55 100644 --- a/docs-mintlify/docs/explore-analyze/charts/configuration/color-and-stacking.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/configuration/color-and-stacking.mdx @@ -1,15 +1,25 @@ --- -title: Color & stacking -description: Configure color palettes, stacking behavior, stacked segment sorting, and legend placement for charts. +title: Color & legend +description: Configure color palettes, custom palettes, and legend placement for charts. --- -The **Color** section in the Style tab controls two related things: how series are colored, and how they are stacked or grouped relative to each other. These settings apply to charts that color by a Color channel: bar, line, area, scatter, and heatmap. Chart types that color some other way, such as pie, funnel and sankey, pick their palette from a **Palette** dropdown of their own — but the [palettes](#palettes) below are the same ones they offer. +Every chart type draws its colors from a palette, and most draw a legend naming what each color +means. This page covers the palettes themselves and the **Legend** section of the Style tab. + +Where colors are assigned differs by chart type. On a bar, line, area, or scatter chart, each measure +carries its own **Palette** or **Color** control in its +[axis section](/docs/explore-analyze/charts/configuration/axes#measure-appearance) of the Style tab, and +what a color stands for is decided by that measure's +[break-down](/docs/explore-analyze/charts/configuration/fields#break-down-by) on the Fields tab. Pie, +funnel, sankey, heatmap, and map charts each carry a single **Palette** dropdown of their own — but +the palettes are the same ones below. {/* TODO screenshot: color and stacking section of the Style tab (hidden — replace this comment with when image is ready) */} -## Color faceting +## Color scales -Mapping a field to the **Color** channel in the Fields tab creates one series per unique value in that field, each assigned a color from the active palette. How this field is typed affects the available options: +Breaking a measure down by a dimension creates one series per distinct value of that dimension, each +taking a color from the active palette. The dimension's type decides which palettes are offered: | Data type | Palette options | |---|---| @@ -17,80 +27,65 @@ Mapping a field to the **Color** channel in the Fields tab creates one series pe | **Date / temporal** | Discrete (nominal) or continuous (temporal gradient) | | **Numeric / quantitative** | Discrete (nominal) or continuous (quantitative gradient) | -For strings, only discrete bucketing is available. For dates and numbers, you can choose whether each value gets its own distinct color (discrete) or a gradient is applied across the range (continuous). +For strings, only discrete bucketing is available. For dates and numbers, you can choose whether each +value gets its own distinct color (discrete) or a gradient is applied across the range (continuous). +If a date or numeric field only offers discrete options, try casting the field to the appropriate +type. + +A measure with no break-down is drawn as a single series in one color, picked automatically as the +next palette color after every break-down's values so it never collides with them. Set it explicitly +with the **Color** swatch in that measure's row. -If a date or numeric field only offers discrete options, try casting the field to the appropriate type. +Two measures broken down by the same dimension share its color scale: the same value is the same +color in both, and a palette change on either applies to both. Each measure still keeps its own +legend row. ## Palettes ### Discrete palettes -For discrete data, colors from the palette are applied in palette order, matching the sort order of the query results. Change the palette order by adjusting the sort in your query. +For discrete data, colors from the palette are applied in palette order, matching the sort order of +the query results. Change the palette order by adjusting the sort in your query. Enable **Reverse colors** to reverse the order colors are applied. ### Continuous (gradient) palettes -For continuous data, the gradient palette maps to the range of values in your results. Select a different gradient from the palette dropdown to change the color treatment. +For continuous data, the gradient palette maps to the range of values in your results. Select a +different gradient from the palette dropdown to change the color treatment. ### Custom palettes -If none of the provided palettes fit your needs, you can build a custom palette for an individual chart: +If none of the provided palettes fit your needs, you can build a custom palette for an individual +chart: -1. Open the **Color** section of the Style tab. +1. Open the palette control on the Style tab. 2. Select the last option in the palette menu: **Custom palette**. 3. Click **Customize** to open the palette editor. 4. Add, remove, and edit individual hex colors. -5. Use **Open hex code editor** to toggle a bulk editor and paste a comma-separated list of hex values. +5. Use **Open hex code editor** to toggle a bulk editor and paste a comma-separated list of hex + values. {/* TODO screenshot: custom palette editor with hex editor open (hidden — replace this comment with when image is ready) */} -To reuse a custom palette across charts, copy the hex codes and paste them into the custom palette editor of another chart. - -## Series color controls - -When no Color channel is assigned (single measure, no color-by), each series gets an individual color picker in the **Series** section of the Style tab. Click the color swatch next to a series to change its color. - -## Stacking options - -The stacking behavior controls how multiple series at the same X-axis value are positioned relative to each other. The available modes: - -| Option | Behavior | -|---|---| -| **Automatic** | Cube selects the best option based on chart type and data | -| **Stack** | Series are stacked on top of each other | -| **Group** | Series are placed side-by-side (bar charts only) | -| **Overlay** | Series are drawn on top of each other from the same baseline | -| **Stack %** | Series are stacked and normalized to 100% — tooltip shows raw value | - -{/* TODO screenshot: stacking option dropdown (hidden — replace this comment with when image is ready) */} - -### Per-axis stacking - -Stacking can also be set independently per Y-axis series in the Y-axis series configuration. This enables creating grouped clusters of stacked sub-groups — for example, two stacked grouplets placed side-by-side. - -## Stacked segment sorting - -When stacking is active, control how segments within each stack are ordered using **Sort stack by**: - -| Option | Description | -|---|---| -| **Label** | Alphabetical by dimension value (default) | -| **Value** | By measure value within each individual stack (bar/column only) | -| **Sum** | By total sum across all stacks — useful for ordering by overall contribution | -| **Unsorted** | Preserves the original data order from the query results | - - -The **Value** sorting option is only available for bar and column charts. For area and line charts, use **Sum** or **Label**. - +To reuse a custom palette across charts, copy the hex codes and paste them into the custom palette +editor of another chart. ## Legend -The legend appears when a Color channel is assigned. A chart type without a Color channel decides for itself: a pie carries a legend regardless, a funnel starts without one, and a sankey has none to configure. Where a legend is offered, it uses the same **Legend** section: +The **Legend** section at the bottom of the Style tab configures the chart's legend: | Option | Description | |---|---| -| **Position** | Right, left, top, or bottom | -| **Hidden** | Remove the legend entirely | +| **Visibility** | Show or hide the legend | +| **Orientation** | **Right** (default), **Left**, **Top**, or **Bottom** | {/* TODO screenshot: legend position options (hidden — replace this comment with when image is ready) */} + +On a bar, line, area, or scatter chart, each measure gets its own legend row titled with the measure +name: a broken-down measure lists its values, a measure with no break-down shows its symbol alone. +Clicking an entry hides only that measure's series, so a value shared by two measures' break-downs is +hidden where you clicked it and left alone in the other legend. + +Other chart types decide for themselves whether a legend starts on: a pie carries one regardless, a +funnel starts without one, and a sankey has none to configure. diff --git a/docs-mintlify/docs/explore-analyze/charts/configuration/data-labels.mdx b/docs-mintlify/docs/explore-analyze/charts/configuration/data-labels.mdx index 39da2bbf782ed..bb75549858401 100644 --- a/docs-mintlify/docs/explore-analyze/charts/configuration/data-labels.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/configuration/data-labels.mdx @@ -1,22 +1,27 @@ --- title: Data labels -description: Display totals directly on stacked bar charts with configurable positioning and formatting. +description: Write values directly onto chart marks, with configurable position, format, and font size. --- -Data labels show the aggregate total value above each full stack on stacked bar charts. They let users read exact values without cross-referencing the Y axis. +Data labels write values onto the chart itself, so a reader gets exact numbers without +cross-referencing an axis. {/* Screenshot: stacked bar chart with total labels visible above each stack, Fields tab open showing Data Labels enabled. Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} ## Enabling data labels -Open the **Fields** tab and enable the **Data Labels** toggle. +Open the **Style** tab and turn on **Show data labels** in the **Data labels** section. Labels are +off by default. + +The setting covers the whole chart rather than one measure: every measure drawn is labeled. A bar +labels its total at the end of the bar; a line or an area labels each point's value above the point. ## Label settings | Setting | Description | |---|---| -| **Format** | Number format applied to the label value (e.g. `,.0f` for integers, `$,.2f` for currency) | +| **Data label position** | **Inside the bar end** or **Outside the bar end** — offered while the chart draws a bar | +| **Label format** | **Number**, **Percentage**, **Currency**, or **Date** | | **Font size** | Size of the label text | -| **Position** | Outside end, Inside end, Inside center, or Inside base | {/* Screenshot: Fields tab with Data Labels toggle on and Position dropdown open showing the four options. Place inline, 50% width, right-aligned. (hidden — replace this comment with when image is ready) */} diff --git a/docs-mintlify/docs/explore-analyze/charts/configuration/fields.mdx b/docs-mintlify/docs/explore-analyze/charts/configuration/fields.mdx new file mode 100644 index 0000000000000..a7f01e64361a7 --- /dev/null +++ b/docs-mintlify/docs/explore-analyze/charts/configuration/fields.mdx @@ -0,0 +1,144 @@ +--- +title: Fields +description: Build a chart from the query's measures and dimensions — marks, axis sides, break-downs, small multiples, and tooltips. +--- + +The **Fields** tab of the chart configuration panel builds the chart out of your query's columns. On a +bar, line, area, or scatter chart it reads top to bottom in the order you build: one section per +measure, then the shared dimension, then **Small multiples**, then **Tooltips**. + +{/* TODO screenshot: Fields tab open showing drag targets for X, Y, Color, Size, Tooltip (hidden — replace this comment with when image is ready) */} + +## Measure sections + +Each measure drawn on the chart gets its own section. A single measure's section is titled +**Measure**; from two on they are numbered **Measure 1**, **Measure 2**, and so on, and each row +gains a grip you can drag to reorder the measures. List order decides drawing order, so the first +measure is drawn first. + +The row holds three controls plus the axis-side toggle: + +| Control | What it sets | +|---|---| +| **Mark** | How this measure is drawn: **Bar**, **Line**, **Area**, or **Scatter** | +| Measure select | Which of the query's measures this section draws | +| **Axis side** | Which axis the measure is scaled against — appears once there are two measures | + +Use the section's **Measure actions** menu (⋮) to **Add a measure**, or to **Remove measure** once +there are two. There is no limit on the number of measures. + +### Axis sides + +With two or more measures, each one is assigned to **Left axis** or **Right axis** — **Bottom axis** +and **Top axis** when the bars are horizontal. Any number of measures can sit on one side. Measures +sharing a side share its scale, and the axis title lists them in list order. + +A side is drawn only while a measure uses it, so putting every measure on the right gives you a right +axis and no left one. This is how you combine measures whose units or magnitudes differ — order count +as bars on the left, revenue per order as a line on the right. + +Bar measures on one side are drawn side by side inside each category band, in list order. Lines and +points are drawn over them against the same scale. + +{/* TODO screenshot: dragging a field from available fields into the Color channel (hidden — replace this comment with when image is ready) */} + +### Break down by + +Each measure has its own **Break down by** row: pick a dimension to split that measure into one +series per dimension value. Measures are broken down independently, and two measures can be broken +down by different dimensions. + +Next to the dimension slot, the placement control decides how the resulting series sit relative to +each other. It is disabled until a dimension is picked, and its options depend on the mark: + +| Mark | Placements | +|---|---| +| Bar | **Stacked**: the values stack inside each bar · **Side by side**: one bar per value · **Stacked to 100%**: each bar stretched to the full height | +| Area | **Stacked**: the areas stack on each other · **Overlaid**: the areas share the baseline · **Stacked to 100%**: the areas fill the full height | +| Line, Scatter | None — the series are always drawn over one another | + +Side by side is unavailable when two bar measures already share the axis, since each measure already +occupies its own bar in the band. + +A measure with no break-down is drawn as a single series in a color picked automatically: the next +palette color after every break-down's values, so it never collides with them. + +Two measures broken down by the *same* dimension share that dimension's color scale. They keep one +legend row each, and a palette change on either applies to both. + +## Dimension + +The **Dimension** section holds the shared category or time axis — the one every measure is drawn +against. + +Its header carries the **Chart orientation** switch: **Vertical bars, the dimension on the X axis** +or **Horizontal bars, the dimension on the Y axis**. Rotating the chart rotates every measure, +including lines and areas, and the panel keeps its shape. Horizontal bars suit long category labels +and long category lists. + +The switch is offered on every cartesian chart except scatter, and is disabled with a reason while +the chart is incomplete — *Add a measure to rotate the bars* or *Add a dimension to rotate the bars*. + +A **Sort** row appears where sorting applies, on an ordinal dimension with no time granularity. + +The scale type is derived rather than asked for: a time dimension is temporal on a line, area, or +scatter chart and ordinal on a bar chart; any other dimension is ordinal. + +## Small multiples + +**Small multiples** splits the chart into a grid of panels, one per value of a dimension — see +[small multiples](/docs/explore-analyze/charts/configuration/small-multiples) for the grid, scale, +and sorting options. The control appears once per chart, and is disabled with a reason while two +axis sides are in use. + +## Tooltips + +The **Tooltips** row summarizes what is shown on hover — *All fields*, *N fields*, or *None*. Open it +to check or uncheck the query's columns, dimensions first. Unchecking all turns tooltips off. + +The setting applies to the whole chart, not to one measure. See +[tooltips](/docs/explore-analyze/charts/configuration/tooltips) for hover behavior. + +## Scatter charts + +A scatter chart plots measures against each other, so it takes a different set of slots: +**X-Axis** and **Y-Axis** (both measures), **Series** to color the points by a dimension, and +**Size** to scale each point's radius by a measure. There is no orientation switch and no break-down +row. + +## The chart type follows the fields + +The chart type shown on the chart-type button is derived from what you build rather than set +separately: + +| Chart type | What produces it | +|---|---| +| **Bar** | Bar marks, no break-down | +| **Stacked Bar** | Bar marks broken down and stacked | +| **Grouped Bar** | Bar marks broken down side by side | +| **Stacked Bar %** | Bar marks broken down and stacked to 100% | +| **Line**, **Area**, **Scatter** | Every measure drawn with that mark | +| **Composite** | Measures drawn with different marks | + +Picking a tile in the chart-type picker is an edit, not a reset: it sets every measure's mark, and a +bar tile also sets the first measure's placement. Break-downs, axis sides, tooltips, and small +multiples survive. **Scatter** is the exception — it rebuilds the chart around its own slots. +**Composite** has no tile of its own; it appears once your measures' marks differ. + +## When a measure can't be summed + +Cube folds the result rows down to what the chart draws. Which operation it folds with comes from the +measure's own aggregation type in the data model, so a count or a sum is summed, and a min or a max +folds with its own operation. + +Some measures cannot be folded correctly at all — an average, a ratio, a distinct count, a running +total, or a custom expression. When the query groups by a dimension the chart does not draw, or the +time granularity is coarser than the query's, such a measure would produce a wrong number. Rather +than draw it, Cube refuses the chart with a notice naming what to fix: + +> **Completed percentage can't be summed across Status.** Remove Status from the query, or add it to +> the chart. + +Either fix works: drop the dimension from the query, or bring it onto the chart — as the +**Dimension**, or in **Break down by** — so nothing has to be folded. Measures that fold safely are +unaffected, and when nothing needs folding every measure is drawn. diff --git a/docs-mintlify/docs/explore-analyze/charts/configuration/index.mdx b/docs-mintlify/docs/explore-analyze/charts/configuration/index.mdx index 417c2f30dc83e..13084b0e150e7 100644 --- a/docs-mintlify/docs/explore-analyze/charts/configuration/index.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/configuration/index.mdx @@ -1,16 +1,16 @@ --- title: Configure charts -description: Reference for chart configuration options — series mapping, color, axes, tooltips, and data labels. +description: Reference for chart configuration options — fields, color, axes, tooltips, and data labels. --- -The chart configuration panel has two tabs — **Fields** and **Style** — available for every chart type. Configuration options are divided into per-channel field assignments and per-chart style controls. +The chart configuration panel has two tabs, available for every chart type. The **Fields** tab builds +the chart out of the query's measures and dimensions; the **Style** tab controls how the result looks. | Page | What it covers | |---|---| -| [Series mapping](/docs/explore-analyze/charts/configuration/series-mapping) | Assigning query columns to chart channels (X, Y, color, size, tooltip) | -| [Series configuration](/docs/explore-analyze/charts/configuration/series-configuration) | Per-series mark type, color, and individual display options | -| [Color & stacking](/docs/explore-analyze/charts/configuration/color-and-stacking) | Color palettes, stacking mode, stacked segment sorting, and legend placement | +| [Fields](/docs/explore-analyze/charts/configuration/fields) | Measures, marks, axis sides, break-downs, orientation, and the derived chart type | +| [Axes & series style](/docs/explore-analyze/charts/configuration/axes) | Per-measure appearance, axis titles, grid lines, label formatting, scale, and reference lines | +| [Color & legend](/docs/explore-analyze/charts/configuration/color-and-stacking) | Color palettes, custom palettes, and legend placement | | [Small multiples](/docs/explore-analyze/charts/configuration/small-multiples) | Splitting a chart into a grid of panels, one per value of a dimension | -| [Axes](/docs/explore-analyze/charts/configuration/axes) | Axis titles, grid lines, label formatting, dual Y-axis, and reference lines | -| [Tooltips](/docs/explore-analyze/charts/configuration/tooltips) | Which fields appear on hover and how they are formatted | -| [Data labels](/docs/explore-analyze/charts/configuration/data-labels) | Labels shown on chart marks — positioning, formatting, and stacked totals | +| [Tooltips](/docs/explore-analyze/charts/configuration/tooltips) | Which fields appear on hover | +| [Data labels](/docs/explore-analyze/charts/configuration/data-labels) | Values written onto chart marks — position, format, and font size | diff --git a/docs-mintlify/docs/explore-analyze/charts/configuration/series-configuration.mdx b/docs-mintlify/docs/explore-analyze/charts/configuration/series-configuration.mdx deleted file mode 100644 index 680fa3fd373ca..0000000000000 --- a/docs-mintlify/docs/explore-analyze/charts/configuration/series-configuration.mdx +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Series configuration -description: Configure individual series — mark type, color, and display options — independently from the global chart settings. ---- - -Series configuration lets you override chart settings on a per-series basis. Access it from the **Fields** tab by expanding an individual series in the Y-axis section. - -{/* TODO screenshot: series configuration panel expanded for one series (hidden — replace this comment with when image is ready) */} - -## Mark type override - -Each series can use a different mark type, independent of the global chart mark. This enables composite charts — for example, plotting one measure as a bar and another as a line on the same chart. - -Available mark types per series: -- **Bar** -- **Line** -- **Area** -- **Scatter** (point) - -To create a bar + line chart: -1. Add two measures to the Y axis. -2. Expand the second series in the Fields tab. -3. Set its mark type to **Line**. -4. Optionally assign it to the **Right Y axis** in the same panel (see [Axes](/docs/explore-analyze/charts/configuration/axes)). - -{/* TODO screenshot: second series with mark type set to Line (hidden — replace this comment with when image is ready) */} - -## Series color - -When no **Color** channel is assigned (single-color charts with no color-by dimension), each series has an individual color picker. Click the color swatch to open the picker and set a custom color for that series. - -This setting has no effect when a Color channel is active — in that case, colors are managed by the palette in [Color & stacking](/docs/explore-analyze/charts/configuration/color-and-stacking). - -## Y axis assignment - -For charts with a dual Y axis, assign each series to either the **Left** or **Right** Y axis. This controls which axis scale the series uses. - -See [Axes](/docs/explore-analyze/charts/configuration/axes) for configuring the right axis title, labels, and scale. - -## Data labels per series - -Enable data labels for an individual series without enabling them globally. Configure label position, font, and format independently for each series. - -See [Data labels](/docs/explore-analyze/charts/configuration/data-labels) for the full configuration reference. - -## Stacking override - -On charts with multiple Y-axis series, you can set stacking behavior per-axis rather than globally. This lets you create grouped clusters where each cluster is internally stacked — expand the Y-axis settings for a specific series to access this option. diff --git a/docs-mintlify/docs/explore-analyze/charts/configuration/series-mapping.mdx b/docs-mintlify/docs/explore-analyze/charts/configuration/series-mapping.mdx deleted file mode 100644 index 33a5c2caea8dd..0000000000000 --- a/docs-mintlify/docs/explore-analyze/charts/configuration/series-mapping.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Series mapping -description: Assign query columns to chart channels — X axis, Y axis, color, size, and tooltips. ---- - -Series mapping controls which query columns are assigned to which chart channels. This is done in the **Fields** tab of the chart configuration panel. - -{/* TODO screenshot: Fields tab open showing drag targets for X, Y, Color, Size, Tooltip (hidden — replace this comment with when image is ready) */} - -## Chart channels - -| Channel | Description | Applicable chart types | -|---|---|---| -| **X** | The horizontal axis dimension or time field | Bar, line, area, scatter, heatmap, boxplot | -| **Y** | The vertical axis measure | Bar, line, area, scatter, boxplot | -| **Color** | Creates one series per unique value; controls stacking behavior | All Vega-based types | -| **Size** | Scales point radius by a numeric measure | Scatter, map | -| **Split by** | Repeats the chart once per unique value, as a grid of panels — see [small multiples](/docs/explore-analyze/charts/configuration/small-multiples) | Bar, line, area, scatter | -| **Tooltip** | Fields shown on hover | All types | -| **Theta** (pie) | The measure that determines slice size | Pie | -| **Source** / **Target** (sankey) | The dimensions holding the node each flow leaves and enters | Sankey | -| **Value** (sankey) | The measure that determines ribbon thickness | Sankey | - -## Assigning fields - -Drag a field from the **Available fields** list at the bottom of the Fields tab into the target channel slot. You can also drag an already-assigned field between channels. - -Fields can appear in more than one channel simultaneously — drag from **Available fields** to add a field to a second channel without removing it from the first. For example, you can assign the same dimension to both the X axis and the tooltip. - -{/* TODO screenshot: dragging a field from available fields into the Color channel (hidden — replace this comment with when image is ready) */} - -## Multiple measures on Y - -To plot multiple measures as separate series, drag additional measures into the **Y** channel. Each measure renders as its own series, with independent color and style settings in [series configuration](/docs/explore-analyze/charts/configuration/series-configuration). - -## Removing a field - -Drag a field out of its channel slot back to **Available fields**, or click the **×** on the field token to remove it. diff --git a/docs-mintlify/docs/explore-analyze/charts/configuration/small-multiples.mdx b/docs-mintlify/docs/explore-analyze/charts/configuration/small-multiples.mdx index 14a1506a50607..3c24d55c1017f 100644 --- a/docs-mintlify/docs/explore-analyze/charts/configuration/small-multiples.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/configuration/small-multiples.mdx @@ -48,8 +48,6 @@ Sorting interacts with this: with **Sort panels by** set to a measure and a desc Chart settings apply to all panels at once — axis titles and formats, colors and palettes, data labels, reference lines, and tooltips are configured once and take effect in every panel. A reference line is drawn once inside each panel, against that panel's own scale when the scales are independent. -Data labels and reference lines have to be switched on *after* the split, not before — see the limitations below. - A legend is shared across the grid rather than repeated per panel. Clicking a legend entry hides that series in every panel. ## Limitations @@ -57,4 +55,4 @@ A legend is shared across the grid rather than repeated per panel. Clicking a le - **One split dimension.** One dimension fills the grid, panel by panel. Splitting by two dimensions at once — one down the rows and another across the columns — is not supported. - **Cartesian charts only.** Bar, line, area, and scatter. Pie, sankey, table, KPI, heatmap, boxplot, map, and HTML charts cannot be split. - **Panel labels are not configurable.** Each panel is labeled with its dimension value; the font, size, and color are fixed. -- **The split is enabled on a single-view chart.** A chart that already carries data labels, a reference line, or a second Y axis series cannot be split — turn the split on first. The order is the only constraint: once a chart is split, data labels and reference lines can be added freely and are drawn in every panel. +- **One axis side.** A chart using both axis sides cannot be split, and a split chart offers one side only — the second side's option is disabled with a reason in each measure's [axis side](/docs/explore-analyze/charts/configuration/fields#axis-sides) toggle. diff --git a/docs-mintlify/docs/explore-analyze/charts/configuration/tooltips.mdx b/docs-mintlify/docs/explore-analyze/charts/configuration/tooltips.mdx index 33db7523c45b1..896e0b84d0706 100644 --- a/docs-mintlify/docs/explore-analyze/charts/configuration/tooltips.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/configuration/tooltips.mdx @@ -3,32 +3,37 @@ title: Tooltips description: Control which fields appear when a user hovers over a chart mark. --- -Tooltips appear when a user hovers over a data point in a chart. By default, Cube automatically populates the tooltip with all fields mapped to chart channels. You can customize which fields are shown and in what order. +Tooltips appear when a user hovers over a data point in a chart. By default, Cube populates the +tooltip with the fields the chart draws. You can pick which of the query's columns are shown. {/* TODO screenshot: tooltip displayed on a bar chart showing multiple fields (hidden — replace this comment with when image is ready) */} ## Default behavior -When a chart is first created, all fields assigned to the chart (X, Y, color, size) are included in the tooltip automatically. The tooltip is enabled by default on all Vega-based chart types (bar, line, area, scatter, heatmap, boxplot), on map charts, and on sankey charts. +When a chart is first created, the fields it draws are included in the tooltip automatically. +Tooltips are enabled by default on bar, line, area, scatter, heatmap, and boxplot charts, on map +charts, and on sankey charts. -[Sankey](/docs/explore-analyze/charts/chart-types/sankey) is the exception to the first rule: it seeds the tooltip with every column *except* the source, target and value it already draws. +[Sankey](/docs/explore-analyze/charts/chart-types/sankey) is the exception to the first rule: it seeds +the tooltip with every column *except* the source, target and value it already draws. ## Configuring tooltip fields -Open the **Fields** tab of the chart configuration panel. The **Tooltip** section shows the list of fields currently included in the tooltip. +Open the **Fields** tab. The **Tooltips** row summarizes the current selection — *All fields*, *N +fields*, or *None*. Open it for a checkable list of the query's columns, dimensions first, and check +or uncheck the ones you want. -| Action | How | -|---|---| -| **Add a field** | Drag a field from **Available fields** into the Tooltip slot | -| **Remove a field** | Click the **×** on a field token in the Tooltip list | -| **Reorder fields** | Drag field tokens within the Tooltip list | +On a bar, line, area, or scatter chart the selection applies to the whole chart, not to one measure. {/* TODO screenshot: Tooltip section in the Fields tab with field list (hidden — replace this comment with when image is ready) */} ## Disabling tooltips -To turn off tooltips entirely, remove all fields from the Tooltip slot. When the Tooltip slot is empty, no tooltip is shown on hover. +Uncheck every field to turn tooltips off. No tooltip is shown on hover while the list is empty. ## Tooltip behavior on stacked charts -On stacked bar charts, the tooltip is scoped to the individual stack segment under the cursor — it shows the value for that specific series at that X position, not the total stack value. To display the stack total, use [data labels](/docs/explore-analyze/charts/configuration/data-labels) with the **Simple totals** option. +On stacked bars, the tooltip is scoped to the individual stack segment under the cursor — it shows +the value for that series at that position, not the total. To show the total, turn on +[data labels](/docs/explore-analyze/charts/configuration/data-labels), which label a bar with its +total at the end of the bar. diff --git a/docs-mintlify/docs/explore-analyze/charts/index.mdx b/docs-mintlify/docs/explore-analyze/charts/index.mdx index 54619133ffb08..098acf5d752ed 100644 --- a/docs-mintlify/docs/explore-analyze/charts/index.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/index.mdx @@ -15,6 +15,8 @@ Chart type icons at the top of the chart panel let you quickly switch between co When you run a query on a new tab, Cube shows the chart type picker rather than picking for you. It outlines the type that best fits your query and labels it **Recommended** — see [Recommended chart type](/docs/explore-analyze/charts/chart-types#recommended-chart-type) — but choosing one is always your action. Any manual configuration you apply is preserved when you change query fields. +On a bar, line, area, or scatter chart the type shown on the button is derived from the fields you assigned rather than set separately, and picking a tile edits those fields instead of resetting them — see [the chart type follows the fields](/docs/explore-analyze/charts/configuration/fields#the-chart-type-follows-the-fields). + ### Resetting chart settings Sections of the configuration panel — fields, series, pivot, column widths — each carry their own **Reset** control, which clears that section back to its defaults. Resetting does not change the chart type you picked. @@ -29,10 +31,10 @@ Charts generated by the AI are written as [Vega-Lite v5](https://vega.github.io/ Adjust the appearance of any chart through the configuration panel: -- **[Color and stacking](/docs/explore-analyze/charts/configuration/color-and-stacking)** — Color palettes, series coloring, and stacking behavior -- **[Series configuration](/docs/explore-analyze/charts/configuration/series-configuration)** — Per-series mark type, color, and display options -- **[Series mapping](/docs/explore-analyze/charts/configuration/series-mapping)** — Assign query fields to chart channels (X, Y, color, size) -- **[Axes](/docs/explore-analyze/charts/configuration/axes)** — Axis titles, grid lines, scale, and reference lines +- **[Fields](/docs/explore-analyze/charts/configuration/fields)** — Measures, marks, axis sides, break-downs, and orientation +- **[Axes & series style](/docs/explore-analyze/charts/configuration/axes)** — Per-measure appearance, axis titles, grid lines, scale, and reference lines +- **[Color and legend](/docs/explore-analyze/charts/configuration/color-and-stacking)** — Color palettes and legend placement +- **[Small multiples](/docs/explore-analyze/charts/configuration/small-multiples)** — One panel per value of a dimension - **[Tooltips](/docs/explore-analyze/charts/configuration/tooltips)** — Fields shown on hover - **[Data labels](/docs/explore-analyze/charts/configuration/data-labels)** — Values displayed directly on chart marks From 9230965531964c8eccfa33ddccd1abcaff86ec26 Mon Sep 17 00:00:00 2001 From: Igor Lukanin Date: Wed, 9 Sep 2026 13:00:55 +0200 Subject: [PATCH 2/4] docs: retarget chart builder screenshot placeholders and de-duplicate colour guidance --- .../explore-analyze/charts/chart-types/area.mdx | 2 +- .../explore-analyze/charts/chart-types/bar.mdx | 6 +++--- .../explore-analyze/charts/configuration/axes.mdx | 4 ++-- .../charts/configuration/data-labels.mdx | 4 ++-- .../charts/configuration/fields.mdx | 15 ++++++++------- .../docs/explore-analyze/charts/index.mdx | 4 ++-- 6 files changed, 18 insertions(+), 17 deletions(-) diff --git a/docs-mintlify/docs/explore-analyze/charts/chart-types/area.mdx b/docs-mintlify/docs/explore-analyze/charts/chart-types/area.mdx index 4fdd59c895561..9d7884830fa95 100644 --- a/docs-mintlify/docs/explore-analyze/charts/chart-types/area.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/chart-types/area.mdx @@ -29,7 +29,7 @@ Set the placement to **Overlaid** and the areas share the baseline. Use only whe Placement is set on the measure's **Break down by** row in the Fields tab: **Stacked**, **Overlaid**, or **Stacked to 100%**. Each measure is placed independently. See [Fields](/docs/explore-analyze/charts/configuration/fields#break-down-by) for the full reference. -{/* Screenshot: stacking dropdown in the Style tab. Place inline, 50% width, right-aligned. (hidden — replace this comment with when image is ready) */} +{/* Screenshot: the placement segments on a measure's Break down by row — stacked, overlaid, stacked to 100%. Place inline, 50% width, right-aligned. (hidden — replace this comment with when image is ready) */} See [Color & legend](/docs/explore-analyze/charts/configuration/color-and-stacking) for palette options. diff --git a/docs-mintlify/docs/explore-analyze/charts/chart-types/bar.mdx b/docs-mintlify/docs/explore-analyze/charts/chart-types/bar.mdx index 6bb0a8cd82700..70bbbfd5578cc 100644 --- a/docs-mintlify/docs/explore-analyze/charts/chart-types/bar.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/chart-types/bar.mdx @@ -27,7 +27,7 @@ Break the measure down and leave its placement at **Stacked**: the values stack {/* Screenshot: stacked bar chart — revenue by product category stacked by order status. Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} -### Stacked Bar % +### Stacked to 100% Set the placement to **Stacked to 100%** and every bar is stretched to the full height, showing each value as a proportion of the category's total. Use when relative distribution matters more than absolute values. @@ -59,7 +59,7 @@ Each measure is placed independently, so one can stack while another sits side b See [Fields](/docs/explore-analyze/charts/configuration/fields#break-down-by) for the full reference. -{/* Screenshot: stacking dropdown open in the Style tab showing all five options. Place inline, 50% width, right-aligned. (hidden — replace this comment with when image is ready) */} +{/* Screenshot: the placement segments on a measure's Break down by row — stacked, side by side, stacked to 100%. Place inline, 50% width, right-aligned. (hidden — replace this comment with when image is ready) */} ## Data labels @@ -71,7 +71,7 @@ A bar is labeled with its total at the end of the bar. Turn on **Show data label See [Data labels](/docs/explore-analyze/charts/configuration/data-labels) for the full reference. -{/* Screenshot: stacked bar with total labels above each stack, Fields tab open showing Data Labels toggle enabled and Position set to "Outside end". Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} +{/* Screenshot: stacked bar with total labels at each bar end, Style tab open showing Data labels on and the position set outside the bar end. Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} ## Axis behavior diff --git a/docs-mintlify/docs/explore-analyze/charts/configuration/axes.mdx b/docs-mintlify/docs/explore-analyze/charts/configuration/axes.mdx index 57e6268d49991..47a5936d5401b 100644 --- a/docs-mintlify/docs/explore-analyze/charts/configuration/axes.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/configuration/axes.mdx @@ -52,7 +52,7 @@ disabled with a reason on an ordinal one. ## Axis settings -Every axis section carries the same two rows of controls: +Every axis section carries the same controls: | Setting | Description | |---|---| @@ -64,7 +64,7 @@ Every axis section carries the same two rows of controls: | **Label format** | **Number**, **Percentage**, **Currency**, or **Date** | | **Thin out overlapping labels** | Drop labels rather than let them collide | -A measure axis adds a third row for its scale: +A measure axis additionally controls its scale: | Setting | Description | |---|---| diff --git a/docs-mintlify/docs/explore-analyze/charts/configuration/data-labels.mdx b/docs-mintlify/docs/explore-analyze/charts/configuration/data-labels.mdx index bb75549858401..b713dd5b766c8 100644 --- a/docs-mintlify/docs/explore-analyze/charts/configuration/data-labels.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/configuration/data-labels.mdx @@ -6,7 +6,7 @@ description: Write values directly onto chart marks, with configurable position, Data labels write values onto the chart itself, so a reader gets exact numbers without cross-referencing an axis. -{/* Screenshot: stacked bar chart with total labels visible above each stack, Fields tab open showing Data Labels enabled. Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} +{/* Screenshot: stacked bar chart with total labels visible at each bar end, Style tab open showing Data labels enabled. Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */} ## Enabling data labels @@ -24,4 +24,4 @@ labels its total at the end of the bar; a line or an area labels each point's va | **Label format** | **Number**, **Percentage**, **Currency**, or **Date** | | **Font size** | Size of the label text | -{/* Screenshot: Fields tab with Data Labels toggle on and Position dropdown open showing the four options. Place inline, 50% width, right-aligned. (hidden — replace this comment with when image is ready) */} +{/* Screenshot: Style tab with Show data labels on and the position segments showing inside and outside the bar end. Place inline, 50% width, right-aligned. (hidden — replace this comment with when image is ready) */} diff --git a/docs-mintlify/docs/explore-analyze/charts/configuration/fields.mdx b/docs-mintlify/docs/explore-analyze/charts/configuration/fields.mdx index a7f01e64361a7..79a1d314704ff 100644 --- a/docs-mintlify/docs/explore-analyze/charts/configuration/fields.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/configuration/fields.mdx @@ -7,7 +7,7 @@ The **Fields** tab of the chart configuration panel builds the chart out of your bar, line, area, or scatter chart it reads top to bottom in the order you build: one section per measure, then the shared dimension, then **Small multiples**, then **Tooltips**. -{/* TODO screenshot: Fields tab open showing drag targets for X, Y, Color, Size, Tooltip (hidden — replace this comment with when image is ready) */} +{/* TODO screenshot: Fields tab open on a bar chart showing the Measure section, Dimension, Small multiples and Tooltips rows (hidden — replace this comment with when image is ready) */} ## Measure sections @@ -40,7 +40,7 @@ as bars on the left, revenue per order as a line on the right. Bar measures on one side are drawn side by side inside each category band, in list order. Lines and points are drawn over them against the same scale. -{/* TODO screenshot: dragging a field from available fields into the Color channel (hidden — replace this comment with when image is ready) */} +{/* TODO screenshot: two measure sections, one on each axis side, the second with its mark set to Line (hidden — replace this comment with when image is ready) */} ### Break down by @@ -60,11 +60,8 @@ each other. It is disabled until a dimension is picked, and its options depend o Side by side is unavailable when two bar measures already share the axis, since each measure already occupies its own bar in the band. -A measure with no break-down is drawn as a single series in a color picked automatically: the next -palette color after every break-down's values, so it never collides with them. - -Two measures broken down by the *same* dimension share that dimension's color scale. They keep one -legend row each, and a palette change on either applies to both. +A break-down decides what a color stands for, so it also decides how the measure is colored — see +[color scales](/docs/explore-analyze/charts/configuration/color-and-stacking#color-scales). ## Dimension @@ -106,6 +103,10 @@ A scatter chart plots measures against each other, so it takes a different set o **Size** to scale each point's radius by a measure. There is no orientation switch and no break-down row. +A **Scatter** mark and the scatter chart type are separate things. Any measure can take the scatter +mark to draw its values as points against the shared dimension, alongside a bar or a line. The scatter +*chart type* is the one that replaces the measure sections with the slots above. + ## The chart type follows the fields The chart type shown on the chart-type button is derived from what you build rather than set diff --git a/docs-mintlify/docs/explore-analyze/charts/index.mdx b/docs-mintlify/docs/explore-analyze/charts/index.mdx index 098acf5d752ed..f189bbdfd2f38 100644 --- a/docs-mintlify/docs/explore-analyze/charts/index.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/index.mdx @@ -19,7 +19,7 @@ On a bar, line, area, or scatter chart the type shown on the button is derived f ### Resetting chart settings -Sections of the configuration panel — fields, series, pivot, column widths — each carry their own **Reset** control, which clears that section back to its defaults. Resetting does not change the chart type you picked. +Sections of the configuration panel — fields, style, pivot, column widths — each carry their own **Reset** control, which clears that section back to its defaults. Resetting does not change the chart type you picked. ## Generate charts with AI @@ -33,7 +33,7 @@ Adjust the appearance of any chart through the configuration panel: - **[Fields](/docs/explore-analyze/charts/configuration/fields)** — Measures, marks, axis sides, break-downs, and orientation - **[Axes & series style](/docs/explore-analyze/charts/configuration/axes)** — Per-measure appearance, axis titles, grid lines, scale, and reference lines -- **[Color and legend](/docs/explore-analyze/charts/configuration/color-and-stacking)** — Color palettes and legend placement +- **[Color & legend](/docs/explore-analyze/charts/configuration/color-and-stacking)** — Color palettes and legend placement - **[Small multiples](/docs/explore-analyze/charts/configuration/small-multiples)** — One panel per value of a dimension - **[Tooltips](/docs/explore-analyze/charts/configuration/tooltips)** — Fields shown on hover - **[Data labels](/docs/explore-analyze/charts/configuration/data-labels)** — Values displayed directly on chart marks From 5c53baad5bf5cbca22485f676937a1c31c59281c Mon Sep 17 00:00:00 2001 From: Igor Lukanin Date: Wed, 9 Sep 2026 13:04:58 +0200 Subject: [PATCH 3/4] docs: fix remaining drag-tray wording in chart screenshot placeholders --- .../docs/explore-analyze/charts/chart-types/scatter.mdx | 2 +- .../explore-analyze/charts/configuration/color-and-stacking.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs-mintlify/docs/explore-analyze/charts/chart-types/scatter.mdx b/docs-mintlify/docs/explore-analyze/charts/chart-types/scatter.mdx index e6e55f46e310c..689ff3c96fc56 100644 --- a/docs-mintlify/docs/explore-analyze/charts/chart-types/scatter.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/chart-types/scatter.mdx @@ -31,7 +31,7 @@ Assign a measure to the **Size** slot in the Fields tab. Points scale proportion A scatter chart takes **X-Axis**, **Y-Axis**, **Series** and **Size** rather than the measure sections the other cartesian charts use, and has no orientation switch. See [Fields](/docs/explore-analyze/charts/configuration/fields#scatter-charts). -{/* Screenshot: Fields tab with Size channel assigned — showing the size field token. Place inline, 50% width, right-aligned. (hidden — replace this comment with when image is ready) */} +{/* Screenshot: Fields tab with a measure assigned to the Size slot. Place inline, 50% width, right-aligned. (hidden — replace this comment with when image is ready) */} ## Point appearance diff --git a/docs-mintlify/docs/explore-analyze/charts/configuration/color-and-stacking.mdx b/docs-mintlify/docs/explore-analyze/charts/configuration/color-and-stacking.mdx index 4f2fc0343db55..4e9283d7f869e 100644 --- a/docs-mintlify/docs/explore-analyze/charts/configuration/color-and-stacking.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/configuration/color-and-stacking.mdx @@ -14,7 +14,7 @@ what a color stands for is decided by that measure's funnel, sankey, heatmap, and map charts each carry a single **Palette** dropdown of their own — but the palettes are the same ones below. -{/* TODO screenshot: color and stacking section of the Style tab (hidden — replace this comment with when image is ready) */} +{/* TODO screenshot: a measure's Palette chip open on the Style tab showing the built-in palettes (hidden — replace this comment with when image is ready) */} ## Color scales From 9444f5ad71a10d47b9fb6f70e2d4d8a748930921 Mon Sep 17 00:00:00 2001 From: Igor Lukanin Date: Wed, 9 Sep 2026 13:07:13 +0200 Subject: [PATCH 4/4] docs: call the scatter size control a slot consistently --- .../docs/explore-analyze/charts/chart-types/scatter.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs-mintlify/docs/explore-analyze/charts/chart-types/scatter.mdx b/docs-mintlify/docs/explore-analyze/charts/chart-types/scatter.mdx index 689ff3c96fc56..04432cfa1a3a2 100644 --- a/docs-mintlify/docs/explore-analyze/charts/chart-types/scatter.mdx +++ b/docs-mintlify/docs/explore-analyze/charts/chart-types/scatter.mdx @@ -21,7 +21,7 @@ Pick a dimension in the **Series** slot to color the points by category. Use thi ### With size encoding -Map a third numeric measure to the **Size** channel to scale each point's radius by value. Use this to encode a third variable without adding a new axis. +Map a third numeric measure to the **Size** slot to scale each point's radius by value. Use this to encode a third variable without adding a new axis. {/* Screenshot: scatter chart with sized and colored points — average order value (X), return rate (Y), total revenue as size, colored by category. Place directly below this heading, full-width. (hidden — replace this comment with when image is ready) */}