GrapesJS Chart.js Plugin

This plugin integrates Chart.js into your GrapesJS editor :rocket::rocket:. You can add various types of charts :bar_chart: to your projects and customize them according to your needs.

DEMO

:star: Star me on GitHub — it motivates me a lot!

Summary

- Plugin name: grapesjs-chartjs-plugin
- Components
- chartjs
- Blocks
- chartjs-bar
- chartjs-line
- chartjs-pie
- chartjs-doughnut
- chartjs-polarArea
- chartjs-radar
- chartjs-bubble
- chartjs-scatter

Options

| Option | Description | Default |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
| chartjsOptions | This object will be passed directly to the underlying Chart.js options. See here for more info. | { maintainAspectRatio: false } |
| blocks | Which blocks to add. | [ "chartjs-bar", "chartjs-line", "chartjs-pie", "chartjs-doughnut", "chartjs-polarArea", "chartjs-radar", "chartjs-bubble", "chartjs-scatter" ] |
| category | Category name. By default the category value of the i18n en locale file will be used. | { id: 'chartjs', label: "Charts" } |
| i18n | Object used to translate plugin properties. Check the en locale file and follow its inner path. | en |

Download

- CDN
- https://unpkg.com/grapesjs-chartjs-plugin
- NPM
- npm i grapesjs-chartjs-plugin
- GIT
- git clone https://github.com/fasenderos/grapesjs-chartjs-plugin.git

Usage

Directly in the browser

``html
href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
rel="stylesheet"
/>

`

Modern javascript

`js
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-chartjs-plugin';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
container : '#gjs',
// ...
plugins: [plugin],
pluginsOpts: {
[plugin]: { / options / }
}
// or
plugins: [
editor => plugin(editor, { / options / }),
],
});
`

Development

Clone the repository

`sh
$ git clone https://github.com/fasenderos/grapesjs-chartjs-plugin.git
$ cd grapesjs-chartjs-plugin
`

Install dependencies

`sh
$ npm i
`

Start the dev server

`sh
$ npm start
`

Build the source

`sh
$ npm run build
``

License

MIT