In general, I consider SVG as the best choice for charts, but it\u2019s not the only option. There are tools to create flat raster graphics out of chart data. There are <canvas> chart options. You could even make a basic chart out of HTML elements.<\/p>\n
<\/p>\n
Early Considerations<\/h3>\n
When picking a library, there are a bunch of aspects to consider. A lot of this is fairly obvious. I mostly want you to remember that there are a lot of considerations so it\u2019s worth looking at a variety of solutions.<\/p>\n
- \n
- \n Paid or free?<\/b> Some people have huge budgets and prefer paying for software. For others, free is the only option.\n<\/li>\n
- \n Open source or not?<\/b> Is the license compatible with what you are building? Is the thing you are building open source as well and compatible (or not)? Are you redistributing the thing you build, like a theme? Are you building something commercial? What are the attribution requirements?\n<\/li>\n
- \n What is the feature set?<\/b> Do you need only one type of chart? Multiple types? What are they? Are you hoping that a single library can help with other charting needs like stocks or maps?\n<\/li>\n
- \n What are the dependencies?<\/b> There are libraries that require jQuery. More commonly, an SVG library, like D3, is required. Some have no dependencies.\n<\/li>\n
- \n What kind of support is available?<\/b> Is it included when you buy it? Can you buy it as an add-on? Do you need it at all? Does the open-source repo look like a place help is offered?\n<\/li>\n
- \n Was it built for a framework?<\/b> Some of these options are specifically for frameworks like React, Angular, or Embed. Surely, there are also options that are built for CMS\u2019s or specifically for data output from specific backend languages.\n<\/li>\n
- \n How are the docs?<\/b> Are there lots of examples? How readable are they?\n<\/li>\n
- \n What other features do you need?<\/b> Are your users going to expect to be able to print these? Export the data? Interact with them? Customize them?\n<\/li>\n
- \n How does theming work?<\/b> Do you need them to come with nice themes? Are you planning to style them on your own?\n<\/li>\n<\/ul>\n
There is a lot to think about!<\/p>\n
The List!<\/h3>\n
It\u2019s very likely incomplete. If there are SVG-outputting charting libraries that I missed, drop \u2019em in the comments!<\/p>\n
I\u2019m not going to leave a bunch of commentary on each one. The list of considerations is so deep and variable, it\u2019s really up to you to check these out and make a choice. I\u2019m going to snap some screenshots here to showcase some things each has to offer, as well a live demo (if I can find one). This doesn\u2019t comprehensively show what each is capable of, it\u2019s just a taste.<\/p>\n
amCharts<\/a><\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/amcharts.png?resize=3094%2C2232&ssl=1\")
<\/figure>\n\n See the Pen
\n Using SVG Filters with amCharts<\/a> by amCharts (@amcharts<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nHighcharts<\/a><\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/highcharts.png?resize=3068%2C2240&ssl=1\")
<\/figure>\n\n See the Pen
\n Highchart Javascript Integration<\/a> by Benjamin Cassinat (@benftwc<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nZingchart<\/a><\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/zingchart.png?resize=3150%2C2174&ssl=1\")
<\/figure>\nFusionCharts<\/a><\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/fusioncharts.png?resize=3158%2C2180&ssl=1\")
<\/figure>\n\n See the Pen
\n Rad Charts Using Fusion Charts<\/a> by Chris Vasquez (@cvasquez<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nGoogle Charts<\/a><\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/googlecharts.png?resize=3290%2C2146&ssl=1\")
<\/a><\/figure>\n\n See the Pen
\n Toggle series visibility in a Google Chart<\/a> by Geoff (@gapple<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nPlotly<\/a><\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/plotly.png?resize=3050%2C2164&ssl=1\")
<\/figure>\n\n See the Pen
\n Responsive Fluid Layout example using Plotly JS<\/a> by plotly (@plotly<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nXCHARTS<\/a><\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/xcharts.png?resize=3114%2C2186&ssl=1\")
<\/figure>\n\n See the Pen
\n XCharts a D3-based library <\/a> by Sten Hougaard (@netsi1964<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nmorris.js<\/a><\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/morrisjs.png?resize=3144%2C2192&ssl=1\")
<\/a><\/figure>\n\n See the Pen
\n Morris.js charts – simple examples<\/a> by Cioban Andrei (@andreic<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nuvCharts<\/a><\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/uvCharts.png?resize=3192%2C2260&ssl=1\")
<\/figure>\nContour<\/a><\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/contour.png?resize=3292%2C2196&ssl=1\")
<\/figure>\nCHARTIST.JS<\/a><\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/chartist.png?resize=3290%2C2174&ssl=1\")
<\/figure>\n\n See the Pen
\n Working with Chartist and Animations<\/a> by Sarah Drasner (@sdras<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nn3-charts<\/a><\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/n3-charts.png?resize=3240%2C2104&ssl=1\")
<\/figure>\n\n See the Pen
\n n3-Charts<\/a> by Jim Gibbs (@jimgibbs<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nEmber charts<\/a><\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/ember-charts.png?resize=3252%2C2102&ssl=1\")
<\/a><\/figure>\nReact SVG chart<\/a><\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/chartjs.png?resize=3314%2C2188&ssl=1\")
<\/a><\/figure>\nOptions That Use <canvas><\/h3>\n
There are a good number of options that specifically output to <canvas>, like Chart.js<\/a>.<\/p>\n
I\u2019m far more into
<svg><\/code>, but if you have a good reason to go for canvas, here\u2019s some others:<\/p>\n- \n
- \n Chartkick<\/a>\n <\/li>\n
- \n Flotcharts<\/a>\n <\/li>\n
- \n EJSCharts<\/a>\n <\/li>\n<\/ul>\n
Good luck! And let us know if you\u2019ve had any success with any of these in particular.<\/p>\n","protected":false},"excerpt":{"rendered":"
There is no shortage of options with charting libraries on the web. That\u2019s good! Competition is good for consumers. It keeps the quality high. That\u2019s certainly true here. The landscape of charting libraries is pretty impressive, ranging from the good-and-free to the excellent-and-paid. We\u2019re limiting the options presented here specifically to SVG charts. I think […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[881,520,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":259513,"url":"https:\/\/css-tricks.com\/react-dataviz\/","url_meta":{"origin":246686,"position":0},"title":"React + Dataviz","date":"September 18, 2017","format":false,"excerpt":"There is a natural connection between Data Visualization (dataviz) and SVG. SVG is a graphics format based on geometry and geometry is exactly what is needed to visually display data in compelling and accurate ways. SVG has got the \"visualization\" part, but SVG is more declarative than programmatic. To write\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/09\/reactdataviz.png?fit=1000%2C412&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":272850,"url":"https:\/\/css-tricks.com\/what-is-svg-good-for\/","url_meta":{"origin":246686,"position":1},"title":"What is SVG good for?","date":"June 20, 2018","format":false,"excerpt":"Y'all probably wouldn't be surprised if I told you it's pretty awesome for icons, and icon systems. SVG icon systems can, and perhaps should be quite easy. I'm a fan of just inlining those suckers, particularly when they are pretty simple. But what else? Logos is a classic example! A\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/Untitled-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":208855,"url":"https:\/\/css-tricks.com\/how-to-make-charts-with-svg\/","url_meta":{"origin":246686,"position":2},"title":"How to Make Charts with SVG","date":"October 5, 2015","format":false,"excerpt":"In my first post about making charts, I looked at methods that solely relied on CSS. I argued that this wasn\u2019t the best option in most cases; there are just too many tricky design and development hurdles to overcome. Generally speaking, it\u2019s best to make charts with a combination of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/css-audit-specificity-graph.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342448,"url":"https:\/\/css-tricks.com\/how-to-create-css-charts-with-interesting-shapes-glyphs-and-emoji\/","url_meta":{"origin":246686,"position":3},"title":"How to Create CSS Charts With Interesting Shapes, Glyphs and Emoji","date":"June 21, 2021","format":false,"excerpt":"Let\u2019s forego the usual circles and bars we typically see used in charts for more eccentric shapes. With online presentations more and more common today, a quick way to spruce up your web slides and make them stand out is to give the charts a shapely makeover \ud83e\ude84 I\u2019ll show\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/chart-shapes.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":262731,"url":"https:\/\/css-tricks.com\/simple-patterns-for-separation\/","url_meta":{"origin":246686,"position":4},"title":"Simple Patterns for Separation (Better Than Color Alone)","date":"November 18, 2017","format":false,"excerpt":"Color is pretty good for separating things. That's what your basic pie chart is, isn't it? You tell the slices apart by color. With enough color contrast, you might be OK, but you might be even better off (particularly where accessibility is concerned) using patterns, or a combination. Patrick Dillon\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":277890,"url":"https:\/\/css-tricks.com\/hand-roll-charts-with-d3-like-you-actually-know-what-youre-doing\/","url_meta":{"origin":246686,"position":5},"title":"Hand roll charts with D3 like you actually know what you\u2019re doing","date":"October 24, 2018","format":false,"excerpt":"Charts! My least favorite subject besides Social Studies. But you just won't get very far in this industry before someone wants you to make a chart. I don't know what it is with people and charts, but apparently we can't have a civilization without a bar chart showing Maggie's sales\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/d3-featured.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/246686"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=246686"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/246686\/revisions"}],"predecessor-version":[{"id":302633,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/246686\/revisions\/302633"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=246686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=246686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=246686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- \n Flotcharts<\/a>\n <\/li>\n
- \n Open source or not?<\/b> Is the license compatible with what you are building? Is the thing you are building open source as well and compatible (or not)? Are you redistributing the thing you build, like a theme? Are you building something commercial? What are the attribution requirements?\n<\/li>\n