amCharts 4 Editor is a chart configuration creation and editing GUI for amCharts 4. It is intended to be used as part of your application to enable your users to create and edit chart configurations.

There are two steps that you need to complete to add amCharts 4 Editor to your CMS.

npm install @amcharts4/editor4

or

yarn add @amcharts/editor4

For example, you can use a tool like ncp to copy these files into the public directory of your projects. An included React demo uses this technique in a typical Create React App-based application:

Standard CRA scripts in package.json are modified to perform the copying before the build:

"scripts": {
    "copy-editor": "ncp ./node_modules/@amcharts/editor4/am4editor ./public/am4editor",
    "start": "yarn copy-editor && react-scripts start",
    "build": " yarn copy-editor && react-scripts build",
}

Vue sample, on the other hand, uses a different approach and modifies webpack configuration to perform the copy.

First, you'll need to import Editor launcher into your app like this:

// import Editor Launcher
import * as am4editor from '@amcharts/editor4';

Then you create an instance of the EditorLauncher class and call its launch() method passing chart configuration object in case you want to edit an existing chart.

Something like this:

const launcher = new am4editor.EditorLauncher();
launcher.launch(chartConfig);

Refer to EditorLauncher reference in the documentation to learn about available properties and configuration options.

For practical applications, check out the included samples:

• Vanilla JavaScript
• React
• Vue
• Angular

amCharts 4 Editor is is in the alpha stage and is not yet ready for use in productions. You are welcome to explore it and provide feedback to shape the development.

Commercial license holders should contact us directly at [email protected].

If you have a commercial amCharts 4 Editor license, this software is covered by your license, which supersedes any other license bundled with this package.

If you don't have a commercial license, you can use this software for development and testing purposes. Refer to the included LICENSE file. The license is also available online.

Contact amCharts.

Open an issue.