Document all chart types

content/docs/platform/chart-editor/chart-types/area.mdx

@@ -0,0 +1,27 @@
+---
+title: Area
+description: Show how values change over time with the volume filled in
+icon: ChartArea
+---
+
+An area chart works like a [line chart](/platform/chart-editor/chart-types/line), but fills the space below each line. It makes volume easier to see, for example total traffic over a month.
+
+![Area chart of Servers and Players over a week](/images/chart-editor/chart-types/area.png)
+
+## Building an area chart
+
+Build it the same way as a line chart:
+
+- **Easy mode:** set **Show** to an interval. Each series, or each group of a **Breakdown**, becomes an area.
+- **Canvas mode:** add a **Time Group** node to each pipeline. Each Output node becomes an area.
+
+**Running total** works the same as on line charts.
+
+## Display options
+
+| Option            | Default  | Description                                                     |
+| ----------------- | -------- | --------------------------------------------------------------- |
+| Logarithmic Scale | Off      | Spaces the value axis by orders of magnitude                    |
+| Line Style        | Monotone | **Monotone** (smooth), **Linear** (straight lines), or **Step** |
+
+Area charts also support [Values](/platform/chart-editor/chart-types#values) settings and [Event markers](/platform/chart-editor/chart-types#event-markers).

content/docs/platform/chart-editor/chart-types/bar.mdx

@@ -0,0 +1,26 @@
+---
+title: Bar
+description: Compare values over time or between groups
+icon: ChartColumn
+---
+
+A bar chart compares values, either over time (one bar per day, for example) or between groups (one bar per version or platform).
+
+![Stacked bar chart of worlds per server over a week, broken down into four groups](/images/chart-editor/chart-types/bar-stacked.png)
+
+## Building a bar chart
+
+- **Over time:** in Easy mode, set **Show** to an interval. In Canvas mode, add a **Time Group** node.
+- **By group:** in Easy mode, leave **Show** on **Total** and pick a **Breakdown**. In Canvas mode, add a **Group By** node.
+
+Add more series (or Output nodes) to show several values per bar. See [Stacked bar charts](/platform/chart-editor/output-nodes#stacked-bar-charts).
+
+## Display options
+
+| Option            | Default  | Description                                                            |
+| ----------------- | -------- | ---------------------------------------------------------------------- |
+| Logarithmic Scale | Off      | Spaces the value axis by orders of magnitude                           |
+| Orientation       | Vertical | **Vertical** bars, or **Horizontal** bars for long group names         |
+| Stack Series      | On       | On: series are stacked in each bar. Off: series are drawn side by side |
+
+Bar charts also support [Values](/platform/chart-editor/chart-types#values) settings (unit, decimals, axis range, thresholds).

content/docs/platform/chart-editor/chart-types/heatmap.mdx

@@ -0,0 +1,30 @@
+---
+title: Heatmap
+description: Show intensity in a grid, like activity by hour and day
+icon: Grid3x3
+---
+
+A heatmap colors each cell by its value, from quiet to busy. It's useful for spotting patterns, like the busiest hours of the week.
+
+![Calendar heatmap of hourly server activity, with one column per day and one row per hour](/images/chart-editor/chart-types/heatmap-calendar.png)
+
+## Layouts
+
+The heatmap picks its layout from the shape of your data:
+
+| Layout                                                           | Easy mode                                                               | Canvas mode                                                           |
+| ---------------------------------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| **Calendar:** one column per day, one row per hour               | One series, **Show** set to **Hour**, over a time range of several days | One pipeline with a **Time Group** node set to hours                  |
+| **Grid:** one row per series, one column per group               | Several series, a **Breakdown**, and **Show** on **Total**              | Several Output nodes, each with a **Group By** node on the same field |
+| **Grid:** the first field is the rows, the second is the columns | —                                                                       | A **Group By** node with two fields                                   |
+| **Mosaic:** one tile per group                                   | One series, a **Breakdown**, and **Show** on **Total**                  | One pipeline with a **Group By** node on one field                    |
+
+![Mosaic heatmap with one tile per operating system and a tooltip on Windows 11](/images/chart-editor/chart-types/heatmap-mosaic.png)
+
+In grid layouts, empty rows and columns are hidden and the busiest rows are shown first. Hover a cell to see its exact value.
+
+## Display options
+
+| Option      | Default | Description                                    |
+| ----------- | ------- | ---------------------------------------------- |
+| Show Legend | On      | Shows a color scale from **Quiet** to **Busy** |

content/docs/platform/chart-editor/chart-types/index.mdx

@@ -0,0 +1,76 @@
+---
+title: Overview
+description: Every chart type in FastStats and when to use it
+icon: Shapes
+---
+
+Pick the chart type in the chart editor, next to the preview. You can change it at any time, and the same data is drawn in the new style.
+
+## Choosing a chart type
+
+| Chart type                                            | Best for                                                  |
+| ----------------------------------------------------- | --------------------------------------------------------- |
+| [Widget](/platform/chart-editor/chart-types/widget)   | One or more headline numbers with a trend                 |
+| [Line](/platform/chart-editor/chart-types/line)       | Trends over time                                          |
+| [Area](/platform/chart-editor/chart-types/area)       | Trends over time, with the volume filled in               |
+| [Bar](/platform/chart-editor/chart-types/bar)         | Comparing values over time or by group                    |
+| [Pie](/platform/chart-editor/chart-types/pie)         | How a total splits into a few groups                      |
+| [List](/platform/chart-editor/chart-types/list)       | Ranked values, like top pages or versions                 |
+| [Table](/platform/chart-editor/chart-types/table)     | Several metrics side by side for each group               |
+| [Map](/platform/chart-editor/chart-types/map)         | Values per country                                        |
+| [Treemap](/platform/chart-editor/chart-types/treemap) | Share of a total, as rectangles sized by value            |
+| [Heatmap](/platform/chart-editor/chart-types/heatmap) | Activity by hour and day, or across two groupings         |
+| [Radar](/platform/chart-editor/chart-types/radar)     | Comparing series across several categories at once        |
+| [Scatter](/platform/chart-editor/chart-types/scatter) | Values plotted against a numeric grouping like Core Count |
+
+## Over time or as a total
+
+Some chart types plot values over time, others show one value per group.
+
+- **Line** and **area** charts always use a time interval. In Easy mode, switching to one of them sets **Show** to **Auto**.
+- **Pie**, **list**, **map**, and **treemap** charts always show a total per group. In Easy mode, switching to one of them sets **Show** to **Total**.
+- **Bar**, **widget**, and **table** charts keep whatever you picked.
+
+In Canvas mode, a **Time Group** node puts a chart on a time axis, and a **Group By** node splits it into groups.
+
+## Shared options
+
+### Values
+
+Line, area, and bar charts have a **Values** section in the chart editor that controls how numbers are shown on the value axis and in tooltips.
+
+| Setting        | Description                                                                                               |
+| -------------- | --------------------------------------------------------------------------------------------------------- |
+| Unit           | Number, Percent (0–100), Percent (0–1), Duration (ms), Duration (s), Bytes, or a custom unit like `req/s` |
+| Decimal places | **Auto**, or a fixed number from 0 to 4                                                                   |
+| Axis range     | A fixed minimum and maximum for the value axis. Leave empty to scale automatically                        |
+| Thresholds     | Up to 6 labeled lines at a value, like a goal, budget, or limit. Pick a color for each one                |
+
+![The Values section with a Number unit, an axis range from 100 to 1000 and three thresholds](/images/chart-editor/chart-types/values-section.png)
+
+![Line chart with threshold lines at 250, 500 and 750](/images/chart-editor/chart-types/thresholds.png)
+
+### Event markers
+
+Line and area charts can show **Event Markers**: labeled points in time like launches, releases, or milestones. Turn on the marker collections you want under **Event Markers** in the chart editor.
+
+![Line chart with event markers and a tooltip for the v4.5.0 release from the GitHub releases collection](/images/chart-editor/chart-types/event-markers.png)
+
+### Legend
+
+Charts with more than one series show a legend. Click an entry to hide or show that series. Hold <kbd>Shift</kbd> or <kbd>Alt</kbd> while clicking to show only that series, and do it again to bring the others back. Hidden series are remembered in your browser.
+
+<video
+	src="/videos/chart-editor/legend-toggle.mp4"
+	aria-label="Clicking legend entries to hide series and Shift-clicking to show only one series"
+	className="w-full rounded-lg border"
+	autoplay
+	loop
+	muted
+	playsinline
+	controls
+/>
+
+### Logarithmic scale
+
+Line, area, bar, radar, and scatter charts have a **Logarithmic Scale** toggle. It spaces the value axis by orders of magnitude, which helps when one series is much larger than another.

content/docs/platform/chart-editor/chart-types/line.mdx

@@ -0,0 +1,26 @@
+---
+title: Line
+description: Show how values change over time
+icon: ChartLine
+---
+
+A line chart plots values over time. Use it to follow trends like player counts, page views, or error rates.
+
+![Line chart of Worlds and Servers over a week, with the tooltip showing both values](/images/chart-editor/chart-types/line.png)
+
+## Building a line chart
+
+- **Easy mode:** set **Show** to an interval (**Auto**, **Minute**, **Hour**, **Day**, **Week**, or **Month**). Each series becomes a line. Pick a **Breakdown** to draw one line per group instead, for example one line per game version.
+- **Canvas mode:** add a **Time Group** node to each pipeline. Each Output node becomes a line. See [Output & Multi-Series](/platform/chart-editor/output-nodes#multi-line-charts).
+
+Turn on **Running total** in Easy mode (or **Cumulative** on the Time Group node) to make each point add up every point before it.
+
+## Display options
+
+| Option            | Default  | Description                                                     |
+| ----------------- | -------- | --------------------------------------------------------------- |
+| Logarithmic Scale | Off      | Spaces the value axis by orders of magnitude                    |
+| Line Style        | Monotone | **Monotone** (smooth), **Linear** (straight lines), or **Step** |
+| Show Dots         | Off      | Draws a dot at every data point                                 |
+
+Line charts also support [Values](/platform/chart-editor/chart-types#values) settings (unit, decimals, axis range, thresholds) and [Event markers](/platform/chart-editor/chart-types#event-markers).

content/docs/platform/chart-editor/chart-types/list.mdx

@@ -0,0 +1,37 @@
+---
+title: List
+description: Show ranked values, like top pages or versions
+icon: List
+---
+
+A list chart shows one row per group with its value and a bar, sorted from highest to lowest. Use it for rankings like top pages, referrers, countries, or plugin versions.
+
+![List of countries with flags, server counts, value bars and a View all (66) button](/images/chart-editor/chart-types/list.png)
+
+## Building a list
+
+- **Easy mode:** pick a **Breakdown**. Each group becomes a row.
+- **Canvas mode:** add a **Group By** node before the **Output** node.
+
+## Tabs
+
+With more than one series (or Output node), each one becomes a tab, for example "Browsers" and "Countries". Click a tab or swipe on the card to switch between them. See [Tabbed lists](/platform/chart-editor/output-nodes#tabbed-lists).
+
+## Using a list on the dashboard
+
+- **Sorting:** click a column header to sort by it. Click again to flip the order.
+- **View all:** the card shows as many rows as fit. Click **View all** to open every row in a dialog, where you can also search.
+- **Icons:** rows can show icons, such as browser logos or country flags, by setting an **Icon set** on the Output node.
+- **Nested rows:** with **Nest by** on the Output node, related rows are grouped together and you can open a group to see what's inside.
+- **Filtering:** if you can manage the project, click a row to filter the whole dashboard to that value.
+
+<video
+	src="/videos/chart-editor/list-view-all.mp4"
+	aria-label="Opening View all on a list and searching for a value"
+	className="w-full rounded-lg border"
+	autoplay
+	loop
+	muted
+	playsinline
+	controls
+/>

content/docs/platform/chart-editor/chart-types/map.mdx

@@ -0,0 +1,35 @@
+---
+title: Map
+description: Show values per country on a world map
+icon: Globe
+---
+
+A map chart shades each country by its value, so you can see at a glance where your servers or visitors are.
+
+![World map of server locations with Algeria hovered, showing Servers: 1](/images/chart-editor/chart-types/map.png)
+
+## Building a map
+
+Group by a country field. Each group must be a two-letter country code (like `DE` or `US`), which is what the built-in country fields contain.
+
+- **Easy mode:** pick a country field as the **Breakdown**.
+- **Canvas mode:** add a **Group By** node on a country field before the **Output** node.
+
+A map shows one series. If there are several, it uses the first one.
+
+## Using a map on the dashboard
+
+- Countries with higher values are shaded more strongly. Hover a country to see its name and value.
+- Use the zoom buttons to zoom in and out, and drag to move around.
+- Open the map in fullscreen to also see a list of all countries, sorted by value.
+
+<video
+	src="/videos/chart-editor/map-zoom.mp4"
+	aria-label="Zooming and moving the map, then opening fullscreen with the country list"
+	className="w-full rounded-lg border"
+	autoplay
+	loop
+	muted
+	playsinline
+	controls
+/>

content/docs/platform/chart-editor/chart-types/meta.json

@@ -0,0 +1,18 @@
+{
+	"title": "Chart Types",
+	"icon": "Shapes",
+	"pages": [
+		"widget",
+		"line",
+		"area",
+		"bar",
+		"pie",
+		"list",
+		"table",
+		"map",
+		"treemap",
+		"heatmap",
+		"radar",
+		"scatter"
+	]
+}

content/docs/platform/chart-editor/chart-types/pie.mdx

@@ -0,0 +1,41 @@
+---
+title: Pie
+description: Show how a total splits into groups
+icon: ChartPie
+---
+
+A pie chart shows how a total is split between groups, for example the share of servers on each platform. It works best with a handful of groups.
+
+![Donut chart of environments with slice labels, the total in the center and the legend below](/images/chart-editor/chart-types/pie-donut.png)
+
+## Building a pie chart
+
+- **Easy mode:** pick a **Breakdown**. Each group becomes a slice. Use **Top _n_ values** and **Group the rest as Other** to keep the number of slices small.
+- **Canvas mode:** add a **Group By** node before the **Output** node.
+
+Without a breakdown, each series becomes its own slice instead.
+
+## Display options
+
+| Option            | Default       | Description                                                                                         |
+| ----------------- | ------------- | --------------------------------------------------------------------------------------------------- |
+| Chart Style       | Donut         | **Donut** (with a hole in the center) or a solid **Pie**                                            |
+| Show Center Value | On            | Shows a value in the middle of the donut. Donut style only                                          |
+| Center Value Type | Sum of Values | **Sum of Values** shows the total of all slices. **Category Count** shows how many slices there are |
+| Show Legend       | On            | Shows a color-coded legend below the chart                                                          |
+| Show Slice Labels | Off           | Shows a label with a line pointing to each slice                                                    |
+
+## Drilling down
+
+If the Output node uses **Nest by**, for example to split `java/17` into `java` and `17`, slices are grouped by the first part. Click a slice to see the values inside it, and use the back button to return to all categories. See [Output settings](/platform/chart-editor/output-nodes#output-settings).
+
+<video
+	src="/videos/chart-editor/pie-drilldown.mp4"
+	aria-label="Clicking a pie slice to drill into its values and going back to all categories"
+	className="w-full rounded-lg border"
+	autoplay
+	loop
+	muted
+	playsinline
+	controls
+/>

content/docs/platform/chart-editor/chart-types/radar.mdx

@@ -0,0 +1,24 @@
+---
+title: Radar
+description: Compare series across several categories at once
+icon: Radar
+---
+
+A radar chart draws one spoke per category and connects each series' values into a shape. Use it to compare a few series across the same categories, for example two plugin versions across several platforms.
+
+![Radar chart comparing Servers and Average players across game versions](/images/chart-editor/chart-types/radar.png)
+
+## Building a radar chart
+
+- **Easy mode:** add a series for each shape you want to compare, pick a **Breakdown**, and leave **Show** on **Total**. Each group of the breakdown becomes a spoke.
+- **Canvas mode:** build one pipeline per series, each ending in an **Output** node, and add a **Group By** node on the same field to each pipeline.
+
+## Display options
+
+| Option            | Default | Description                                                             |
+| ----------------- | ------- | ----------------------------------------------------------------------- |
+| Logarithmic Scale | Off     | Spaces the value axis by orders of magnitude                            |
+| Show Dots         | On      | Draws a dot at each data point                                          |
+| Fill Opacity      | Medium  | How strongly each shape is filled: None, Light, Medium, Heavy, or Solid |
+| Show Legend       | On      | Shows a legend when there is more than one series                       |
+| Grid Shape        | Polygon | Shape of the background grid: **Polygon** or **Circle**                 |

content/docs/platform/chart-editor/chart-types/scatter.mdx

@@ -0,0 +1,24 @@
+---
+title: Scatter
+description: Plot values against a grouping like Core Count
+icon: ChartScatter
+---
+
+A scatter chart draws a point for each value instead of connecting them. Use it to see how a value relates to something numeric, for example how player count relates to Core Count.
+
+![Scatter chart of servers per game version](/images/chart-editor/chart-types/scatter.png)
+
+## Building a scatter chart
+
+- **Against a grouping:** in Easy mode, pick a **Breakdown** (for example Core Count) and leave **Show** on **Total**. In Canvas mode, add a **Group By** node. Each group becomes a position on the horizontal axis.
+- **Over time:** in Easy mode, set **Show** to an interval. In Canvas mode, add a **Time Group** node. Points are placed along a time axis.
+
+Each series (or Output node) becomes its own set of points with its own color.
+
+## Display options
+
+| Option            | Default | Description                                       |
+| ----------------- | ------- | ------------------------------------------------- |
+| Logarithmic Scale | Off     | Spaces the value axis by orders of magnitude      |
+| Point Size        | Medium  | **Small**, **Medium**, or **Large**               |
+| Show Legend       | On      | Shows a legend when there is more than one series |