This document is created in response to DM-1482. The goal is to collect information to choose a charting library that would the best serving SUI needs.
Limitations
Required chart types: multi-line, scatter, timeline, bar (1-d histogram), heatmap (2-d histogram), points with errors.
Required features: mouse interactions, zoom, log scale, error bars
Aggregation of data should happen close to the data
Charting library should be Open Source, allows redistribution, and free to use
This excludes solutions like Google Charts or Data Wrapper (datawrapper.de), which require to upload the data to google or another server.
JavaScript Charting Libraries comparison
Charting libraries: Canvas vs. SVG
There are numerous JavaScript charting libraries available, which can be broken into 2 categories: SVG-based (Scalable Vector Graphics) and Canvas-Based. Canvas are good for real time high volume data presentations, SVG - for interactive charts and graphs, high fidelity docs for viewing and printing.
Both SVG and Canvas have no problem handling up to 1000 visual elements. For more than 1000 visual elements Canvas is a must.
A Comparison of Canvas and SVG
Canvas
Pixel-based (canvas is essentially an image element with a drawing API)
Single HTML element similar to <img> in behavior
Visual presentation created and modified programmatically through script
Event model/user interaction is coarse -- at the canvas element only; interactions must be manually programmed from mouse coordinates
API does not support accessibility; markup-based techniques must be used in addition to canvas
Canvas is a bitmap with an immediate mode graphics application programming interface (API) for drawing on it. Canvas is a “fire and forget” model that renders its graphics directly to its bitmap and then subsequently has no sense of the shapes that were drawn; only the resulting bitmap stays around.
SVG
Object Model-based (SVG elements are similar to HTML elements)
Multiple graphical elements which become part of the Document Object Model (DOM)
Visual presentation created with markup and modified by CSS or programmatically through script
Event model/user interaction is object-based at the level of primitive graphic elements -- lines, rectangles, paths
SVG markup and object model directly supports accessibility
SVG is known as a retained mode graphics model persisting in an in-memory model. Analogous to HTML, SVG builds an object model of elements, attributes, and styles. When the element appears in an HTML5 document, it behaves like an inline block and is part of the HTML document tree."
It seems that SVG would be preferable for sharp-looking charts ready to be published. Canvas is preferable when dealing with large number of points, like 2D histogram. A combination of two might be a solution.
Converting chart to an image
One of the most frequently requested features is the ability to save chart as an image.
- Creating image out of SVG “The main idea is to create an SVG representation of the chart on the client side, post it to the server, use ImageMagick (http://www.imagemagick.org/) or its likes to convert it to any image format.”
- Creating image out of canvas canvas.toDataURL This method "returns a data: URL for the image in the canvas. The first argument, if provided, controls the type of the image to be returned (e.g. PNG or JPEG). The default is image/png; that type is also used if the given type isn't supported. The other arguments are specific to the type, and control the way that the image is generated ..." [todataurl]
Charting libraries to consider
Flot (Canvas-based)
Easy-to-use, attractive charting library, based on JQuery. Supports selections (zoom), has a simple way of specifying transform and inverseTransform functions, which makes it easy to do log or pow charts. Ticks for transformed charts will likely need work. I found a way to print the canvas to png, though it will not include legend, which still has no canvas-based option.
D3 (SVG-based + expansive chart building utility library, see API Reference)
Steep learning curve, very powerful, can be used as a utility library for building custom charts with ReactJS. “D3 is not a charting library, it's a DOM manipulation library designed for data visualization with SVG. This means that any charts you want to make with it will require actually making the chart, not just plugging data into an existing layout. However, because you're building the chart yourself you have a much more control over how it looks than you would with any of the other chart toolkits.”
Peity (SVG-based - tiny charts)
“Peity (sounds like deity) is a simple jQuery plugin that converts an element's content into a simple <svg> mini pie donut line or bar chart and is compatible with any browser that supports <svg>: Chrome, Firefox, IE9+, Opera, Safari.”
Highcharts (SVG-based)
free under the Creative Commons Attribution-NonCommercial 3.0 License for non-commercial use (non-profit organizations)
Nice looking, support all chart types we are interested in, including timeseries, box plot and heat-map (2-D histogram), which uses an HTML5 canvas for rendering heat-map squares. Supports printing and export into multiple image formats, log axes, slanted ticks… Good out-of-the box solution.
Integrating 3-rd party plotting libraries with React
React: Integrating 3-rd party visual components
(Uses Highcharts as an example, but D3’s, Flot’s, and other components can be integrated in a similar way.)
Another approach is to leave all rendering to react and use D3 as a utility library for building charts: D3 and React - the future of charting components
Emerging charting solution based on the combination of React and D3: React-D3