vuepress-plugin-chart

A plugin for adding JavaScript charting library Chart.js to VuePress to create interactive charts in Markdown.

Demo

 

Installation

Install this plugin with:

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:

```chart
{
  "type": "bar",
  "data": {
    "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    "datasets": [{
      "label": "Salary",
      "data": [12, 19, 3, 5, 2, 3],
      "backgroundColor": [
        "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)"
      ]
    }]
  },
  "options": {
    "scales": {
      "y": {
        "ticks": {
          "beginAtZero": true,
          "callback": "function(value){ return '￥' + value + 'k'; }"  // functions should be stringified before being passed through `callback`
        }
      }
    }
  }
}
```

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

 

License

MIT