@toast-ui/editor-plugin-chart
v3.0.1
Published
TOAST UI Editor : Chart Plugin
Downloads
4,039
Readme
TOAST UI Editor : Chart Plugin
This is a plugin of TOAST UI Editor to render chart.
🚩 Table of Contents
📁 Bundle File Structure
Files Distributed on npm
- node_modules/
- @toast-ui/
- editor-plugin-chart/
- dist/
- toastui-editor-plugin-chart.jsFiles Distributed on CDN
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📦 Usage npm
To use the plugin, @toast-ui/editor must be installed.
Ref. Getting Started
Install
$ npm install @toast-ui/editor-plugin-chartImport Plugin
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.
ES Modules
import '@toast-ui/chart/dist/toastui-chart.css';
import chart from '@toast-ui/editor-plugin-chart';CommonJS
require('@toast-ui/chart/dist/toastui-chart.css');
const chart = require('@toast-ui/editor-plugin-chart');Create Instance
Basic
// ...
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]
});With Viewer
// ...
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
});🗂 Usage CDN
To use the plugin, the CDN files(CSS, Script) of @toast-ui/editor must be included.
Include Files
...
<head>
...
<link rel="stylesheet" href="https://uicdn.toast.com/chart/latest/toastui-chart.min.css" />
...
</head>
<body>
...
<!-- 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>Create Instance
Basic
const { Editor } = toastui;
const { chart } = Editor.plugin;
const editor = new Editor({
// ...
plugins: [chart]
});With Viewer
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
});[Optional] Use Plugin with Options
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]]
});