Add Pro chart docs previews

Author: iexitdev

.github/workflows/site.yml

@@ -0,0 +1,47 @@
+name: Site
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - master
+      - next
+    paths:
+      - ".github/workflows/site.yml"
+      - "apps/site/**"
+      - "docs/**"
+      - "packages/**"
+      - "package-lock.json"
+      - "package.json"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    env:
+      CHART_KIT_PRO_NPM_TOKEN: ${{ secrets.CHART_KIT_PRO_NPM_TOKEN }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Setup Node
+        uses: actions/setup-node@v5
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci --ignore-scripts
+
+      - name: Install Pro docs package
+        run: |
+          if [ -n "$CHART_KIT_PRO_NPM_TOKEN" ]; then
+            npm config set //registry.npmjs.org/:_authToken "$CHART_KIT_PRO_NPM_TOKEN"
+            npm install --no-save --package-lock=false --ignore-scripts @chart-kit/pro
+            echo "CHART_KIT_PRO_DOCS=true" >> "$GITHUB_ENV"
+          else
+            echo "CHART_KIT_PRO_NPM_TOKEN is not set; building with local Pro docs stubs."
+          fi
+
+      - name: Build site
+        run: npm run site:build

apps/site/astro.config.mjs

@@ -25,6 +25,15 @@ const expoVectorIconsStub = localSource(
 const svgTransformParserStub = localSource(
   "./src/previews/svgTransformParserStub.ts"
 );
+const useRealProCharts = process.env.CHART_KIT_PRO_DOCS === "true";
+const chartKitProAliases = useRealProCharts
+  ? []
+  : [
+      {
+        find: /^@chart-kit\/pro$/,
+        replacement: localSource("./src/previews/proStub.tsx")
+      }
+    ];
 
 const chartKitPreviewWebAliases = () => ({
   name: "chart-kit-preview-web-aliases",
@@ -95,6 +104,14 @@ export default defineConfig({
             { slug: docsSlug("charts/contribution-heatmap") }
           ]
         },
+        {
+          label: "Pro Charts",
+          items: [
+            { slug: docsSlug("charts/candlebar") },
+            { slug: docsSlug("charts/radar") },
+            { slug: docsSlug("charts/combo") }
+          ]
+        },
         {
           label: "Guides",
           items: [
@@ -125,6 +142,7 @@ export default defineConfig({
         "react-native",
         "react-native-chart-kit",
         "react-native-chart-kit/v2",
+        "@chart-kit/pro",
         "react-native-gesture-handler",
         "react-native-svg"
       ]
@@ -147,6 +165,7 @@ export default defineConfig({
           find: /^@chart-kit\/svg-renderer$/,
           replacement: packageSource("svg-renderer/src/index.ts")
         },
+        ...chartKitProAliases,
         {
           find: /^react-native$/,
           replacement: reactNativeWebStub

apps/site/src/components/ChartsSupported.tsx

@@ -60,9 +60,24 @@ const chartTypes: ChartType[] = [
     kind: "heatmap",
     title: "Contribution Heatmap"
   },
-  { kind: "radar", pro: true, subtitle: "planned", title: "Radar Chart" },
-  { kind: "combined", pro: true, title: "Combined Chart" },
-  { kind: "candlestick", pro: true, title: "Candlestick Chart" },
+  {
+    docsHref: `${docsBaseHref}/charts/radar/`,
+    kind: "radar",
+    pro: true,
+    title: "Radar Chart"
+  },
+  {
+    docsHref: `${docsBaseHref}/charts/combo/`,
+    kind: "combined",
+    pro: true,
+    title: "Combo Chart"
+  },
+  {
+    docsHref: `${docsBaseHref}/charts/candlebar/`,
+    kind: "candlestick",
+    pro: true,
+    title: "Candlebar Chart"
+  },
   { kind: "more", title: "More charts", subtitle: "coming soon" }
 ];
 

apps/site/src/lib/remark-strip-duplicate-title.mjs

@@ -114,14 +114,17 @@ const playgroundDocs = new Set([
   "charts/area.md",
   "charts/bar.md",
   "charts/contribution-heatmap.md",
+  "charts/candlebar.md",
+  "charts/combo.md",
   "charts/donut.md",
   "charts/line.md",
   "charts/pie.md",
-  "charts/progress.md"
+  "charts/progress.md",
+  "charts/radar.md"
 ]);
 
 const chartComponentPattern =
-  /<\s*(AreaChart|BarChart|ContributionGraph|DonutChart|LineChart|PieChart|ProgressChart|ProgressRing|StackedBarChart)\b/;
+  /<\s*(AreaChart|BarChart|CandlebarChart|CandlestickChart|ComboChart|ContributionGraph|DonutChart|LineChart|PieChart|ProgressChart|ProgressRing|RadarChart|StackedBarChart)\b/;
 
 const slugify = (value) =>
   String(value)

apps/site/src/previews/ChartPlayground.tsx

@@ -29,6 +29,7 @@ import {
   StackedBarChart,
   type ChartKitThemeMode
 } from "react-native-chart-kit/v2";
+import { CandlebarChart, ComboChart, RadarChart } from "@chart-kit/pro";
 import { G, Line as SvgLine, Rect, Text as SvgText } from "react-native-svg";
 
 import {
@@ -38,7 +39,9 @@ import {
 } from "./chartTheme";
 import {
   acquisitionShare,
+  candlebarPrices,
   clampChartWidth,
+  comboRevenue,
   contributionEndDate,
   contributionNumDays,
   contributionValues,
@@ -48,6 +51,7 @@ import {
   platformShare,
   profit,
   progressRings,
+  radarBenchmarks,
   revenueMix,
   signedMoney,
   signups,
@@ -279,7 +283,10 @@ const retentionSegments = [
 const previewDataById: Record<string, unknown[]> = {
   "bar-grouped": barPlaygroundData,
   "line-multi-series": linePlaygroundData,
-  "line-selection": linePlaygroundData
+  "line-selection": linePlaygroundData,
+  "pro-candlebar": candlebarPrices,
+  "pro-combo": comboRevenue,
+  "pro-radar": radarBenchmarks
 };
 
 const getPreviewData = (id: string) =>
@@ -485,22 +492,27 @@ export const ChartPlayground = ({ code, id }: { code: string; id: string }) => {
     () => ({
       AreaChart,
       BarChart,
+      CandlebarChart,
       ContributionGraph,
       ChartKitProvider,
+      ComboChart,
       DonutChart,
       G,
       LineChart,
       PieChart,
       ProgressChart,
       ProgressRing,
+      RadarChart,
       React,
       Rect,
       StackedBarChart,
       SvgText,
       Text,
       View,
       acquisitionShare: acquisitionSharePlaygroundData,
+      candlebarPrices,
       clampChartWidth,
+      comboRevenue,
       contributionValues,
       contributionEndDate,
       contributionNumDays,
@@ -517,6 +529,7 @@ export const ChartPlayground = ({ code, id }: { code: string; id: string }) => {
       previewWidth: clampChartWidth(width),
       profit,
       progressRings,
+      radarBenchmarks,
       revenueMix: revenueMixPlaygroundData,
       retentionSegments,
       signedMoney,

apps/site/src/previews/data.ts

@@ -99,3 +99,38 @@ export const contributionValues = Array.from(
     };
   }
 );
+
+export const candlebarPrices = [
+  { date: "09:30", open: 184, high: 196, low: 179, close: 191, volume: 42 },
+  { date: "10:00", open: 191, high: 208, low: 188, close: 202, volume: 68 },
+  { date: "10:30", open: 202, high: 206, low: 185, close: 189, volume: 74 },
+  { date: "11:00", open: 189, high: 215, low: 186, close: 211, volume: 95 },
+  { date: "11:30", open: 211, high: 226, low: 204, close: 219, volume: 88 },
+  { date: "12:00", open: 219, high: 221, low: 198, close: 204, volume: 81 },
+  { date: "12:30", open: 204, high: 232, low: 201, close: 228, volume: 118 },
+  { date: "13:00", open: 228, high: 236, low: 214, close: 217, volume: 101 },
+  { date: "13:30", open: 217, high: 244, low: 216, close: 239, volume: 132 },
+  { date: "14:00", open: 239, high: 248, low: 226, close: 231, volume: 109 },
+  { date: "14:30", open: 231, high: 252, low: 229, close: 247, volume: 124 },
+  { date: "15:00", open: 247, high: 258, low: 236, close: 241, volume: 116 }
+];
+
+export const radarBenchmarks = [
+  { metric: "Speed", current: 82, target: 92, industry: 68 },
+  { metric: "Polish", current: 76, target: 88, industry: 61 },
+  { metric: "A11y", current: 90, target: 94, industry: 72 },
+  { metric: "Depth", current: 68, target: 84, industry: 55 },
+  { metric: "Control", current: 86, target: 91, industry: 65 },
+  { metric: "Export", current: 72, target: 86, industry: 58 }
+];
+
+export const comboRevenue = [
+  { month: "Jan", revenue: 420, forecast: 480, margin: 128 },
+  { month: "Feb", revenue: 560, forecast: 530, margin: 168 },
+  { month: "Mar", revenue: 490, forecast: 610, margin: 151 },
+  { month: "Apr", revenue: 720, forecast: 690, margin: 214 },
+  { month: "May", revenue: 640, forecast: 760, margin: 193 },
+  { month: "Jun", revenue: 880, forecast: 840, margin: 276 },
+  { month: "Jul", revenue: 790, forecast: 920, margin: 244 },
+  { month: "Aug", revenue: 1040, forecast: 980, margin: 331 }
+];

apps/site/src/previews/examples.tsx

@@ -17,10 +17,14 @@ type PreviewRenderContext = {
 };
 
 export type ChartPreviewExample = {
+  ctaHref?: string;
+  ctaLabel?: string;
+  description?: string;
   eyebrow: string;
   id: string;
   render: (context: PreviewRenderContext) => ReactNode;
   supportsChartTheme?: boolean;
+  tier?: "free" | "pro";
   title: string;
 };
 
@@ -51,7 +55,20 @@ export const renderChartPreview = ({
     >
       <View style={previewStyles.shell}>
         <View style={previewStyles.header}>
-          <Text style={previewStyles.eyebrow}>{example.eyebrow}</Text>
+          <View style={previewStyles.metaRow}>
+            <Text style={previewStyles.eyebrow}>{example.eyebrow}</Text>
+            {example.tier === "pro" ? (
+              <Text
+                accessibilityLabel="Available in Chart Kit Pro"
+                style={[
+                  previewStyles.proBadge,
+                  mode === "dark" && previewStyles.proBadgeDark
+                ]}
+              >
+                Pro
+              </Text>
+            ) : null}
+          </View>
           <Text
             style={[
               previewStyles.title,
@@ -60,10 +77,28 @@ export const renderChartPreview = ({
           >
             {example.title}
           </Text>
+          {example.description ? (
+            <Text
+              style={[
+                previewStyles.description,
+                mode === "dark" && previewStyles.descriptionDark
+              ]}
+            >
+              {example.description}
+            </Text>
+          ) : null}
         </View>
         <View style={previewStyles.chart}>
           {example.render({ chartThemePreset, mode, width: width - 2 })}
         </View>
+        {example.tier === "pro" ? (
+          <a
+            className="chart-kit-live-preview__pro-link"
+            href={example.ctaHref ?? "/#pricing"}
+          >
+            {example.ctaLabel ?? "View Pro plans"}
+          </a>
+        ) : null}
       </View>
     </ChartKitProvider>
   );
@@ -84,6 +119,24 @@ const previewStyles = {
   header: {
     marginBottom: 16
   },
+  description: {
+    color: "rgba(7, 23, 51, 0.62)",
+    fontSize: 14,
+    fontWeight: "400" as const,
+    letterSpacing: 0,
+    lineHeight: 21,
+    marginTop: 8,
+    maxWidth: 540
+  },
+  descriptionDark: {
+    color: "rgba(255, 255, 255, 0.62)"
+  },
+  metaRow: {
+    alignItems: "center" as const,
+    flexDirection: "row" as const,
+    gap: 8,
+    marginBottom: 8
+  },
   missing: {
     backgroundColor: "#ffffff",
     borderColor: "rgba(16, 18, 23, 0.14)",
@@ -99,6 +152,25 @@ const previewStyles = {
   shell: {
     width: "100%" as const
   },
+  proBadge: {
+    backgroundColor: "rgba(15, 58, 120, 0.1)",
+    borderColor: "rgba(15, 58, 120, 0.18)",
+    borderRadius: 999,
+    borderWidth: 1,
+    color: "#0f3a78",
+    fontSize: 11,
+    fontWeight: "800" as const,
+    letterSpacing: 0,
+    lineHeight: 18,
+    overflow: "hidden" as const,
+    paddingHorizontal: 8,
+    textTransform: "uppercase" as const
+  },
+  proBadgeDark: {
+    backgroundColor: "rgba(216, 230, 255, 0.1)",
+    borderColor: "rgba(216, 230, 255, 0.18)",
+    color: "#d8e6ff"
+  },
   title: {
     color: "#101217",
     fontSize: 28,