Stand-alone and embeddable chart editor for Highcharts
The Highcharts Editor is currently in Beta. The master branch is not suited for production - use one of the pre-built releases.
highcharts-editor is a lightweight chart editor for highcharts that can be embedded into existing frameworks and libraries, or used stand-alone.
It requires no back-end service to operate.
- Light on dependencies: requires only Highcharts, FontAwesome, and (optionally) two Google Fonts
- Lightweight: weighs in at ~40kb minified and gzipped
- 100% client-side
- Integration with Highcharts Cloud
- Highly configurable
- Plug-in system
Note about upgrading from 0.1.3
The transition from 0.1.3 to 0.2.0 introduces some fundemental changes.
Most notable is the complete design overhaul.
There are however also changes to the way the editor is built.
Previously, templates were part of the default build - now, templates are bundled
in separate product bundles. This means that in order for the default templates to
highcharts-editor.with.modules.min.js must also be included.
highcharts-editor.complete.js which includes the editor itself, all templates,
and advanced mode baked into a single file.
A full list of changes can be found here.
Installing and Building
We strongly encourage you to use the pre-built stable versions of the editor.
You can find these here.
Cloning and building the repository
git clone https://github.com/highcharts/highcharts-editor cd highcharts-editor npm install gulp
gulp: Builds distribution packages for the editor and the bundled integrations and plugins
gulp electron: Builds Electron packages for Windows/Linux/OSX
gulp with-advanced: Builds packages for the advanced editor which exposes all API settings
gulp complete: Builds a complete bundle with advanced mode, and all supported modules
Notice for windows users: You need 7zip installed and added to your path for
gulp electron to work!
This will put a built version in the
Running from unminified sources locally
If extending/modifying the editor code itself (or adding themes etc.), use the bundled express server. This server uses the source files directly without minifying/concatenating which makes it easier to debug and test things. It also bakes the Less files for each request.
node bin/www to start it, then head to
http://127.0.0.1:3005 for further instructions.
If you want to add new source files, add it to
and it should be picked up in both the build script and the server.
Note that the include order matters, so be sure to add it at the bottom, or before
any other files that might depend on its content.
Embedding Hello World
A number of example integrations are included in the editor:
- Full documentation
- Using plug-ins
- Enabling the advanced editor
- Customizing available editable properties
- Adding custom templates
- Disabling editor features
The editor is licensed under MIT.
Note that the use of Highcharts itself (which the editor depends on) falls under the Highcharts License.