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:

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.

Functions should be stringified before being passed through callback. The following example shows how to change the tick marks of y-axis using callback:

Code

```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'; }"
        }
      }
    }
  }
}
```

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

License

MIT