Interactive Charts in MDX 📊

This post demonstrates live, interactive charts using Recharts directly in MDX!

Monthly Revenue Growth

User Activity by Day

Traffic Sources

Growth Trend Area Chart

Why Recharts?

• React Native: Built specifically for React, not a wrapper
• Declarative: Components compose naturally
• Responsive: Charts resize automatically
• Interactive: Hover tooltips, animations built-in
• Customizable: Every element can be styled

The Code

Here's how simple it is to create a chart in MDX:

import { LineChart, Line, XAxis, YAxis } from 'recharts'
 
<LineChart width={400} height={300} data={[
  { name: 'A', value: 30 },
  { name: 'B', value: 70 },
  { name: 'C', value: 50 }
]}>
  <XAxis dataKey="name" />
  <YAxis />
  <Line dataKey="value" stroke="#3b82f6" />
</LineChart>

All these charts are interactive - try hovering over them to see the tooltips!