Run Charts documentation examples (#1132)

* Run Charts documentation examples

* Address docs runtime review feedback

* Pin runnable docs imports

* Pin Charts 0.10.0

* Make example mount targets resilient

Author: tannerlinsley

package.json

@@ -70,13 +70,11 @@
     "@tanstack/ai-anthropic": "^0.10.1",
     "@tanstack/ai-client": "^0.11.3",
     "@tanstack/ai-openai": "^0.9.5",
-    "@tanstack/charts": "0.7.2",
-    "@tanstack/charts-scales": "0.7.2",
+    "@tanstack/charts": "0.10.0",
     "@tanstack/create": "^0.69.0",
     "@tanstack/highlight": "^0.0.9",
     "@tanstack/markdown": "^0.0.11",
     "@tanstack/pacer": "^0.21.1",
-    "@tanstack/react-charts": "0.7.2",
     "@tanstack/react-hotkeys": "^0.10.0",
     "@tanstack/react-pacer": "^0.22.1",
     "@tanstack/react-query": "^5.100.11",
@@ -115,6 +113,7 @@
     "maath": "^0.10.8",
     "match-sorter": "^8.2.0",
     "mermaid": "^11.14.0",
+    "octane": "0.1.13",
     "parse5": "^7.3.0",
     "parse5-parser-stream": "^7.1.2",
     "postgres": "^3.4.8",
@@ -172,7 +171,7 @@
     "tailwindcss": "^4.2.2",
     "tsx": "^4.21.0",
     "typescript": "^6.0.2",
-    "vite": "^8.0.13",
+    "vite": "^8.0.16",
     "wrangler": "^4.102.0"
   },
   "engines": {

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { scaleUtc } from 'd3-scale'
 import { curveMonotoneX } from 'd3-shape'
 import {

scripts/charts-landing/activation-chart.ts

@@ -1,4 +1,4 @@
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { curveMonotoneX } from 'd3-shape'
 import { areaY, d3Curve, defineChart, dot, lineY } from '@tanstack/charts'
 

scripts/charts-landing/kinetic-area-chart.ts

@@ -1,5 +1,5 @@
-import { scaleBand } from '@tanstack/charts-scales/band'
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleBand } from '@tanstack/charts/scales/band'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { barY, defineChart, ruleY } from '@tanstack/charts'
 
 import { kineticDarkTheme, productNames, productSignals } from './kinetic-data'

scripts/charts-landing/kinetic-bar-chart.ts

@@ -1,4 +1,4 @@
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { defineChart } from '@tanstack/charts'
 import { polar, radialArc, radialText } from '@tanstack/charts/polar'
 

scripts/charts-landing/kinetic-donut-chart.ts

@@ -1,5 +1,5 @@
-import { scaleBand } from '@tanstack/charts-scales/band'
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleBand } from '@tanstack/charts/scales/band'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { defineChart, dot, link } from '@tanstack/charts'
 
 import { kineticDarkTheme, productNames, productSignals } from './kinetic-data'

scripts/charts-landing/kinetic-dumbbell-chart.ts

@@ -1,4 +1,4 @@
-import { scaleBand } from '@tanstack/charts-scales/band'
+import { scaleBand } from '@tanstack/charts/scales/band'
 import { cell, defineChart } from '@tanstack/charts'
 
 import {

scripts/charts-landing/kinetic-heatmap-chart.ts

@@ -1,4 +1,4 @@
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { curveMonotoneX } from 'd3-shape'
 import {
   areaY,

scripts/charts-landing/kinetic-layered-chart.ts

@@ -1,4 +1,4 @@
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { curveMonotoneX } from 'd3-shape'
 import { d3Curve, defineChart, dot, lineY } from '@tanstack/charts'