docs: expand charts section with per-type pages and configuration reference

Replace the single-page charts stub with a full Charts section elevated
to the Explore & Analyze level. Adds 19 pages covering all chart types
(bar, line, area, scatter, pie, donut, heatmap, boxplot, table, KPI, map,
HTML), a standalone custom visualizations page for Vega-Lite spec editing,
and a Configure charts reference group (series mapping, series config,
color & stacking, axes, tooltips, data labels).

Made-with: Cursor

Author: keydunov

docs-mintlify/docs.json

@@ -53,11 +53,46 @@
                 "pages": [
                   "docs/explore-analyze/workbooks/querying-data",
                   "docs/explore-analyze/workbooks/calculated-fields",
-                  "docs/explore-analyze/workbooks/source-sql-tabs",
-                  "docs/explore-analyze/workbooks/charts"
+                  "docs/explore-analyze/workbooks/source-sql-tabs"
                 ]
               },
               "docs/explore-analyze/explore",
+              {
+                "group": "Charts",
+                "root": "docs/explore-analyze/charts/index",
+                "pages": [
+                  {
+                    "group": "Chart types",
+                    "root": "docs/explore-analyze/charts/chart-types/index",
+                    "pages": [
+                      "docs/explore-analyze/charts/chart-types/bar",
+                      "docs/explore-analyze/charts/chart-types/line",
+                      "docs/explore-analyze/charts/chart-types/area",
+                      "docs/explore-analyze/charts/chart-types/scatter",
+                      "docs/explore-analyze/charts/chart-types/pie",
+                      "docs/explore-analyze/charts/chart-types/heatmap",
+                      "docs/explore-analyze/charts/chart-types/boxplot",
+                      "docs/explore-analyze/charts/chart-types/table",
+                      "docs/explore-analyze/charts/chart-types/kpi",
+                      "docs/explore-analyze/charts/chart-types/map",
+                      "docs/explore-analyze/charts/chart-types/html"
+                    ]
+                  },
+                  "docs/explore-analyze/charts/custom",
+              {
+                    "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/color-and-stacking",
+                      "docs/explore-analyze/charts/configuration/axes",
+                      "docs/explore-analyze/charts/configuration/tooltips",
+                      "docs/explore-analyze/charts/configuration/data-labels"
+                    ]
+                  }
+                ]
+              },
               "docs/explore-analyze/analytics-chat"
             ]
           },

docs-mintlify/docs/explore-analyze/charts/chart-types/area.mdx

@@ -0,0 +1,38 @@
+---
+title: Area
+description: Show volume or part-to-whole trends over time with a filled region beneath the line.
+---
+
+Area charts add a filled region beneath the line. The fill communicates magnitude and cumulative volume, making area charts especially effective for stacked part-to-whole breakdowns over time.
+
+## Variants
+
+### 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).
+
+{/* 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 <Frame><img src="..." /></Frame> when image is ready) */}
+
+### Percentage stacked (Stack %)
+
+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.
+
+{/* Screenshot: percentage stacked area chart — same data normalized to 100%. Place directly below this heading, full-width. (hidden — replace this comment with <Frame><img src="..." /></Frame> 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.
+
+{/* Screenshot: overlaid area chart — two series, clearly separated in value. Place directly below this heading, full-width. (hidden — replace this comment with <Frame><img src="..." /></Frame> when image is ready) */}
+
+## Stacking
+
+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.
+
+{/* Screenshot: stacking dropdown in the Style tab. Place inline, 50% width, right-aligned. (hidden — replace this comment with <Frame><img src="..." /></Frame> when image is ready) */}
+
+See [Color & stacking](/docs/explore-analyze/charts/configuration/color-and-stacking) for palette options and stacked segment sorting.
+
+## Axis behavior
+
+Area charts use a temporal X axis for time dimensions — continuous and time-aware. For non-time fields, the axis is ordinal.

docs-mintlify/docs/explore-analyze/charts/chart-types/bar.mdx

@@ -0,0 +1,78 @@
+---
+title: Bar
+description: Compare values across categories with grouped, stacked, percentage, and horizontal variants.
+---
+
+Bar charts compare values across discrete categories. Use them when the magnitude of individual values matters and direct comparison between categories is the goal.
+
+## Variants
+
+### Basic
+
+One dimension on the X axis, one measure on the Y axis. Each category gets a single bar.
+
+<Frame>
+  <img src="https://ucarecdn.com/4181db03-8959-4753-a09d-12aa182d5309/" />
+</Frame>
+
+### 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.
+
+{/* Screenshot: grouped bar chart — order count by status, grouped by product category. Place directly below this heading, full-width. (hidden — replace this comment with <Frame><img src="..." /></Frame> 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.
+
+{/* Screenshot: stacked bar chart — revenue by product category stacked by order status. Place directly below this heading, full-width. (hidden — replace this comment with <Frame><img src="..." /></Frame> when image is ready) */}
+
+### Percentage stacked (Stack %)
+
+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.
+
+{/* Screenshot: percentage stacked bar — same data as stacked but normalized to 100%. Place directly below this heading, full-width. (hidden — replace this comment with <Frame><img src="..." /></Frame> 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.
+
+{/* Screenshot: horizontal stacked bar chart. Place directly below this heading, full-width. (hidden — replace this comment with <Frame><img src="..." /></Frame> 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).
+
+{/* 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 <Frame><img src="..." /></Frame> when image is ready) */}
+
+## Stacking
+
+Stacking behavior is set in the **Color & stacking** section of the Style 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% |
+
+Stacking can also be set independently per Y-axis series — enabling grouped clusters of stacked sub-groups.
+
+{/* Screenshot: stacking dropdown open in the Style tab showing all five options. Place inline, 50% width, right-aligned. (hidden — replace this comment with <Frame><img src="..." /></Frame> 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:
+
+- **Format** — number format applied to the label value
+- **Font size** — size of the label text
+- **Position** — Outside end, Inside end, Inside center, or Inside base
+
+{/* 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 <Frame><img src="..." /></Frame> 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.
+
+Tooltips on stacked bars are scoped to the segment under the cursor, not the full stack total.

docs-mintlify/docs/explore-analyze/charts/chart-types/boxplot.mdx

@@ -0,0 +1,32 @@
+---
+title: Boxplot
+description: Display the statistical distribution of a measure across categories using box-and-whisker plots.
+---
+
+Boxplots summarize the distribution of a numeric measure per category, showing the median, interquartile range, and outliers in a single mark. Use them to compare spread and skew across groups rather than just averages.
+
+## Variant
+
+### Box-and-whisker
+
+One dimension on the X axis groups the data into categories. One measure on the Y axis provides the raw values. The chart computes the distribution statistics internally.
+
+{/* Screenshot: boxplot — sale price distribution by product category (5–6 boxes with visible whiskers and outlier points). Place directly below this heading, full-width. (hidden — replace this comment with <Frame><img src="..." /></Frame> when image is ready) */}
+
+## Reading a boxplot
+
+{/* Screenshot: annotated single box with labels pointing to the box, center line, whiskers, and outlier points. Place inline, 50% width, right-aligned. (hidden — replace this comment with <Frame><img src="..." /></Frame> when image is ready) */}
+
+| Element | Description |
+|---|---|
+| **Box** | Interquartile range — 25th to 75th percentile |
+| **Center line** | Median (50th percentile) |
+| **Whiskers** | Extend to min/max within 1.5× the IQR |
+| **Points** | Values beyond the whiskers (outliers) |
+
+## Data structure
+
+Boxplots require **raw, row-level data** — each row is one observation. Do not pre-aggregate before using a boxplot; the chart engine computes the distribution itself.
+
+- **X axis** — the grouping dimension (e.g. product category)
+- **Y axis** — the measure to distribute (e.g. sale price)

docs-mintlify/docs/explore-analyze/charts/chart-types/heatmap.mdx

@@ -0,0 +1,31 @@
+---
+title: Heatmap
+description: Visualize a measure across two categorical dimensions as a color-coded grid.
+---
+
+Heatmaps render data as a grid where each cell's color encodes a measure value at the intersection of two dimensions. Use them to spot patterns, dense clusters, and outliers across two categorical axes at once.
+
+## Variant
+
+### Color-scaled grid
+
+One dimension on the X axis, one on the Y axis, and one measure mapped to the **Color** channel. Each cell's color encodes that measure's value for its row/column pair.
+
+{/* Screenshot: heatmap — order count by product category (Y) and month (X), colored from light to dark. Place directly below this heading, full-width. (hidden — replace this comment with <Frame><img src="..." /></Frame> when image is ready) */}
+
+## Color palette
+
+A continuous gradient palette is applied by default — low values map to the lighter end, high values to the darker end. Change or reverse the palette in the **Color** section of the Style tab.
+
+{/* 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 <Frame><img src="..." /></Frame> when image is ready) */}
+
+For custom palettes, see [Color & stacking](/docs/explore-analyze/charts/configuration/color-and-stacking).
+
+## Data structure
+
+A heatmap requires exactly:
+- One dimension on the **X axis**
+- One dimension on the **Y axis**
+- One measure on the **Color** channel
+
+Cells with no data in the result set are left blank.

docs-mintlify/docs/explore-analyze/charts/chart-types/html.mdx

@@ -0,0 +1,54 @@
+---
+title: HTML
+description: Build fully custom layouts using HTML templates with Handlebars and JavaScript.
+---
+
+HTML charts let you render any layout that Vega-Lite cannot produce — custom scorecards, branded cards, rich tables, or any structure built with HTML, CSS, and JavaScript. Query results are available inside the template via [Handlebars](https://handlebarsjs.com/) expressions.
+
+## Variant
+
+### HTML template
+
+A free-form HTML document with Handlebars expressions. Write any markup and bind query result data directly in the template.
+
+{/* Screenshot: HTML chart with a custom branded scorecard layout. Place directly below this heading, full-width. (hidden — replace this comment with <Frame><img src="..." /></Frame> when image is ready) */}
+
+## Template structure
+
+Query results are available in the template context under `result`.
+
+**Access the first row** with `result._first`:
+
+```html
+<div class="scorecard">
+  <h2>{{result._first.order_items.status}}</h2>
+  <p>{{result._first.order_items.count}} orders</p>
+</div>
+```
+
+**Iterate over all rows** with `{{#each result.data}}`:
+
+```html
+<ul>
+  {{#each result.data}}
+    <li>{{this.order_items.status}}: {{this.order_items.count}}</li>
+  {{/each}}
+</ul>
+```
+
+## Using JavaScript
+
+Standard `<script>` tags are supported, enabling the use of charting libraries (D3, Chart.js, etc.) or any JavaScript that manipulates the rendered DOM.
+
+```html
+<canvas id="myChart"></canvas>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+  const labels = [{{#each result.data}}"{{this.order_items.status}}"{{#unless @last}},{{/unless}}{{/each}}];
+  const data = [{{#each result.data}}{{this.order_items.count}}{{#unless @last}},{{/unless}}{{/each}}];
+  new Chart(document.getElementById('myChart'), {
+    type: 'bar',
+    data: { labels, datasets: [{ data }] }
+  });
+</script>
+```

docs-mintlify/docs/explore-analyze/charts/chart-types/index.mdx

@@ -0,0 +1,20 @@
+---
+title: Chart types
+description: Overview of all built-in chart types available in Cube workbooks.
+---
+
+Cube includes a library of built-in chart types covering the most common visualization patterns. Each type is designed for specific data shapes — choose the one that best fits your query structure and the question you're answering.
+
+- [Bar](/docs/explore-analyze/charts/chart-types/bar)
+- [Line](/docs/explore-analyze/charts/chart-types/line)
+- [Area](/docs/explore-analyze/charts/chart-types/area)
+- [Scatter](/docs/explore-analyze/charts/chart-types/scatter)
+- [Pie & donut](/docs/explore-analyze/charts/chart-types/pie)
+- [Heatmap](/docs/explore-analyze/charts/chart-types/heatmap)
+- [Boxplot](/docs/explore-analyze/charts/chart-types/boxplot)
+- [Table](/docs/explore-analyze/charts/chart-types/table)
+- [KPI](/docs/explore-analyze/charts/chart-types/kpi)
+- [Map](/docs/explore-analyze/charts/chart-types/map)
+- [HTML](/docs/explore-analyze/charts/chart-types/html)
+
+For configuration options that apply across chart types — axes, color, series settings, tooltips — see [Configure charts](/docs/explore-analyze/charts/configuration).