Visualizing Growth with a Custom MDX Component
dataviz · react · mdx
One of the nicest things about writing in MDX is that a post isn't limited to
text and images. Anything you can build in React, you can render inline —
interactive and live. Below is a <Graph /> component embedded directly in the
markdown.
A line of monthly signups
The chart above is the exact same component the rest of the site uses — hover a point and the tooltip is real. Because the data lives in the post, updating the story is just editing a literal array.
The component is powered by Recharts, wrapped in a small client component and registered globally so any post can use it.
The same data as bars
Switching the visualization is a one-word change to the type prop:
That's the whole pitch for MDX: prose when you want prose, components when a picture (or a live chart) says it better.