# Chart Plugin for Jodit PRO

The plugin inserts charts as plain inline SVG: bar, horizontal bar, line, area, pie, donut and radar. The user edits a chart in a dialog: type, title and data points with labels, values and colors. The result is a `<figure>` element with the SVG inside. It does not depend on scripts, external stylesheets or a charting library, so the chart renders wherever the HTML is shown. The chart data is kept in the `data-jodit-chart` attribute, so the chart can be opened for editing again later.

## Features

- The "Insert chart" button in the `insert` toolbar group and the `insertChart` command.
- Seven chart types: `bar`, `horizontalBar`, `line`, `area`, `pie`, `donut` and `radar`.
- A dialog with a live preview. It has the chart type, an optional title, background, text and border colors, a transparent background toggle, and the list of data points. Points have a label, a value and a color. The user can add and remove points and drag them by the grip to reorder.
- A short summary next to the points list: the number of points and their total.
- Pie and donut charts narrower than 420px put the legend under the pie and grow in height, so the pie keeps a readable size.
- A click on a chart opens a popup with the edit and delete buttons. A double click opens the dialog.
- The standard Jodit resizer resizes the figure. After resizing the plugin renders the SVG again for the new size.
- The Tune Block plugin shows its grip handle for `figure` blocks, with move up, remove and move down.
- Charts that come with the initial value, for example from the server, are recognized on load.
- The default palette passes colorblind checks. Any point can override its color.

## Installation

The plugin is included in the fat build. With the slim build enable it manually:

```js
Jodit.make('#editor', {
	extraPlugins: ['chart']
});
```

## HTML structure

```html
<figure
	class="jodit-chart"
	contenteditable="false"
	data-jodit-chart='{"type":"bar","title":"Sales","points":[{"label":"Q1","value":10}],"width":600,"height":400,"background":"#ffffff","textColor":"#111827","borderColor":"#e5e7eb"}'
	style="width: 600px; max-width: 100%"
>
	<svg
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 600 400"
		width="100%"
		role="img"
		aria-label="Sales"
	>
		…
	</svg>
</figure>
```

The SVG carries its own colors, fonts and sizes as attributes, so it needs no CSS. If you remove the `data-jodit-chart` attribute, the chart stays in the document but the plugin no longer treats it as editable.

## Data format

```ts
interface IChartData {
	type: 'bar' | 'horizontalBar' | 'line' | 'area' | 'pie' | 'donut' | 'radar';
	title: string; // an empty string hides the title
	points: Array<{ label: string; value: number; color?: string }>;
	width: number; // px, SVG viewBox and figure width
	height: number; // px
	background?: string; // card color; an empty string means no card (transparent)
	textColor?: string; // title color; the grid and secondary labels use it with reduced opacity
	borderColor?: string; // card border color
}
```

## Options

### chart.className

- Type: `string`
- Default: `'jodit-chart'`

The class of the `<figure>` element.

### chart.types

- Type: `ChartType[]`
- Default: `['bar', 'horizontalBar', 'line', 'area', 'pie', 'donut', 'radar']`

The chart types available in the dialog, in this order.

```js
Jodit.make('#editor', {
	chart: {
		types: ['bar', 'pie']
	}
});
```

### chart.defaultType

- Type: `ChartType`
- Default: `'bar'`

### chart.defaultTitle / chart.defaultPoints

- Type: `string` / `Array<{ label: string; value: number; color?: string }>`
- Default: `'Sample chart'` / five items with values `10, 20, 15, 25, 30`

The title and points that the dialog shows for a new chart.

```js
Jodit.make('#editor', {
	chart: {
		defaultTitle: '',
		defaultPoints: [
			{ label: 'Yes', value: 1 },
			{ label: 'No', value: 1 }
		]
	}
});
```

### chart.colors

- Type: `string[]`
- Default: `['#2a78d6', '#eb6834', '#1baf7a', '#eda100', '#e87ba4', '#008300', '#6250d6', '#e34948']`

The palette for points without their own color. The first point gets the first color, the second point the second one, and so on.

### chart.defaultBackground / chart.defaultTextColor / chart.defaultBorderColor

- Type: `string`
- Default: `'#ffffff'` / `'#111827'` / `'#e5e7eb'`

The colors of a new chart. The plugin draws grid lines, axes and secondary labels in the text color with reduced opacity, so a dark background with light text needs no extra settings. An empty `defaultBackground` renders the chart without the card.

```js
Jodit.make('#editor', {
	chart: {
		defaultBackground: '#1f2937',
		defaultTextColor: '#f9fafb'
	}
});
```

### chart.allowChangeBackground / chart.allowChangeTextColor / chart.allowChangeBorderColor

- Type: `boolean`
- Default: `true`

Each flag shows or hides one color control in the dialog. `allowChangeBackground: false` also hides the transparent toggle. When all three are `false` the dialog has no color block and every chart uses the default colors.

```js
Jodit.make('#editor', {
	chart: {
		allowChangeBackground: false,
		allowChangeTextColor: false,
		allowChangeBorderColor: false
	}
});
```

### chart.fontFamily

- Type: `string`
- Default: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`

The value of the `font-family` attribute on the generated SVG.

### chart.width / chart.height

- Type: `number`
- Default: `600` / `400`

The size of a new chart in pixels. The user can change it later with the resizer.

### chart.popup

- Type: `Array<IControlType | string>`
- Default: `['chartEdit', 'chartRemove']`

The buttons of the popup that opens on a click on a chart. An empty array disables the popup.

```js
Jodit.make('#editor', {
	chart: {
		popup: [
			'chartEdit',
			{
				name: 'duplicate',
				icon: 'copy',
				exec(editor, figure) {
					figure.after(figure.cloneNode(true));
					editor.synchronizeValues();
				}
			}
		]
	}
});
```

### chart.dialog

- Type: `{ width: number; height: number }`
- Default: `{ width: 620, height: 720 }`

The size of the dialog in pixels.

### allowResizeTags

The plugin adds `figure` to the core `allowResizeTags` set, which gives charts the resize handles. If you override `allowResizeTags` in your config and still want resizable charts, include `'figure'` in your set.

## Controls

| Name          | Description                                           |
| ------------- | ----------------------------------------------------- |
| `chart`       | Toolbar button. Opens the dialog for a new chart.     |
| `chartEdit`   | Popup button. Opens the dialog for the clicked chart. |
| `chartRemove` | Popup button. Removes the clicked chart.              |

## Commands and events

```js
// open the dialog for a new chart at the cursor
editor.execCommand('insertChart');

// open the dialog for a new chart or for an existing chart element
editor.e.fire('openChartEditor');
editor.e.fire('openChartEditor', figureElement);

// remove a chart element
editor.e.fire('removeChart', figureElement);

// true while the dialog is opened
editor.e.fire('isChartEditorOpened');
```

## Styling

The chart look lives in the SVG attributes and does not depend on CSS. Inside the editor the `.jodit-wysiwyg figure.jodit-chart` rule adds `cursor: pointer` and `user-select: none` to the figure.

## Dependencies

- The plugin requires the `license` plugin from Jodit PRO.
- The `tune-block` plugin adds the grip handle for `figure` elements, and the core `resizer` plugin provides the resize handles. Both are optional.