If there's one thing I consistently do, it's start writing a blog post, want a new feature for it and then spend the rest of the time adding that feature and then writing a blog post about it. This one is about adding data graph visualizations to Astro using apex charts but the same basic principals likely would apply to other graphing tools.
Since I still haven't used mermaid diagrams from my last post I feel compelled to do that.
Goals
This is what I wanted and why I chose apex charts
1. Interactive charts
2. Define the chart in markdown
3. Support darkmode
Example Chart (from example)
Example Chart
Rendered Out With
chart
{
"chart": {
"type": "line"
},
"series": [{
"name": "sales",
"data": [30,40,35,50,49,60,70,91,125]
}],
"xaxis": {
"categories": [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}
Initial Setup
Integration With Rehype
Our first step is to tell our markdown, rehype in this case to support these kinds of codeblocks.
chart
{
...
