Data Visualization

Statistics

Here is the current browser usage for our platform:

Integrating Chart.js into Docusaurus is a smart move for making your documentation more interactive. Because Docusaurus is built on React, the most efficient way to do this is by using the react-chartjs-2 wrapper.

Here is the step-by-step guide to setting it up.

• Install Dependencies

npm install chart.js react-chartjs-2

• Create a Reusable Chart Component

import React from "react";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";

// Register the components you need
ChartJS.register(ArcElement, Tooltip, Legend);

export const data = {
  labels: ["Chrome", "Firefox", "Safari", "Edge"],
  datasets: [
    {
      label: "# of Users",
      data: [60, 15, 15, 10],
      backgroundColor: ["#36A2EB", "#FF6384", "#FFCE56", "#4BC0C0"],
    },
  ],
};

export default function BrowserUsageChart() {
  return (
    <div style={{ maxWidth: "400px", margin: "0 auto" }}>
      <Doughnut data={data} />
    </div>
  );
}

• Use the Chart in Markdown (MDX)

---
title: My Project Stats
---

import BrowserUsageChart from '@site/src/components/BrowserUsageChart';

## Statistics

Here is the current browser usage for our platform:

<BrowserUsageChart />

Sales Data 📊

Here is an example of a bar chart generated using Chart.js, embedded directly into this document using a React component.

This interactive chart helps visualize the monthly data.