Visualizing Data with Embedded Charts

Data visualization is a powerful tool for storytelling. Instead of static images, why not embed interactive charts directly into your blog posts?

With Astro and MDX, we can easily integrate Chart.js to render beautiful, responsive charts.

1. Bar Chart

Bar charts are great for comparing categorical data. Here’s an example showing the popularity of different programming languages.

<Chart 
  type="bar"
  data={{
    labels: ['JavaScript', 'Python', ...],
    datasets: [{
      label: 'Popularity Index',
      data: [85, 90, ...],
      backgroundColor: [...]
    }]
  }}
/>

2. Line Chart

Line charts are perfect for showing trends over time.

3. Doughnut Chart

Doughnut charts are useful for showing proportional data.

How It Works

We use a custom <Chart /> component that wraps Chart.js. This component handles the initialization and canvas rendering, allowing you to pass chart configuration directly as props.

This approach keeps your content interactive and your codebase clean!