SVG vs HTML5 Canvas Based Charts

Question

I have to draw charts on browser using a python backend (which may not matter here). There are numerous libraries like JQPlot, D3, Google Charts for achieving this.

But if you classify them, they are either HTML5 Canvas based or SVG based. Both are important technologies in their own space. But

for charting as a subject, shall I go with SVG based libraries or 
HTML5 Canvas based libraries. What are downside and benefits of 
both approaches.

I don't have any prior experience with charting and don't want to hit the wall after I start the project.

Take a look at this article by MSDN; https://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx — Adi, Jan 22 '15 at 15:04

score 89 · Accepted Answer · edited Feb 27 '16 at 07:38

Projects with a large amount of data may favor canvas. SVG approaches typically create a DOM node per point (unless you make paths), which can lead to:

An explosion in the size of your DOM tree
Performance problems

Using a path, you can get around this problem, but then you lose interactivity.

Say you're building a stock chart. If you are talking about a chart with, say... max 5 years and end of trade data samples only, I think the answer is clearly SVG. If you're talking about looking at Walmart's historical data from day one of trading or doing full trade information per minute, you are going to have to really look carefully at SVG. Probably will have to employ fancy memory management and a fetch-on-demand approach as SVG will fall apart, particularly if you go one sample to one SVG node.

If interactivity is a requirement, SVG easily has the edge, given:

It is a retained mode API
You can use typical event handlers
You can add/remove nodes easily, etc.

Of course, you see that if you require full interactivity, it may go against mechanisms that allow SVG to scale, like path collapsing, so there is an inherent tension here.

There is going to be a trade-off in extremes. If size is small, the answer is SVG hands-down. If size is large and no interactivity, the answer is SVG with path drawing only or using Canvas. If size is large and interactivity is required, you have to go canvas or tricky SVG, which is complex in either case.

Some libraries out there offer both canvas and SVG renders, such as ZingChart and Dojo. Others tend to stick with just one of the two options.

upvoted! i am trying to make a real time candlestick chart, i read a post from Microsoft https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg193983(v=vs.85) which states real time charts should be done in Canvas, in my case i would need to update the candles 50 times a second over websocket, and would have less than 1000 candles in most cases, do you think canvas makes sense for the same or would you go SVG — PirateApp, Aug 28 '18 at 02:32
With libraries like https://www.chartjs.org you have a canvas based solution with benefit of interactivity through events handlers. Some of the popular existing plugins like https://github.com/chartjs/chartjs-plugin-annotation allow fine grained interactivity like onMouseEnter, onMouseLeave, onClick, etc. — A. Masson, Feb 28 '20 at 16:33

thomasrutter · Answer 2 · 2021-10-27T00:46:36.730

Being vector based, SVG gets you scalability for free, and a side effect of this is that it's sharp on high resolution displays and sharp when printed. You can kind of get around this with canvas by rendering at 2x resolution and scaling your canvas but it's kind of a half-solution.

SVG I think is the modern way and the way to do this moving forward.

If you are concerned about rendering speed if you have many nodes consider also that if you're using canvas, you're basically using your own Javascript based rendering code which has to render those same nodes. You do get the predictability of only having to render it once, but if you only render it once that also means you lose the ability to re-render when zooming or to do various interactive things. If performance is a problem you can simplify SVG by sub-sampling your data, taking moving averages and plotting that only once per x rows, etc depending on what you're doing. But, we're talking thousands and thousands of nodes with almost no impact.

Canvas still has a place if you are building a web based raster graphics editor or something that in inherently raster-based but essentially if we are looking at charts, we're talking about something that's inherently vector based.

SVG vs HTML5 Canvas Based Charts

2 Answers2