Package Exports

@toast-ui/editor-plugin-chart

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@toast-ui/editor-plugin-chart) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

TOAST UI Editor : Chart Plugin

This is a plugin of TOAST UI Editor to render chart.

chart

📁 Bundle File Structure

Files Distributed on npm

- node_modules/
  - @toast-ui/
    - editor-plugin-chart/
      - dist/
        - toastui-editor-plugin-chart.js

Files Distributed on CDN

The bundle files under the cdn folder include all dependencies.

- 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-chart

Import Plugin

Along with the plugin, the plugin's dependency style must be imported.

ES Modules

import 'tui-chart/dist/tui-chart.css';

import chart from '@toast-ui/editor-plugin-chart';

CommonJS

require('tui-chart/dist/tui-chart.css');

const chart = require('@toast-ui/editor-plugin-chart');

Create Instance

Basic

// ...

import Editor from '@toast-ui/editor';
import chart from '@toast-ui/editor-plugin-chart';

const instance = new Editor({
  // ...
  plugins: [chart]
});

With Viewer

// ...

import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
import chart from '@toast-ui/editor-plugin-chart';

const instance = new Viewer({
  // ...
  plugins: [chart]
});

// ...

import Editor from '@toast-ui/editor';
import chart from '@toast-ui/editor-plugin-chart';

const instance = Editor.factory({
  // ...
  plugins: [chart]
});

🗂 Usage CDN

To use the plugin, the CDN files(CSS, Script) of @toast-ui/editor must be included.

Include Files

<!-- CSS -->
<link rel="stylesheet" href="https://uicdn.toast.com/tui.chart/latest/tui-chart.min.css" />
<!-- Script -->
<script src="https://uicdn.toast.com/editor-plugin-chart/latest/toastui-editor-plugin-chart.min.js"></script>

Create Instance

Basic

const { Editor } = toastui;
const { chart } = Editor.plugin;

const instance = new Editor({
  // ...
  plugins: [chart]
});

With Viewer

const Viewer = toastui.Editor;
const { chart } = Viewer.plugin;

const instance = new Viewer({
  // ...
  plugins: [chart]
});

const { Editor } = toastui;
const { chart } = Editor.plugin;

const instance = Editor.factory({
  // ...
  plugins: [chart]
});

[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 Editor from '@toast-ui/editor';
import chart from '@toast-ui/editor-plugin-chart';

const chartOptions = {
  minWidth: 100,
  maxWidth: 600,
  minHeight: 100,
  maxHeight: 300
};

const instance = new Editor({
  // ...
  plugins: [[chart, chartOptions]]
});