Add multiple-axis examples

benchmarks/conformance/DEFINITION-COVERAGE-AUDIT.md

@@ -142,7 +142,7 @@ ownership boundary.
 | [54 — Bump ranking](./cases/54-bump-ranking/example.tsx)                               | Definition now        | Public ranking and maximum-date selection feed native line, dot, and text marks.                                                                     |
 | [59 — Grouped reducer bars](./cases/59-grouped-reducer-bars/example.tsx)               | Definition now        | Public grouped mean output feeds native bars and labels.                                                                                             |
 | [60 — Lag autocorrelation](./cases/60-lag-autocorrelation/example.tsx)                 | Definition now        | Public two-row windows form lag pairs for native dots and a reference line.                                                                          |
-| [70 — Composed chart](./cases/70-composed-chart/example.tsx)                           | First-party primitive | Native `barY.maxThickness` applies a centered cap after final band, subgroup, and inset resolution; one private resolver also serves `barX`.         |
+| [70 — Three-axis composed chart](./cases/70-composed-chart/example.tsx)                | First-party primitive | Named scales place precipitation and wind on stacked right axes, while native `barY.maxThickness` caps the final resolved band.                      |
 | [72 — Mixed bars](./cases/72-recharts-mixed-bars/example.tsx)                          | Definition now        | Public grouped bar layout expresses adjacent stacked and independent slots.                                                                          |
 | [73 — Many-point scatter](./cases/73-many-point-scatter/example.tsx)                   | Definition now        | Native dots own explicit keys and a configured radius scale over selected source rows.                                                               |
 | [102 — World choropleth](./cases/102-world-choropleth/example.tsx)                     | Definition now        | `geoShape`, a public Equal Earth descriptor, and threshold color render joined countries.                                                            |

benchmarks/conformance/DEFINITION-COVERAGE-OVERVIEW.md

@@ -132,7 +132,7 @@ presentation policy.
 | [63-violin-distributions — Violin distribution comparison](./cases/63-violin-distributions/example.tsx)                                   | First-party primitive | `violin-mark`                                                                    | `example.tsx`, `tanstack.test.ts`                  |
 | [64-marimekko-mosaic — Marimekko survey composition](./cases/64-marimekko-mosaic/example.tsx)                                             | First-party primitive | `mosaic-layout`                                                                  | `example.tsx`, `tanstack.test.ts`                  |
 | [65-voronoi-nearest-tooltip — Voronoi nearest-point interaction](./cases/65-voronoi-nearest-tooltip/example.tsx)                          | Optional primitive    | `spatial-voronoi`                                                                | `example.tsx`                                      |
-| [70-composed-chart — Layered Seattle weather chart](./cases/70-composed-chart/example.tsx)                                                | First-party primitive | `bar-max-thickness`                                                              | `example.tsx`, `tanstack.test.ts`                  |
+| [70-composed-chart — Seattle weather with three y axes](./cases/70-composed-chart/example.tsx)                                            | First-party primitive | `bar-max-thickness`                                                              | `example.tsx`, `tanstack.test.ts`                  |
 | [71-recharts-population-pyramid — Palmer penguins by species and sex](./cases/71-recharts-population-pyramid/example.tsx)                 | Definition now        | `current-definition-api`                                                         | `example.tsx`, `tanstack.test.ts`                  |
 | [72-recharts-mixed-bars — Stacked and adjacent Seattle weather bars](./cases/72-recharts-mixed-bars/example.tsx)                          | Definition now        | `current-definition-api`                                                         | `example.tsx`                                      |
 | [73-many-point-scatter — Automobile specifications scatter](./cases/73-many-point-scatter/example.tsx)                                    | Definition now        | `current-definition-api`                                                         | `example.tsx`, `tanstack.test.ts`                  |

benchmarks/conformance/cases/70-composed-chart/case.json

@@ -3,15 +3,16 @@
   "referenceRenderer": "recharts",
   "order": 700,
   "id": "70-composed-chart",
-  "title": "Layered Seattle weather chart",
+  "title": "Seattle weather with three y axes",
   "family": "composition",
-  "intent": "Compare daily maximum temperature, precipitation, minimum temperature, and wind using an area, bars, a line, and points.",
+  "intent": "Compare daily temperature, precipitation, and wind without forcing unlike units onto one y scale.",
   "support": "composed",
   "features": [
     "mixed marks",
+    "independent y scales",
+    "left axis and stacked right axes",
     "daily observations",
     "monotone curves",
-    "shared numeric scale",
     "resolved maximum bar thickness"
   ],
   "geometry": [
@@ -25,7 +26,7 @@
     "url": "https://recharts.github.io/en-US/examples/LineBarAreaComposedChart/"
   },
   "ai": {
-    "create": "Create one chart from Seattle weather observations that layers maximum temperature as an area, precipitation as bars, minimum temperature as a monotone line, and wind as red points.",
-    "maintain": "Select a different weather window while preserving source dates and measures, mark order, colors, and cast-free channel inference."
+    "create": "Create one chart from Seattle weather observations that uses a left temperature axis, an independent right precipitation axis for bars, and a second right wind axis for points.",
+    "maintain": "Select a different weather window while preserving source dates, units, named scale bindings, stacked right axes, mark order, colors, and cast-free channel inference."
   }
 }

benchmarks/conformance/cases/70-composed-chart/example.tsx

@@ -32,6 +32,7 @@ export const createExampleChart = (input: ChartOptions) => {
           id: 'precipitation-bars',
           x: 'date',
           y: 'precipitation',
+          yScale: 'precipitation',
           fill: '#413ea0',
           maxThickness: 20,
         }),
@@ -43,8 +44,10 @@ export const createExampleChart = (input: ChartOptions) => {
           curve: monotone,
         }),
         dot(rows, {
+          id: 'wind-points',
           x: 'date',
           y: 'wind',
+          yScale: 'wind',
           fill: '#ef4444',
           r: 4.5,
         }),
@@ -56,10 +59,35 @@ export const createExampleChart = (input: ChartOptions) => {
             ticks: { format: (value: Date) => dateFormat.format(value) },
           },
         },
-        y: { scale: scaleLinear, grid: true, axis: { ticks: { count: 5 } } },
+        y: {
+          scale: scaleLinear,
+          grid: true,
+          axis: {
+            label: 'Temperature (°C)',
+            ticks: { count: 5 },
+          },
+        },
+        precipitation: {
+          channel: 'y',
+          side: 'right',
+          scale: scaleLinear,
+          axis: {
+            label: 'Precipitation (mm)',
+            ticks: { count: 5 },
+          },
+        },
+        wind: {
+          channel: 'y',
+          side: 'right',
+          scale: scaleLinear,
+          axis: {
+            label: 'Wind (m/s)',
+            ticks: { count: 5 },
+          },
+        },
       },
 
-      margin: { top: 20, right: 20, bottom: 50, left: 80 },
+      margin: { top: 20, bottom: 50 },
     },
     { keyboard: true, tooltip: exampleTooltip },
   )
@@ -68,7 +96,7 @@ export interface ChartOptions {
   revision: number
 }
 
-export const exampleAriaLabel = 'Layered Seattle weather'
+export const exampleAriaLabel = 'Seattle weather with three y axes'
 
 export const chart = createExampleChart({
   revision: 0,

benchmarks/conformance/cases/70-composed-chart/recharts.ts

@@ -32,7 +32,7 @@ function chart(input: ConformanceInput) {
       margin: { top: 20, right: 20, bottom: 20, left: 20 },
       accessibilityLayer: true,
       role: 'img',
-      title: 'Layered Seattle weather',
+      title: 'Seattle weather with three y axes',
     },
     [
       createElement(CartesianGrid, {
@@ -47,14 +47,45 @@ function chart(input: ConformanceInput) {
           value instanceof Date ? dateFormat.format(value) : String(value),
       }),
       createElement(YAxis, {
-        key: 'y',
+        key: 'temperature-axis',
+        yAxisId: 'temperature',
         tickCount: 5,
         width: 60,
+        label: {
+          value: 'Temperature (°C)',
+          angle: -90,
+          position: 'insideLeft',
+        },
+      }),
+      createElement(YAxis, {
+        key: 'precipitation-axis',
+        yAxisId: 'precipitation',
+        orientation: 'right',
+        tickCount: 5,
+        width: 72,
+        label: {
+          value: 'Precipitation (mm)',
+          angle: 90,
+          position: 'insideRight',
+        },
+      }),
+      createElement(YAxis, {
+        key: 'wind-axis',
+        yAxisId: 'wind',
+        orientation: 'right',
+        tickCount: 5,
+        width: 60,
+        label: {
+          value: 'Wind (m/s)',
+          angle: 90,
+          position: 'insideRight',
+        },
       }),
       createElement(Area, {
         key: 'area',
         type: 'monotone',
         dataKey: 'temp_max',
+        yAxisId: 'temperature',
         fill: '#8884d8',
         fillOpacity: 0.2,
         stroke: '#8884d8',
@@ -63,6 +94,7 @@ function chart(input: ConformanceInput) {
       createElement(Bar, {
         key: 'bar',
         dataKey: 'precipitation',
+        yAxisId: 'precipitation',
         barSize: 20,
         fill: '#413ea0',
         isAnimationActive: false,
@@ -71,6 +103,7 @@ function chart(input: ConformanceInput) {
         key: 'line',
         type: 'monotone',
         dataKey: 'temp_min',
+        yAxisId: 'temperature',
         stroke: '#ff7300',
         strokeWidth: 2,
         dot: false,
@@ -79,11 +112,12 @@ function chart(input: ConformanceInput) {
       createElement(Scatter, {
         key: 'scatter',
         dataKey: 'wind',
+        yAxisId: 'wind',
         fill: '#ef4444',
         isAnimationActive: false,
       }),
     ],
   )
 }
 
-export const mount = rechartsMount(chart, 'Layered Seattle weather')
+export const mount = rechartsMount(chart, 'Seattle weather with three y axes')

benchmarks/conformance/cases/70-composed-chart/tanstack.test.ts

@@ -2,7 +2,7 @@ import { createChartRuntime } from '@tanstack/charts'
 import { describe, expect, it } from 'vitest'
 import { loadTanStackSources } from '../../native-catalog'
 import { createExampleChart } from './tanstack'
-import type { SceneNode } from '@tanstack/charts'
+import type { SceneNode, SceneRule } from '@tanstack/charts'
 import type { ConformanceInput } from '../../types'
 
 const input = {
@@ -42,13 +42,40 @@ describe('native composed-chart bar sizing', () => {
     })
   })
 
+  it('binds named scales and stacks both independent right-side axes', () => {
+    const scene = render(input)
+    const precipitationPoint = scene.points.find(
+      ({ markId }) => markId === 'precipitation-bars',
+    )
+    const precipitationAxis = flatten(scene.nodes).find(
+      (node): node is SceneRule =>
+        node.kind === 'rule' && node.key === 'precipitation-axis',
+    )
+    const windAxis = flatten(scene.nodes).find(
+      (node): node is SceneRule =>
+        node.kind === 'rule' && node.key === 'wind-axis',
+    )
+    if (!precipitationPoint) {
+      throw new Error('Expected a precipitation point')
+    }
+
+    expect(scene.scales.precipitation).toBeDefined()
+    expect(precipitationPoint.y).toBe(
+      scene.scales.precipitation?.map(precipitationPoint.yValue),
+    )
+    expect(precipitationAxis?.x1).toBe(scene.chart.x + scene.chart.width)
+    expect(windAxis?.x1).toBeGreaterThan(precipitationAxis?.x1 ?? Infinity)
+  })
+
   it('does not hide responsive bar geometry outside the definition', async () => {
     const closure = await loadTanStackSources('70-composed-chart')
     const source = closure.files.map((file) => file.source).join('\n')
 
     expect(closure.files.map((file) => file.path)).toEqual(['example.tsx'])
     expect(closure.roles.support.files).toBe(0)
     expect(source).toContain('maxThickness: 20')
+    expect(source).toContain("yScale: 'precipitation'")
+    expect(source).toContain("yScale: 'wind'")
     expect(source).not.toContain('defineChart(({')
     expect(source).not.toContain('innerWidth')
     expect(source).not.toContain('categoryBandwidth')

benchmarks/conformance/cases/70-composed-chart/tanstack.ts

@@ -3,6 +3,10 @@ import { tanstackExampleMount } from '../../shared/mount'
 
 export * from './example'
 
-export const mount = tanstackExampleMount(createExampleChart, exampleAriaLabel)
+export const mount = tanstackExampleMount(
+  createExampleChart,
+  exampleAriaLabel,
+  { guides: true, margin: true },
+)
 
 export const catalogCase = mount

benchmarks/conformance/catalog-index.json

@@ -2384,15 +2384,16 @@
       "referenceRenderer": "recharts",
       "order": 700,
       "id": "70-composed-chart",
-      "title": "Layered Seattle weather chart",
+      "title": "Seattle weather with three y axes",
       "family": "composition",
-      "intent": "Compare daily maximum temperature, precipitation, minimum temperature, and wind using an area, bars, a line, and points.",
+      "intent": "Compare daily temperature, precipitation, and wind without forcing unlike units onto one y scale.",
       "support": "composed",
       "features": [
         "mixed marks",
+        "independent y scales",
+        "left axis and stacked right axes",
         "daily observations",
         "monotone curves",
-        "shared numeric scale",
         "resolved maximum bar thickness"
       ],
       "geometry": [
@@ -2418,8 +2419,8 @@
         "url": "https://recharts.github.io/en-US/examples/LineBarAreaComposedChart/"
       },
       "ai": {
-        "create": "Create one chart from Seattle weather observations that layers maximum temperature as an area, precipitation as bars, minimum temperature as a monotone line, and wind as red points.",
-        "maintain": "Select a different weather window while preserving source dates and measures, mark order, colors, and cast-free channel inference."
+        "create": "Create one chart from Seattle weather observations that uses a left temperature axis, an independent right precipitation axis for bars, and a second right wind axis for points.",
+        "maintain": "Select a different weather window while preserving source dates, units, named scale bindings, stacked right axes, mark order, colors, and cast-free channel inference."
       },
       "entries": {
         "example": "benchmarks/conformance/cases/70-composed-chart/example.tsx"

benchmarks/conformance/previews/manifest.json

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "width": 288,
   "height": 192,
-  "sourceHash": "99fa46439aa2b513dc5c09e9bc5e9f4d7dacb18ed9e5f5d289df9d16082bb7fa",
+  "sourceHash": "77c9a85664a8a74ac8d3d00ebbdc9ff1be08ecd5859b962d16077cef8d996da0",
   "assets": [
     {
       "id": "01-line-gaps",
@@ -306,8 +306,8 @@
     },
     {
       "id": "70-composed-chart",
-      "sha256": "e67a703c89949a36f5b336a2095223a53e5b5a91a8a055868cb475a1a046003d",
-      "bytes": 4707
+      "sha256": "642139631cae72ef76ff81e148e6d40e2ff83225a11b582a32878d0f166beae7",
+      "bytes": 14436
     },
     {
       "id": "71-recharts-population-pyramid",

docs/config.json

@@ -545,7 +545,7 @@
           "to": "/charts/catalog/charts/65-voronoi-nearest-tooltip/"
         },
         {
-          "label": "Layered Seattle weather chart",
+          "label": "Seattle weather with three y axes",
           "to": "/charts/catalog/charts/70-composed-chart/"
         },
         {

docs/reference/scales-guides-and-color.md

@@ -385,6 +385,8 @@ const chart = defineChart({
 })
 ```
 
+<!-- ::chart-example id=70-composed-chart height=480 -->
+
 A named scale must declare `channel: 'x'` or `channel: 'y'`. Its mark binding
 must use the same channel. The ID `color` is reserved for the shared visual
 color scale and cannot name a Cartesian position scale.

examples/sandbox/src/App.tsx

@@ -16,6 +16,7 @@ import {
 import type { PenguinsRow } from '@tanstack/charts-data/penguins'
 import {
   createAgreementChart,
+  createAaplPriceVolumeChart,
   createCarEconomyChart,
   createIndustryChart,
   createPenguinChart,
@@ -46,6 +47,13 @@ export function App() {
           svgAnimation: { duration: 800, easing: 'ease-out' },
         },
       ),
+      aaplPriceVolume: defineChart(
+        createAaplPriceVolumeChart({ rows: data.aapl }),
+        {
+          keyboard: false,
+          svgAnimation: { duration: 720, easing: 'ease-out' },
+        },
+      ),
       industries: defineChart(
         createIndustryChart({
           rows: data.industries,
@@ -469,6 +477,33 @@ export function App() {
                 ))}
               </div>
             </article>
+
+            <article className="card multi-axis-card">
+              <CardHeader
+                eyebrow="AAPL price and volume"
+                value="Independent axes"
+              >
+                <div className="legend">
+                  <span>
+                    <i style={{ background: '#ff625a' }} />
+                    Close
+                  </span>
+                  <span>
+                    <i style={{ background: '#8579ff' }} />
+                    Volume
+                  </span>
+                </div>
+              </CardHeader>
+              <div className="chart-wrap">
+                <Chart
+                  definition={definitions.aaplPriceVolume}
+                  height={280}
+                  initialWidth={1120}
+                  ariaLabel="Apple closing price and trading volume"
+                  ariaDescription="Closing price uses the left dollar axis. Trading volume uses the independent right axis."
+                />
+              </div>
+            </article>
           </section>
         </div>
       </main>