mintlify · mintlify · Nov 30, 2025 · Nov 30, 2025 · Nov 30, 2025 · Nov 30, 2025
diff --git a/components/graphs.mdx b/components/graphs.mdx
@@ -0,0 +1,385 @@
+---
+title: "Graphs"
+description: "Display interactive charts and data visualizations with the Graph component."
+keywords: ["graphs", "charts", "data visualization", "line chart", "bar chart", "pie chart"]
+---
+
+Use the `<Graph>` component to create interactive charts and data visualizations in your documentation. Graphs help users understand data trends, comparisons, and distributions at a glance.
+
+## Basic usage
+
+Wrap your data configuration in a `<Graph>` component and specify the chart type.
+
+<Graph type="line" title="Monthly revenue">
+  {[
+    { month: "Jan", revenue: 4000 },
+    { month: "Feb", revenue: 3000 },
+    { month: "Mar", revenue: 5000 },
+    { month: "Apr", revenue: 4500 },
+    { month: "May", revenue: 6000 },
+    { month: "Jun", revenue: 5500 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="line" title="Monthly revenue">
+  {[
+    { month: "Jan", revenue: 4000 },
+    { month: "Feb", revenue: 3000 },
+    { month: "Mar", revenue: 5000 },
+    { month: "Apr", revenue: 4500 },
+    { month: "May", revenue: 6000 },
+    { month: "Jun", revenue: 5500 }
+  ]}
+</Graph>
+```
+
+## Chart types
+
+### Line chart
+
+Display trends over time or continuous data.
+
+<Graph type="line" title="User growth" xKey="month" yKey="users">
+  {[
+    { month: "Jan", users: 1200 },
+    { month: "Feb", users: 1900 },
+    { month: "Mar", users: 2400 },
+    { month: "Apr", users: 3100 },
+    { month: "May", users: 4200 },
+    { month: "Jun", users: 5100 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="line" title="User growth" xKey="month" yKey="users">
+  {[
+    { month: "Jan", users: 1200 },
+    { month: "Feb", users: 1900 },
+    { month: "Mar", users: 2400 },
+    { month: "Apr", users: 3100 },
+    { month: "May", users: 4200 },
+    { month: "Jun", users: 5100 }
+  ]}
+</Graph>
+```
+
+### Bar chart
+
+Compare values across categories.
+
+<Graph type="bar" title="Sales by region" xKey="region" yKey="sales">
+  {[
+    { region: "North", sales: 4200 },
+    { region: "South", sales: 3800 },
+    { region: "East", sales: 5100 },
+    { region: "West", sales: 4700 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="bar" title="Sales by region" xKey="region" yKey="sales">
+  {[
+    { region: "North", sales: 4200 },
+    { region: "South", sales: 3800 },
+    { region: "East", sales: 5100 },
+    { region: "West", sales: 4700 }
+  ]}
+</Graph>
+```
+
+### Area chart
+
+Show cumulative totals or volume over time.
+
+<Graph type="area" title="API requests" xKey="hour" yKey="requests">
+  {[
+    { hour: "00:00", requests: 120 },
+    { hour: "04:00", requests: 80 },
+    { hour: "08:00", requests: 450 },
+    { hour: "12:00", requests: 680 },
+    { hour: "16:00", requests: 590 },
+    { hour: "20:00", requests: 320 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="area" title="API requests" xKey="hour" yKey="requests">
+  {[
+    { hour: "00:00", requests: 120 },
+    { hour: "04:00", requests: 80 },
+    { hour: "08:00", requests: 450 },
+    { hour: "12:00", requests: 680 },
+    { hour: "16:00", requests: 590 },
+    { hour: "20:00", requests: 320 }
+  ]}
+</Graph>
+```
+
+### Pie chart
+
+Show proportions of a whole.
+
+<Graph type="pie" title="Traffic sources">
+  {[
+    { source: "Organic", value: 45 },
+    { source: "Direct", value: 25 },
+    { source: "Referral", value: 20 },
+    { source: "Social", value: 10 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="pie" title="Traffic sources">
+  {[
+    { source: "Organic", value: 45 },
+    { source: "Direct", value: 25 },
+    { source: "Referral", value: 20 },
+    { source: "Social", value: 10 }
+  ]}
+</Graph>
+```
+
+### Donut chart
+
+A pie chart with a center cutout.
+
+<Graph type="donut" title="Browser usage">
+  {[
+    { browser: "Chrome", value: 65 },
+    { browser: "Safari", value: 19 },
+    { browser: "Firefox", value: 10 },
+    { browser: "Other", value: 6 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="donut" title="Browser usage">
+  {[
+    { browser: "Chrome", value: 65 },
+    { browser: "Safari", value: 19 },
+    { browser: "Firefox", value: 10 },
+    { browser: "Other", value: 6 }
+  ]}
+</Graph>
+```
+
+## Multiple series
+
+Display multiple data series on the same chart for comparison.
+
+<Graph type="line" title="Revenue vs Expenses" xKey="month">
+  {{
+    data: [
+      { month: "Jan", revenue: 4000, expenses: 2400 },
+      { month: "Feb", revenue: 3000, expenses: 1398 },
+      { month: "Mar", revenue: 5000, expenses: 3800 },
+      { month: "Apr", revenue: 4500, expenses: 3908 },
+      { month: "May", revenue: 6000, expenses: 4800 },
+      { month: "Jun", revenue: 5500, expenses: 3800 }
+    ],
+    series: [
+      { key: "revenue", label: "Revenue", color: "#22c55e" },
+      { key: "expenses", label: "Expenses", color: "#ef4444" }
+    ]
+  }}
+</Graph>
+
+```jsx
+<Graph type="line" title="Revenue vs Expenses" xKey="month">
+  {{
+    data: [
+      { month: "Jan", revenue: 4000, expenses: 2400 },
+      { month: "Feb", revenue: 3000, expenses: 1398 },
+      { month: "Mar", revenue: 5000, expenses: 3800 },
+      { month: "Apr", revenue: 4500, expenses: 3908 },
+      { month: "May", revenue: 6000, expenses: 4800 },
+      { month: "Jun", revenue: 5500, expenses: 3800 }
+    ],
+    series: [
+      { key: "revenue", label: "Revenue", color: "#22c55e" },
+      { key: "expenses", label: "Expenses", color: "#ef4444" }
+    ]
+  }}
+</Graph>
+```
+
+## Stacked bar chart
+
+Show composition within categories.
+
+<Graph type="bar" title="Quarterly sales by product" xKey="quarter" stacked>
+  {{
+    data: [
+      { quarter: "Q1", productA: 4000, productB: 2400, productC: 1800 },
+      { quarter: "Q2", productA: 3000, productB: 1398, productC: 2200 },
+      { quarter: "Q3", productA: 5000, productB: 3800, productC: 2800 },
+      { quarter: "Q4", productA: 4500, productB: 3908, productC: 3200 }
+    ],
+    series: [
+      { key: "productA", label: "Product A" },
+      { key: "productB", label: "Product B" },
+      { key: "productC", label: "Product C" }
+    ]
+  }}
+</Graph>
+
+```jsx
+<Graph type="bar" title="Quarterly sales by product" xKey="quarter" stacked>
+  {{
+    data: [
+      { quarter: "Q1", productA: 4000, productB: 2400, productC: 1800 },
+      { quarter: "Q2", productA: 3000, productB: 1398, productC: 2200 },
+      { quarter: "Q3", productA: 5000, productB: 3800, productC: 2800 },
+      { quarter: "Q4", productA: 4500, productB: 3908, productC: 3200 }
+    ],
+    series: [
+      { key: "productA", label: "Product A" },
+      { key: "productB", label: "Product B" },
+      { key: "productC", label: "Product C" }
+    ]
+  }}
+</Graph>
+```
+
+## Customization
+
+### Height
+
+Control the chart height with the `height` prop.
+
+<Graph type="bar" title="Compact chart" height={200} xKey="day" yKey="value">
+  {[
+    { day: "Mon", value: 12 },
+    { day: "Tue", value: 19 },
+    { day: "Wed", value: 15 },
+    { day: "Thu", value: 22 },
+    { day: "Fri", value: 18 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="bar" title="Compact chart" height={200} xKey="day" yKey="value">
+  {[
+    { day: "Mon", value: 12 },
+    { day: "Tue", value: 19 },
+    { day: "Wed", value: 15 },
+    { day: "Thu", value: 22 },
+    { day: "Fri", value: 18 }
+  ]}
+</Graph>
+```
+
+### Colors
+
+Customize chart colors with the `color` prop for single series or define colors in the series configuration.
+
+<Graph type="bar" title="Custom color" color="#8b5cf6" xKey="category" yKey="value">
+  {[
+    { category: "A", value: 400 },
+    { category: "B", value: 300 },
+    { category: "C", value: 500 },
+    { category: "D", value: 280 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="bar" title="Custom color" color="#8b5cf6" xKey="category" yKey="value">
+  {[
+    { category: "A", value: 400 },
+    { category: "B", value: 300 },
+    { category: "C", value: 500 },
+    { category: "D", value: 280 }
+  ]}
+</Graph>
+```
+
+### Hide legend
+
+Hide the legend with `showLegend={false}`.
+
+<Graph type="pie" title="Distribution" showLegend={false}>
+  {[
+    { label: "Category A", value: 40 },
+    { label: "Category B", value: 35 },
+    { label: "Category C", value: 25 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="pie" title="Distribution" showLegend={false}>
+  {[
+    { label: "Category A", value: 40 },
+    { label: "Category B", value: 35 },
+    { label: "Category C", value: 25 }
+  ]}
+</Graph>
+```
+
+### Grid lines
+
+Toggle grid lines with `showGrid`.
+
+<Graph type="line" title="Without grid" showGrid={false} xKey="x" yKey="y">
+  {[
+    { x: 1, y: 10 },
+    { x: 2, y: 25 },
+    { x: 3, y: 18 },
+    { x: 4, y: 32 },
+    { x: 5, y: 28 }
+  ]}
+</Graph>
+
+```jsx
+<Graph type="line" title="Without grid" showGrid={false} xKey="x" yKey="y">
+  {[
+    { x: 1, y: 10 },
+    { x: 2, y: 25 },
+    { x: 3, y: 18 },
+    { x: 4, y: 32 },
+    { x: 5, y: 28 }
+  ]}
+</Graph>
+```
+
+## Props
+
+<ResponseField name="type" type="string" required>
+  The chart type. Options: `line`, `bar`, `area`, `pie`, `donut`.
+</ResponseField>
+
+<ResponseField name="title" type="string">
+  The chart title displayed above the visualization.
+</ResponseField>
+
+<ResponseField name="xKey" type="string">
+  The data key to use for the x-axis (for line, bar, and area charts).
+</ResponseField>
+
+<ResponseField name="yKey" type="string">
+  The data key to use for the y-axis (for single series charts).
+</ResponseField>
+
+<ResponseField name="height" type="number" default="300">
+  The chart height in pixels.
+</ResponseField>
+
+<ResponseField name="color" type="string">
+  The primary color for single series charts. Accepts hex, RGB, or CSS color names.
+</ResponseField>
+
+<ResponseField name="stacked" type="boolean" default="false">
+  Stack multiple series on top of each other (for bar and area charts).
+</ResponseField>
+
+<ResponseField name="showLegend" type="boolean" default="true">
+  Show or hide the chart legend.
+</ResponseField>
+
+<ResponseField name="showGrid" type="boolean" default="true">
+  Show or hide grid lines.
+</ResponseField>
+
+<ResponseField name="children" type="array | object" required>
+  The chart data. Pass an array for single series or an object with `data` and `series` for multiple series.
+</ResponseField>
diff --git a/components/mermaid-diagrams.mdx b/components/mermaid-diagrams.mdx
@@ -57,3 +57,9 @@ To create a Mermaid diagram, write your diagram definition inside a Mermaid code
 // Your mermaid diagram code here
 ```
 ````
+
+## Related resources
+
+<Card title="Graphs" icon="chart-line" horizontal href="/components/graphs">
+  Create interactive charts and data visualizations with the Graph component.
+</Card>