Interactive Charts in MDX

Quick Start #

To add a chart, use the corresponding chart component with your data. Each chart accepts data in a simple CSV-like format within the component tags.

Bar Charts #

Bar charts are great for comparing values across categories. They support multiple variations.

Basic Bar Chart #

The simplest bar chart with one data series showing monthly traffic:

Monthly Unique Visitors

Total unique visitors from Jan to Jun

JanuaryJune

1
<BarChart>
2
title: Monthly Unique Visitors
3
description: Total unique visitors from Jan to Jun
4
scrollable: true
5

6
month,visitors
7
January,18600
8
February,30500
9
March,23700
10
April,73000
11
May,20900
12
June,21400
13
</BarChart>

with two data series comparing platforms

Traffic by Platform

Comparison between Desktop and Mobile visitors

Data source: Google Analytics

1
<BarChart>
2
title: Traffic by Platform
3
description: Comparison between Desktop and Mobile visitors
4
footer: Data source: Google Analytics
5

6
month,desktop,mobile
7
January,186,80
8
February,305,200
9
March,237,120
10
April,73,190
11
May,209,130
12
June,214,140
13
</BarChart>

Stacked Bar Chart #

Use stacked: true to show the breakdown of acquisition channels:

Quarterly Acquisition Channels

Stacked breakdown of traffic sources

1
<BarChart>
2
title: Quarterly Acquisition Channels
3
description: Stacked breakdown of traffic sources
4
stacked: true
5

6
quarter,direct,search,social,referral
7
Q1,400,240,120,80
8
Q2,300,139,221,110
9
Q3,200,980,229,150
10
Q4,278,390,200,90
11
</BarChart>

Horizontal Bar Chart #

Use horizontal: true for horizontal bars - perfect for viewing top landing pages:

Top Landing Pages

Most visited pages by unique sessions

1
<BarChart>
2
title: Top Landing Pages
3
description: Most visited pages by unique sessions
4
horizontal: true
5
height: 250
6

7
page,sessions
8
Home,2840
9
Blog,2350
10
Pricing,1980
11
Features,1650
12
Docs,890
13
</BarChart>

Multiple Series Bar Chart #

Compare key performance indicators side by side:

Website Vital Stats

Monthly comparison of pageviews vs conversions

1
<BarChart>
2
title: Website Vital Stats
3
description: Monthly comparison of pageviews vs conversions
4
scrollable: true
5

6
month,pageViews,sessions,conversions
7
Jan,45000,12000,850
8
Feb,52000,14500,920
9
Mar,48000,13200,780
10
Apr,61000,16800,1100
11
May,55000,15200,980
12
Jun,67000,18500,1250
13
</BarChart>

Minimal Bar Chart #

Hide grid, axes, and legend for a clean look at daily active users:

Daily Active Users (DAU)

1
<BarChart>
2
title: Daily Active Users (DAU)
3
hideGrid: true
4
hideYAxis: true
5
hideLegend: true
6
height: 200
7

8
day,users
9
Mon,1200
10
Tue,1800
11
Wed,1500
12
Thu,2100
13
Fri,2800
14
Sat,3200
15
Sun,1900
16
</BarChart>

Line Charts #

Line charts are perfect for showing trends and changes over time.

Basic Line Chart #

Smooth Trend Line #

The growth trend of returning visitors over several months:

Returning Visitors Growth

Weekly growth of loyal user base

W1W8

1
<LineChart>
2
title: Returning Visitors Growth
3
description: Weekly growth of loyal user base
4
curved: true
5
showDots: true
6
scrollable: true
7

8
week,loyalUsers
9
W1,4000
10
W2,4500
11
W3,5200
12
W4,4800
13
W5,5800
14
W6,6200
15
W7,7100
16
W8,7800
17
</LineChart>

Multi-Line Comparison #

Compare multiple SEO or organic traffic sources:

Traffic Source Trends

Organic vs Paid vs Social growth

1
<LineChart>
2
title: Traffic Source Trends
3
description: Organic vs Paid vs Social growth
4
scrollable: true
5

6
month,organic,paid,social
7
Jan,4000,2400,1800
8
Feb,4500,2100,2200
9
Mar,5200,2800,1900
10
Apr,4800,3100,2500
11
May,5800,2900,3100
12
Jun,6200,3500,2800
13
</LineChart>

Linear Line Chart (No Curve)#

Use curved: false for strict metric tracking like Server Response Time (TTFB):

Server Response Time (TTFB)

Daily average latency in milliseconds

1
<LineChart>
2
title: Server Response Time (TTFB)
3
description: Daily average latency in milliseconds
4
curved: false
5
showDots: true
6

7
day,latency
8
Mon,142
9
Tue,145
10
Wed,138
11
Thu,148
12
Fri,151
13
</LineChart>

Line Chart Without Dots #

A minimal look at page load performance trends:

Average Page Load Time

End-to-end performance monitoring

1
<LineChart>
2
title: Average Page Load Time
3
description: End-to-end performance monitoring
4
curved: true
5
showDots: false
6

7
time,loadTime
8
00:00,450
9
04:00,320
10
08:00,780
11
12:00,850
12
16:00,720
13
20:00,580
14
24:00,410
15
</LineChart>

Area Charts #

Area charts emphasize the magnitude of change over time with filled regions.

Basic Area Chart with Gradient #

Visualize data usage or content delivery bandwidth:

CDN Bandwidth Usage

Daily data egress trend in Gigabytes

MonSat

1
<AreaChart>
2
title: CDN Bandwidth Usage
3
description: Daily data egress trend in Gigabytes
4
gradient: true
5

6
day,egress
7
Mon,18.6
8
Tue,30.5
9
Wed,23.7
10
Thu,27.3
11
Fri,32.9
12
Sat,41.4
13
</AreaChart>

Stacked Area Chart #

Show the cumulative breakdown of session durations:

Session Duration Breakdown

User stay time per visit category

1
<AreaChart>
2
title: Session Duration Breakdown
3
description: User stay time per visit category
4
stacked: true
5
gradient: true
6
scrollable: true
7

8
week,under_1m,one_to_five,five_plus
9
Week 1,4000,2400,800
10
Week 2,3000,1398,600
11
Week 3,2000,980,400
12
Week 4,2780,3908,1200
13
Week 5,1890,4800,1500
14
Week 6,2390,3800,1100
15
</AreaChart>

Flat Area Chart (No Gradient)#

Use gradient: false for technical monitoring like concurrent user density:

Concurrent Site Users

Real-time user density over 6 hours

1
<AreaChart>
2
title: Concurrent Site Users
3
description: Real-time user density over 6 hours
4
gradient: false
5
stacked: true
6

7
time,mobile_users,desktop_users
8
1h,240,120
9
2h,310,150
10
3h,280,180
11
4h,420,210
12
5h,350,190
13
6h,290,140
14
</AreaChart>

Pie Charts #

Pie charts show proportional data and part-to-whole relationships.

Standard Pie Chart #

Monitor the distribution of operating systems among your audience:

Operating System Share

Audience distribution by user OS

1
<PieChart>
2
title: Operating System Share
3
description: Audience distribution by user OS
4
outerRadius: 100
5

6
os,share
7
iOS,275
8
Windows,200
9
Android,187
10
macOS,173
11
Other,90
12
</PieChart>

Donut Chart #

Add innerRadius to visualize visitor loyalty levels:

Visitor Loyalty

Ratio of New vs. Returning users

1
<PieChart>
2
title: Visitor Loyalty
3
description: Ratio of New vs. Returning users
4
innerRadius: 60
5
outerRadius: 100
6

7
userType,count
8
New Users,4500
9
Returning,3200
10
Subscribers,2800
11
Loyalists,1200
12
Enterprise,800
13
</PieChart>

Pie Chart with Labels #

Visualize screen resolution categories for UI optimization:

Device Screen Categories

Popular resolutions for layout testing

1
<PieChart>
2
title: Device Screen Categories
3
description: Popular resolutions for layout testing
4
innerRadius: 50
5
outerRadius: 90
6
showLabels: true
7

8
resolution,count
9
Full HD,5840
10
Mobile High,4320
11
4K Ultra,1240
12
</PieChart>

Radar Charts #

Radar charts are useful for comparing multiple variables across categories.

SEO Health Check #

Compare holistic site health metrics:

SEO Health Audit

Performance vs Accessibility vs SEO scores

PerformancePWA

1
<RadarChart>
2
title: SEO Health Audit
3
description: Performance vs Accessibility vs SEO scores
4
height: 350
5

6
metric,this_month,last_month
7
Performance,120,110
8
Accessibility,98,130
9
SEO,86,130
10
Best Practices,99,100
11
Security,85,90
12
PWA,65,85
13
</RadarChart>

Competitor Performance Comparison #

Benchmark your site metrics against industry averages:

Site Performance Benchmark

Ratings across competing site architectures

1
<RadarChart>
2
title: Site Performance Benchmark
3
description: Ratings across competing site architectures
4
height: 400
5

6
metric,yourSite,average,topTier
7
First Contentful Paint,90,75,85
8
Speed Index,80,90,70
9
Time to Interactive,95,85,80
10
Cumulative Layout Shift,70,95,85
11
First Input Delay,85,80,90
12
Total Blocking Time,92,88,78
13
</RadarChart>

Radial Charts #

Radial bar charts display data as circular progress bars, excellent for showing progress against targets.

SEO Performance Goals #

Track progress towards multi-dimensional site optimization:

SEO Performance Scores

Current progress vs 100% target

1
<RadialChart>
2
title: SEO Performance Scores
3
description: Current progress vs 100% target
4
innerRadius: 40
5
outerRadius: 130
6
height: 300
7

8
metric,score
9
Technical SEO,50
10
Content,92
11
Keywords,58
12
Backlinks,35
13
</RadialChart>

Infrastructure Health #

Compact monitoring of global server uptime:

Global Service Uptime

1
<RadialChart>
2
title: Global Service Uptime
3
innerRadius: 30
4
outerRadius: 90
5
height: 250
6
hideLegend: true
7

8
US East,100
9
Europe,50
10
Asia Pacific,25
11
</RadialChart>

Radial Progress (Single Value)#

The ultimate clean visualization for a primary key performance indicator:

Cloud Storage Usage

Percentage of total capacity used

1
<RadialChart>
2
title: Cloud Storage Usage
3
description: Percentage of total capacity used
4
innerRadius: 70
5
outerRadius: 110
6

7
source,usage
8
Used Space,75
9
</RadialChart>

Composed Charts (Mixed Types)#

Combine different chart types in a single visualization for complex reporting.

Acquisition Efficiency #

Marketing Spend (Bars) vs New Customers (Line):

Acquisition Efficiency

Marketing Spend ($) vs. New Customer Count

JanJun

1
<ComposedChart>
2
title: Acquisition Efficiency
3
description: Marketing Spend ($) vs. New Customer Count
4
scrollable: true
5

6
month,spend(bar),customers(line),budget(line)
7
Jan,1200,850,1500
8
Feb,1800,920,1500
9
Mar,1500,780,1500
10
Apr,2100,1100,1500
11
May,2800,1400,1500
12
Jun,2400,1250,1500
13
</ComposedChart>

Engagement Depth Analysis #

Active Sessions (Area) vs returning users (Line):

Engagement Depth Analysis

Total Active Sessions (area) vs. Returning User Count (line)

1
<ComposedChart>
2
title: Engagement Depth Analysis
3
description: Total Active Sessions (area) vs. Returning User Count (line)
4
scrollable: true
5

6
week,sessions(area),returning(line)
7
W1,620,450
8
W2,750,420
9
W3,680,480
10
W4,890,520
11
W5,810,590
12
W6,940,630
13
</ComposedChart>

Triple Reporting Metrics #

Add to Cart (Area), Checkout (Bars), and Purchase (Line) Conversion Flow:

Checkout Funnel Trends

Add to Cart (area), Checkout Started (bars), and Completed Purchase (line)

1
<ComposedChart>
2
title: Checkout Funnel Trends
3
description: Add to Cart (area), Checkout Started (bars), and Completed Purchase (line)
4
scrollable: true
5

6
channel,cart(area),checkout(bar),purchase(line)
7
Direct,850,620,510
8
Search,1200,980,840
9
Social,780,540,420
10
Referral,690,480,390
11
Email,920,740,650
12
</ComposedChart>

Configuration Reference #

The declarative syntax makes it easy to create charts. Simply provide attributes at the top and CSV data below.

Syntax Rules #

Attributes: Key-value pairs (e.g., title: My Chart)
Data: CSV format with headers on the first line.
X-Axis: The first column is used for the X-axis labels.
Series: Subsequent columns are used as data series.
Types: For ComposedChart, use header(type) syntax (e.g., sales(bar)).

Property Reference #

Prop	Type	Default	Description
`title`	string	-	Chart title displayed above
`description`	string	-	Subtitle/description text
`footer`	string	-	Footer text below chart
`data`	array	required	Array of data objects
`height`	number	300	Chart height in pixels
`className`	string	-	Additional CSS classes
`scrollable`	boolean	false	Enable horizontal scrolling
`hideXAxis`	boolean	false	Hide the X axis
`hideYAxis`	boolean	false	Hide the Y axis
`hideGrid`	boolean	false	Hide background grid
`hideLegend`	boolean	false	Hide the legend
`hideTooltip`	boolean	false	Hide hover tooltips
`colors`	string[]	theme colors	Custom color palette

Series Configuration #

For BarChart, LineChart, AreaChart, RadarChart, and ComposedChart:

1
series={[
2
  {
3
    key: "fieldName",      // Required: data field key
4
    label: "Display Name", // Required: legend label
5
    color: "#ff0000",      // Optional: custom color
6
    type: "bar",           // ComposedChart only: "bar" | "line" | "area"
7
    stackId: "group1",     // Optional: for stacking
8
    radius: 4              // BarChart only: corner radius
9
  }
10
]}

Error Handling #

Charts automatically validate data and display helpful error messages. For example, an empty data array:

Chart Error

Data array is empty

Missing data keys also trigger informative errors:

Chart Error

Data array is empty

Best Practices #

Keep data simple: Charts work best with 5-10 data points. Too many points make the chart hard to read.

Responsive design: All charts automatically resize on mobile devices. Set appropriate height values for smaller screens.

Performance: Very large datasets (100+ points) may impact page performance. Consider aggregating data before visualization.

Accessibility: Charts include proper ARIA labels and keyboard navigation support for screen readers.

Color contrast: When customizing colors, ensure sufficient contrast for colorblind users. Avoid using only red/green combinations.