Docusaurus

Setup Plugin

danger

For Docusaurus use versions ^1.x or latest-docusaurus

NPM

npm i remark-mdx-chartjs@latest-docusaurus chart.js

Yarn

yarn add remark-mdx-chartjs@latest-docusaurus chart.js

PNPM

pnpm add remark-mdx-chartjs@latest-docusaurus chart.js

Default Setup

docusaurus.config.js

const remarkMdxChartJS = require('remark-mdx-chartjs');

/** @type {import('@docusaurus/types').Config} */
const config = {
  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          remarkPlugins: [
            [
              remarkMdxChartJS,
              {
                chartJs: {
                  options: {
                    plugins: { legend: { position: 'top' } },
                    maintainAspectRatio: true,
                  },
                },
              },
            ],
          ],
        },
      }),
    ],
  ],
};

module.exports = config;

Async setup

Async

async function createConfig() {
  const remarkMdxChartJS = await import('remark-mdx-chartjs');

  return {
    presets: [
      [
        'classic',
        {
          docs: {
            remarkPlugins: [
              [
                remarkMdxChartJS.default,
                {
                  chartJs: {
                    options: {
                      plugins: { legend: { position: 'right' } },
                    },
                  },
                },
              ],
            ],
          },
        },
      ],
    ],
  };
}

module.exports = createConfig;

Add a Diagram

Add a ChartJS diagram to a .md or .mdx file.

```chartjs width=400px center title=RGB Pie Chart
type: pie
data:
  labels: ["Red", "Green", "Blue"]
  datasets:
    - label: "Colors"
      data: [1, 1, 1]
      backgroundColor: [
        "rgba(255, 0, 0, 0.5)",
        "rgba(0, 255, 0, 0.5)",
        "rgba(0, 0, 255, 0.5)",
      ]
options:
  plugins: { legend: { position: 'bottom' } }
```

Enjoy!