Plugin vuepress-plugin-chart for adding JavaScript charting library Chart.js to VuePress to create interactive charts in Markdown.

Install

yarn add vuepress-plugin-chart
# or
npm install vuepress-plugin-chart

Then add it to your .vuepress/config.js:

module.exports = {
  plugins: [
    [
      'vuepress-plugin-chart'
    ]
  ]
}

Usage

The token info of the code block should be chart, for example:

{
  "type": "doughnut",
  "data": {
    "datasets": [{
      "data": [10, 20, 30],
      "backgroundColor": [
        "rgba(255, 99, 132)",
        "rgba(255, 206, 86)",
        "rgba(54, 162, 235)"
      ]
    }],
    "labels": ["Red", "Yellow", "Blue"]
  }
}

Code

```chart
{
  "type": "doughnut",
  "data": {
    "datasets": [{
      "data": [10, 20, 30],
      "backgroundColor": [
        "rgba(255, 99, 132)",
        "rgba(255, 206, 86)",
        "rgba(54, 162, 235)"
      ]
    }],
    "labels": ["Red", "Yellow", "Blue"]
  }
}
```

WARNING

The key should be in quotes, or some unexpected errors will occured.

Refer to the documentation of Chart.js for more information.

License

MIT