vuepress-theme-chartjs

# Chart Editor

Simple chart editor that displays the entire JavaScript code.

# Usage

The Chart config is required and must be exported as: module.exports.config: object.

```js chart-editor
module.exports = {
  config: {
    // ...
  }
}
```

NOTE

See the Chart.js documentation (opens new window) for details about the expected object.

# Demo

const DATA_COUNT = 8;

Utils.srand(4);

const config = {
  type: 'bar',
  data: {
    labels: new Array(DATA_COUNT).fill(0).map((_, i) => i),
    datasets: [
      {
        data: Utils.numbers({
          count: DATA_COUNT,
          max: 50,
          min: 0,
        })
      },
      {
        data: Utils.numbers({
          count: DATA_COUNT,
          max: 25,
          min: 75,
        })
      }
    ]
  },
  options: {
    elements: {
      bar: {
        backgroundColor: (ctx) => Utils.color(ctx.datasetIndex),
      }
    }
  }
};

module.exports = {
  config,
}

← Blocks →