Skip to main content

6 JavaScript Chart Libraries with Online Chart Builders

There may be hundreds of free open-source and commercial JavaScript charting libraries, but only a few with their own online chart builder, that we review here. We’ll closely look at their functionality, their design issues and user experience.

1. Plotly

The guys from may be the only ones in this group who focused more on their online business than selling the separate standalone chart library. In fact, they only recently open-sourced and offered for free their internal plotly.js charting library, the engine behind their cloud. Plotly.js uses the SVG-based D3.js, and WebGL, for very fast rendering of a high volume of points, in spectacular manner.

Plotly Graph Maker

Their homepage starts with a gallery of charts created by users, rather than in-house samples, as you find at most other vendors. You may take a copy of any public chart and customize it as your own. Your public chart is anyway highly exposed to the Plotly “comunity”, and anyone can comment on it, make a copy, look at its source code and data. As a private chart, you may invite only a select group of Plotly users to see it and eventually collaborate.

Unlike most other similar products, Plotly adds an extra layer between the data you import and the data that’s actually displayed on the chart. You may filter and translate it in SQL, passing through their original SQL client called Falcon. Several tabs under the Create sidebar menu deal also with advanced data filtering, grouping and aggregation. And you may further apply another layer of data analysis. From this standpoint, Plotly is more close to advanced business intelligence and data analytics applications.

Each series is configured separately, and may get its own chart type, display style and response to events. They have an impressive number of graphs – i.e. charts, maps, 3D effects, other data visualization images. That’s why their tool is called a Graph Maker, and not a Chart Maker. The Style section opens up access to the chart configuration tabs. There are so many, you may easily get lost. And I regret they do not have some simple regular user mode, for those who want access to simple configuration options and avoid a high learning curve. Huge verbose information, as in the Mobile tab, is often combined with the graphic editor.

If you’re a software developer familiar with plotly.js, you may like the JSON tab. But non-technical users may find this a bit cluttered and overwhelming. The JSON tree allows you to browse the hierarchical info and change some simple online properties. But you may not add and remove items, and that’s a big limitation that can make you go back to the other configuration screens.

You may save for free only public charts, that you may later export as PNG, JPEG, SVG or EPS. Not bad that you may also download the fully generated HTML file, that you may use to expose the chart on your own server, or to view the chart offline. You may embed the chart on your own blog or share its URL.

Plotly’s online chart editor may offer way more than you can handle. Its additional layer of data transformation extensions, unusual for any other online chart builder, gets it closer to more complex BI tools. Its high degree of visual configuration of every series and every visual element may call for a serious learning curve. If you’re just looking for a quick way to create online charts, with little configuration and complexity, Plotly may not be for you. But if you want power and high data volume support, and your company can support the relatively high price asked for it, this may be your alternative to an even more expensive and complex BI data analytics tool.

2. Highcharts

The Highcharts Cloud offers public and private charts hosting, for an unlimited number of charts, as long as you accept their watermark. At the time of this writing, their online graph maker evolves rapidly. The mandatory watermark is not in effect yet, and they were recently advertising the chart builder as free and open-source, on github. A new more evolved version, with a dark theme, suddenly appeared today, as still a work-in-progress.

Highcharts Graph Maker

Their new graph maker is simple, but well organized. I love the way the left sidebar icons guide you through all the steps of a proper chart configuration. It is a simple process, but most online graph makers fail to do so. You start with importing your data (or using one of their sample test data), then you pick a chart type (nicely organized by chart categories). You eventually select a theme (that’s an empty tab at this moment, but they will populate it with their predefined themes), and you go styling the chart.

I found here what I missed at Plotly, two levels of configuration: Simple and Advanced. For more simple charts, you need a friendlier and minimalist visual UI. But expert developers may find any switch they need in the advanced tree.

Last icons implement the “data out”, functionality, the Publish and Export. With so many options, such as embedding IFRAME code or DIV-based script, publish link, social share, source code view or download, export as PNG/JPEG/SVG image etc. And they implemented simple animated GIFs to help you out with the process, at different stages.

Simple and yet very efficient. A clean design, well structured, a pleasure to work with. It’s still a work in progress at this time, but Highchart’s graph maker looks like a potential future winner in this class.

3. amCharts

The Live Editor of amCharts is a hidden gem, totally free at this moment, with all you may want and need to create and configure a chart. You may start with a selection from a limited number of templates, or dive in, select a chart type and build everything else from scratch.

amCharts Graph Maker

You need a wide area and screen for your charts, because their editor does not seem very responsive and does not turn some panes below on small screens. I like the fact you may switch to one of their 6 built-in themes with one single click. I’m only sad we may not have more that 6 exposed this way, in a combo box eventually.

I do not particularly like the way we are exposed to the series colors, in a comma-separated list of hex values. There are many free JavaScript widgets that may have been used for color management.  All font properties – like family name, size and color – are also handled in completely separate fields. And most controls are for just basic data types, nothing more fancy. Lots of configuration options as well, you may easily get lost.

I love however to see the Data grid and the generated Code side by side. The published chart page is also more evolved. You may further add a background, change the chart border, change other high-level visual elements. It’s like a nice packaging option: you built the chart in the graph editor, but now let’s find a nice box for it and pack it as a gift.

Conclusion is: even if the editor looks like an unfinished product, it’s free and useful, to create and publish complex charts online, with no fuss. The published chart page adds an extra layer of configuration, which is great. You may save the whole generated HTML and JavaScript, with CDN scripts, and open the file to look at your chart offline. There are no watermarks, and no restrictions. What I’ve been told by amCharts however is there is no obligation from their part to keep this product free forever. They have the right to shut it down or change their business model when they want. Which is fair.

4. jChartFX

In their jChartFX Plus pro version, they introduced what they call Interactive UI, a top-left popup menu with all you need to style the chart.  That’s an original approach to a chart configuration and design, that deserves a closer look.

jChartFX Graph Maker

You may change the chart type and configure each series. Style the chart, configure labels, axes, legend etc. And you may show the data grid on your chart. Finally, you may export the chart as an image.
We have to admit, there is not too much space to work with in this popup area. Sub-menus completely replace their parent menu to deal with this. And you may loose the context of where you are.

While their chart configuration menu is not the best and complete way to edit a chart, it deserves a plus for the originality. This approach reminds me of the final touches added on the publishing page on amCharts’ editor. And I continue to believe common switches such as toggling the title, legend, labels, tooltips, axes etc, are rather view configuration options, not chart configuration options, and should be present on any live published chart.

5. AnyChart

Starting with version 8, AnyChart introduced their own chart generator and editor, with over 60 chart types. They follow a four-step wizard approach. You start by uploading data, from a spreadsheet, CSV or JSON file. There is no typical data grid at this point (not yet, anyway). Or you may select with one of their predefined templates, with demo data. This data preparation step is still a bit weird, but I have the feeling it will change.

AnyChart Graph Maker

The Setup Chart step has at this moment just a few configuration options, for each series. You may add other new series and style them. And yes, this is separated from the next step, with the Visual Appearance of your chart. Here you’ll find more options (and it looks like it’s clearly a work in progress, new options are added every day).

Finally, you Complete the chart and publish it. Not sure if it is published indeed in a cloud – because I followed just one of their samples with a fixed link – but this last screen may evolve as well, with other typical sharing and download options.

To conclude, AnyChart’s first online graph maker is more like a prototype and definitely a work in progress you get the feeling will evolve. It has some basic functionality and it may help you at this point create and configure charts with no technical knowledge required. Then generate the code (on jsFiddle or elsewhere) and pass it to your developers for further customization,

6. ZingChart

Finally, another interesting original approach for a graph maker worth mentioning. It’s not the most user-friendly idea and it is certainly just for developers, but the typical chart configuration properties of ZingChart‘s original editor may be changed inline, in specific controls, in the JSON options tree.

ZingChart Graph Maker

You switch between different possible views, and the chart changes dynamically, to focus on that specific area. For instance, if you show the Labels, the chart displays an annotation, to see where the labels may appear, and the options tree displays and highlights label-related properties.

The Export button does not send you to a publish page, and does not generate an image or something, as you might expect. It actually sends you to the CodePen JavaScript playground with your chart. Which is good, but surprising. The button should have a different caption.

The editor has its own serious limitations, in the sense you may not properly change the chart types or add new series. More general, you may not add or remove items from the JSON arrays. And this makes the approach just interesting to look at, but not fully practical.

Cristi Scutaru
Cristi Scutaru

Experienced software architect and developer, founder of XtractPro Software, creator of and Focused lately on easy data extraction, visual data representation, and productivity tools.

Cristi Scutaru

Experienced software architect and developer, founder of XtractPro Software, creator of and Focused lately on easy data extraction, visual data representation, and productivity tools.