$ cd /home/

Chart.js

Gungnir
2022-03-12
2 min

INFO

This feature is disabled by default.

TIP

Code related to the disabled features will not be included in your site's bundle files.

Configuration

Use JavaScript charting library Chart.js in Markdown via plugin-chart:

theme: gungnirTheme({
  themePlugins: {
    chartjs: true
  }
})


 


If you want to customize the token of the fenced code block (which is chart by default):

theme: gungnirTheme({
  themePlugins: {
    chartjs: {
      token: "chartjs"
    }
  }
})



 



Syntax

The token of the code block should be chart (or your custom one), 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.

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