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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
Props
The chart type. Options: line, bar, area, pie, donut.
The chart title displayed above the visualization.
The data key to use for the x-axis (for line, bar, and area charts).
The data key to use for the y-axis (for single series charts).
The chart height in pixels.
The primary color for single series charts. Accepts hex, RGB, or CSS color names.
Stack multiple series on top of each other (for bar and area charts).
Show or hide the chart legend.
The chart data. Pass an array for single series or an object with data and series for multiple series.
