This is a plugin of TOAST UI Editor to render chart.
- node_modules/
- @toast-ui/
- editor-plugin-chart/
- dist/
- toastui-editor-plugin-chart.js
The bundle files include all dependencies of this plugin.
- uicdn.toast.com/
- editor-plugin-chart/
- latest/
- toastui-editor-plugin-chart.js
- toastui-editor-plugin-chart.min.js
To use the plugin, @toast-ui/editor
must be installed.
Ref. Getting Started
$ npm install @toast-ui/editor-plugin-chart
Along with the plugin, the plugin's dependency style must be imported. The chart
plugin has TOAST UI Chart as a dependency, and you need to add a CSS file of TOAST UI Chart.
import '@toast-ui/chart/dist/toastui-chart.css';
import chart from '@toast-ui/editor-plugin-chart';
require('@toast-ui/chart/dist/toastui-chart.css');
const chart = require('@toast-ui/editor-plugin-chart');
// ...
import '@toast-ui/chart/dist/toastui-chart.css';
import Editor from '@toast-ui/editor';
import chart from '@toast-ui/editor-plugin-chart';
const editor = new Editor({
// ...
plugins: [chart]
});
// ...
import '@toast-ui/chart/dist/toastui-chart.css';
import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
import chart from '@toast-ui/editor-plugin-chart';
const viewer = new Viewer({
// ...
plugins: [chart]
});
or
// ...
import '@toast-ui/chart/dist/toastui-chart.css';
import Editor from '@toast-ui/editor';
import chart from '@toast-ui/editor-plugin-chart';
const viewer = Editor.factory({
// ...
plugins: [chart],
viewer: true
});
To use the plugin, the CDN files(CSS, Script) of @toast-ui/editor
must be included.
...
<head>
...
<link rel="stylesheet" href="https://uicdn.toast.com/chart/latest/toastui-chart.min.css" />
...
</head>
<body>
...
<!-- Chart -->
<script src="https://uicdn.toast.com/chart/latest/toastui-chart.min.js"></script>
<!-- Editor -->
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<!-- Editor's Plugin -->
<script src="https://uicdn.toast.com/editor-plugin-chart/latest/toastui-editor-plugin-chart.min.js"></script>
...
</body>
const { Editor } = toastui;
const { chart } = Editor.plugin;
const editor = new Editor({
// ...
plugins: [chart]
});
const Viewer = toastui.Editor;
const { chart } = Viewer.plugin;
const viewer = new Viewer({
// ...
plugins: [chart]
});
or
const { Editor } = toastui;
const { chart } = Editor.plugin;
const viewer = Editor.factory({
// ...
plugins: [chart],
viewer: true
});
The chart
plugin can set options when used. Just add the plugin function and options related to the plugin to the array([pluginFn, pluginOptions]
) and push them to the plugins
option of the editor.
The following options are available in the chart
plugin.
These options are used to set the dimensions of the chart drawn in the editor.
Name | Type | Default Value | Description |
---|---|---|---|
width |
number|string |
'auto' |
Default width value |
height |
number|string |
'auto' |
Default height value |
minWidth |
number |
0 |
Minimum width value |
minHeight |
number |
0 |
Minimum height value |
maxWidth |
number |
Infinity |
Maximum width value |
maxHeight |
number |
Infinity |
Maximum height value |
// ...
import '@toast-ui/chart/dist/toastui-chart.css';
import Editor from '@toast-ui/editor';
import chart from '@toast-ui/editor-plugin-chart';
const chartOptions = {
minWidth: 100,
maxWidth: 600,
minHeight: 100,
maxHeight: 300
};
const editor = new Editor({
// ...
plugins: [[chart, chartOptions]]
});