Announcing the free, embeddable Highcharts Editor

Posted on October 27, 2016 by Christer Vasseng. Last modified on October 28, 2016.

Many of our customers use Highcharts within some kind of content management platform, such as a blog, intranet or any other publishing environment. Often this involves building an end-user interface for creating and embedding charts. 

Collectively, this is a lot of duplicated effort. 

To make developers’ lives easier, we’re today releasing a beta of our ”Universal” editor for Highcharts 5. It’s implemented as a simple and clean wizard-style UI which walks non-programmers through chart creation from start to finish. It is easily embedded into your web-applications.

Custom integrations to pull data from your existing system or a 3rd party system, saving charts on your server, or offering different kinds of export pipes can all easily be added through the plugin system. The editor ships with sample integrations for Wordpress, TinyMCE, and CKEditor, which can be used as a cheat sheet when developing your own integrations, or as out-of-the-box solutions.

In the case of HTML output, the charts are fully interactive, and falls back to static SVG charts in cases where JavaScript is disabled or otherwise unavailable. 

This editor is free (released under the liberal MIT Open Source license), and we encourage you to build and share your app integrations with the community as well. For commercial applications, a license to the Highcharts charting library is required.

Head over to Github and download the code, or try it out here. Also, check out the video and further details below.

 

 

Plugins

The editor can be extended with custom functionality on three different levels:

  • Import

  • Export

  • General chart changes 

Each of these areas have their own plugin interface. Plugins are installed globally, and are enabled on an editor instance basis. 

Check out the sample plugins for examples on how to extend the vanilla functionality to meet your requirements.

Fully Customizable

Written and designed from scratch with flexibility in mind, customizing the editor to suit your needs is straight-forward and hassle-free. Custom import and export functions can easily be added through the plugin system, and general features can be disabled as desired.

 

Custom layouts can also be created, by combining the various UI-parts into a custom editor object.

Stand-Alone Option

In cases where dedicated chart creation is required, an Electron option is provided. This can either be fetched as a prebuilt default package. Alternatively, custom builds can be baked using gulp if custom plugins or other custom configuration properties are required.

Integrate Everywhere

Including the editor in a 3rd party web application is as simple as calling a single function in JavaScript:

 highed.ModalEditor('modal-btn', 
        {}, 
        function (html, csv, json, chart) {
               //Called when done editing
             }

Feature Summary

  • 100% client-side: no infrastructure required

  • Self-contained: no dependencies beyond Highcharts and FontAwesome

  • Lightweight: library weighs in at less than 150kb

  • Extensible: plugin system for adding custom import/export functionality

  • Live preview: see changes immediately in the chart preview

  • Built-in import support for CSV, and JSON

  • Built-in export support for JSON, HTML, and SVG

  • Beautiful templates: the editor comes with a rich set of templates to kick start your charts

  • Modular: wizard steps can be disabled as needed, and the available property set can easily be changed

  • Optional advanced editor: an advanced editor exposing the full property set of Highcharts can easily be enabled if needed

  • Optional Electron app: distribute the editor as a native application within your company 

 

Import

 

import.png

 

Templates

templates.png

 

 

Customize

customize.png

 

 

Export

export.png

 

 

Mobile

mobile.png