Vuepress-plugin-chart NPM

vuepress-plugin-chart@next

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

Demo

Install

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

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": "doughnut",
  "data": {
    "datasets": [{
      "data": [10, 20, 30],
      "backgroundColor": [
        "rgba(255, 99, 132)",
        "rgba(255, 206, 86)",
        "rgba(54, 162, 235)"
      ]
    }],
    "labels": ["Red", "Yellow", "Blue"]
  }
}
```

Notice: 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:

```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.