Mark TanStack Charts as official Alpha

package.json

@@ -75,7 +75,7 @@
     "@tanstack/ai-anthropic": "^0.18.0",
     "@tanstack/ai-client": "^0.28.0",
     "@tanstack/ai-openai": "^0.22.0",
-    "@tanstack/charts": "0.13.0",
+    "@tanstack/charts": "0.16.0",
     "@tanstack/create": "^0.69.0",
     "@tanstack/highlight": "^0.0.9",
     "@tanstack/markdown": "^0.0.11",

pnpm-workspace.yaml

@@ -2,7 +2,7 @@ packages:
   - .
 
 minimumReleaseAgeExclude:
-  - '@tanstack/charts@0.13.0'
+  - '@tanstack/charts@0.16.0'
   - '@tanstack/react-table@9.0.0'
   - '@tanstack/table-core@9.0.0'
 

scripts/charts-landing/activation-chart.ts

@@ -71,21 +71,23 @@ export const activationChart = defineChart({
       dy: -21,
     }),
   ],
-  x: {
-    scale: scaleUtc().domain([weeks[0]!.date, weeks.at(-1)!.date]),
-    axis: {
-      label: 'Week ending',
-      ticks: { format: (value) => monthDay.format(value) },
+  scales: {
+    x: {
+      scale: scaleUtc().domain([weeks[0]!.date, weeks.at(-1)!.date]),
+      axis: {
+        label: 'Week ending',
+        ticks: { format: (value) => monthDay.format(value) },
+      },
+      grid: false,
     },
-    grid: false,
-  },
-  y: {
-    scale: scaleLinear().domain([40, 82]),
-    axis: {
-      label: 'Activation rate (%)',
-      ticks: { count: 5, format: (value) => `${Math.round(value)}%` },
+    y: {
+      scale: scaleLinear().domain([40, 82]),
+      axis: {
+        label: 'Activation rate (%)',
+        ticks: { count: 5, format: (value) => `${Math.round(value)}%` },
+      },
+      grid: true,
     },
-    grid: true,
   },
   theme: activationTheme,
 })

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

@@ -35,14 +35,16 @@ export const kineticAreaChart = defineChart({
       r: 4,
     }),
   ],
-  x: {
-    scale: scaleLinear().domain([1, 8]),
-    axis: { ticks: { count: 4, format: (month) => `M${month}` } },
-  },
-  y: {
-    scale: scaleLinear().domain([30, 100]),
-    axis: { ticks: { count: 4 } },
-    grid: true,
+  scales: {
+    x: {
+      scale: scaleLinear().domain([1, 8]),
+      axis: { ticks: { count: 4, format: (month) => `M${month}` } },
+    },
+    y: {
+      scale: scaleLinear().domain([30, 100]),
+      axis: { ticks: { count: 4 } },
+      grid: true,
+    },
   },
   theme: kineticDarkTheme,
 })

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

@@ -22,13 +22,15 @@ export const kineticBarChart = defineChart({
       strokeDasharray: '5 7',
     }),
   ],
-  x: {
-    scale: scaleBand<string>().domain(productNames).padding(0.16),
-  },
-  y: {
-    scale: scaleLinear().domain([0, 100]),
-    ticks: 4,
-    grid: true,
+  scales: {
+    x: {
+      scale: scaleBand<string>().domain(productNames).padding(0.16),
+    },
+    y: {
+      scale: scaleLinear().domain([0, 100]),
+      axis: { ticks: { count: 4 } },
+      grid: true,
+    },
   },
   color: {
     domain: ['Core', 'Data', 'Runtime'],

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

@@ -15,8 +15,10 @@ export const kineticDonutChart = defineChart({
       id: 'hero-donut',
       inset: 10,
       radiusRatio: 0.78,
-      angle: { scale: scaleLinear().domain([0, 1]) },
-      radius: { scale: scaleLinear().domain([0, 1]) },
+      scales: {
+        angle: { scale: scaleLinear().domain([0, 1]) },
+        radius: { scale: scaleLinear().domain([0, 1]) },
+      },
       marks: [
         radialArc(productShareSlices, {
           id: 'hero-arcs',
@@ -44,6 +46,7 @@ export const kineticDonutChart = defineChart({
       ],
     }),
   ],
+  scales: { x: null, y: null },
   color: {
     domain: productShare.map((row) => row.segment),
     range: ['#61e8ff', '#ff806f', '#b9f227', '#a78bfa', '#77929f'],

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

@@ -34,13 +34,15 @@ export const kineticDumbbellChart = defineChart({
       r: 5,
     }),
   ],
-  x: {
-    scale: scaleLinear().domain([30, 100]),
-    axis: { ticks: { count: 4 } },
-    grid: true,
-  },
-  y: {
-    scale: scaleBand<string>().domain(productNames).padding(0.28),
+  scales: {
+    x: {
+      scale: scaleLinear().domain([30, 100]),
+      axis: { ticks: { count: 4 } },
+      grid: true,
+    },
+    y: {
+      scale: scaleBand<string>().domain(productNames).padding(0.28),
+    },
   },
   theme: kineticDarkTheme,
 })

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

@@ -22,11 +22,13 @@ export const kineticHeatmapChart = defineChart({
       strokeWidth: 2,
     }),
   ],
-  x: {
-    scale: scaleBand<string>().domain(productNames).padding(0.04),
-  },
-  y: {
-    scale: scaleBand<string>().domain(heatmapMetrics).padding(0.08),
+  scales: {
+    x: {
+      scale: scaleBand<string>().domain(productNames).padding(0.04),
+    },
+    y: {
+      scale: scaleBand<string>().domain(heatmapMetrics).padding(0.08),
+    },
   },
   color: {
     domain: ['Building', 'Strong', 'Peak'],

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

@@ -65,14 +65,16 @@ export const kineticLayeredChart = defineChart({
       dy: -22,
     }),
   ],
-  x: {
-    scale: scaleLinear().domain([1, 8]),
-    axis: { ticks: { count: 4, format: (month) => `M${month}` } },
-  },
-  y: {
-    scale: scaleLinear().domain([30, 100]),
-    axis: { ticks: { count: 4 } },
-    grid: true,
+  scales: {
+    x: {
+      scale: scaleLinear().domain([1, 8]),
+      axis: { ticks: { count: 4, format: (month) => `M${month}` } },
+    },
+    y: {
+      scale: scaleLinear().domain([30, 100]),
+      axis: { ticks: { count: 4 } },
+      grid: true,
+    },
   },
   theme: kineticDarkTheme,
 })

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

@@ -26,14 +26,16 @@ export const kineticLineChart = defineChart({
       r: 4,
     }),
   ],
-  x: {
-    scale: scaleLinear().domain([1, 8]),
-    axis: { ticks: { count: 4, format: (month) => `M${month}` } },
-  },
-  y: {
-    scale: scaleLinear().domain([30, 100]),
-    axis: { ticks: { count: 4 } },
-    grid: true,
+  scales: {
+    x: {
+      scale: scaleLinear().domain([1, 8]),
+      axis: { ticks: { count: 4, format: (month) => `M${month}` } },
+    },
+    y: {
+      scale: scaleLinear().domain([30, 100]),
+      axis: { ticks: { count: 4 } },
+      grid: true,
+    },
   },
   theme: kineticDarkTheme,
 })

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

@@ -27,13 +27,15 @@ export const kineticLollipopChart = defineChart({
       r: 6,
     }),
   ],
-  x: {
-    scale: scaleBand<string>().domain(productNames).padding(0.3),
-  },
-  y: {
-    scale: scaleLinear().domain([0, 100]),
-    axis: { ticks: { count: 4 } },
-    grid: true,
+  scales: {
+    x: {
+      scale: scaleBand<string>().domain(productNames).padding(0.3),
+    },
+    y: {
+      scale: scaleLinear().domain([0, 100]),
+      axis: { ticks: { count: 4 } },
+      grid: true,
+    },
   },
   theme: kineticDarkTheme,
 })

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

@@ -22,11 +22,13 @@ export const kineticRadarChart = defineChart({
     polar({
       id: 'hero-radar',
       radiusRatio: 0.83,
-      angle: {
-        scale: scalePoint<string>().domain(radarDimensionNames),
-        wrap: true,
+      scales: {
+        angle: {
+          scale: scalePoint<string>().domain(radarDimensionNames),
+          wrap: true,
+        },
+        radius: { scale: scaleLinear().domain([0, 100]) },
       },
-      radius: { scale: scaleLinear().domain([0, 100]) },
       guides: [
         radialGrid({
           ticks: 4,
@@ -73,5 +75,6 @@ export const kineticRadarChart = defineChart({
       ],
     }),
   ],
+  scales: { x: null, y: null },
   theme: kineticDarkTheme,
 })

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

@@ -18,14 +18,16 @@ export const kineticScatterChart = defineChart({
       r: 'size',
     }),
   ],
-  x: {
-    scale: scaleLinear().domain([8, 34]),
-    axis: { ticks: { count: 4 } },
-  },
-  y: {
-    scale: scaleLinear().domain([65, 96]),
-    axis: { ticks: { count: 4, format: (value) => `${value}%` } },
-    grid: true,
+  scales: {
+    x: {
+      scale: scaleLinear().domain([8, 34]),
+      axis: { ticks: { count: 4 } },
+    },
+    y: {
+      scale: scaleLinear().domain([65, 96]),
+      axis: { ticks: { count: 4, format: (value) => `${value}%` } },
+      grid: true,
+    },
   },
   theme: kineticDarkTheme,
 })