$ cd /home/

plugin-chart

Gungnir
2021-12-12
4 min

npmgithublicense

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

Install

pnpm install vuepress-plugin-chart@next

yarn add vuepress-plugin-chart@next

npm install vuepress-plugin-chart@next

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

const { chartPlugin } = require("vuepress-plugin-chart");

module.exports = {
  plugins: [
    chartPlugin()
  ]
}

Options

token

  • Type: string

  • Default: "chart"

  • Details: Custom token of the fenced code block.

Usage

The token info of the code block should be chart (or options.token if you set), 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"]
  }
}
```

DANGER

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