Building Interactive Data Visualizations with MDX and Chart.js in Astro

Data visualization is a powerful way to communicate information effectively. With MDX and Chart.js, you can seamlessly integrate interactive charts and graphs into your Astro projects. Let’s explore how to do it.

Setting Up Chart.js

First, install Chart.js:

npm install chart.js

Creating a Chart Component

Create an Astro component (e.g., ChartComponent.astro) to render the chart:

---
// ChartComponent.astro
import { Chart, registerables } from 'chart.js';
import { onMount } from 'astro';

Chart.register(...registerables);

interface Props {
  type: 'bar' | 'line' | 'pie';
  data: {
    labels: string[];
    datasets: {
      label: string;
      data: number[];
      backgroundColor: string[];
      borderColor: string[];
      borderWidth: number;
    }[];
  };
  options?: any;
}

const { type, data, options } = Astro.props as Props;
---

<canvas id="myChart" width="400" height="200"></canvas>

<script define:vars={{ type, data, options }}>
  onMount(() => {
    const ctx = document.getElementById('myChart');
    new Chart(ctx, {
      type: type,
      data: data,
      options: options,
    });
  });
</script>

Using the Chart Component in MDX

Now, you can use the ChartComponent in your MDX files:

import ChartComponent from '../components/ChartComponent.astro';

# Interactive Bar Chart

Here's an interactive bar chart:

<ChartComponent
  type="bar"
  data={{
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [
      {
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
        ],
        borderWidth: 1,
      },
    ],
  }}
  options={{
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  }}
/>

Lorem Ipsum Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Conclusion

By combining MDX and Chart.js, you can create compelling data visualizations directly within your Astro content. This allows you to present data in an interactive and engaging way, enhancing the user experience of your website.