vuepress-theme-plume/skills/vuepress-plume-markdown/resources/chart.md

Chart.js

The theme supports embedding [chart.js] charts within articles.

Configuration

Enable the feature in .vuepress/config.ts:

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      chartjs: true,
    },
  })
})

You also need to install the chart.js library:

npm install chart.js

Syntax

Use the chartjs container with a JSON code block:

::: chartjs Title
```json
{
  "type": "bar",
  "data": {
    "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    "datasets": [{
      "label": "# of Votes",
      "data": [12, 19, 3, 5, 2, 3],
      "backgroundColor": [
        "rgba(255, 99, 132, 0.2)",
        "rgba(54, 162, 235, 0.2)",
        "rgba(255, 206, 86, 0.2)",
        "rgba(75, 192, 192, 0.2)",
        "rgba(153, 102, 255, 0.2)",
        "rgba(255, 159, 64, 0.2)"
      ],
      "borderColor": [
        "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)"
      ],
      "borderWidth": 1
    }]
  },
  "options": {
    "scales": {
      "y": {
        "beginAtZero": true
      }
    }
  }
}
```
:::