{"id":23720,"date":"2015-04-20T23:01:03","date_gmt":"2015-04-20T15:01:03","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23720"},"modified":"2022-07-22T19:41:23","modified_gmt":"2022-07-22T11:41:23","slug":"js-library-interactive-charts","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/","title":{"rendered":"9 Javascript Libraries to Build Interactive Charts"},"content":{"rendered":"

So you have in your hand tons of data, with a number of variables, that you have to somehow relay to somebody else. Raw, unorganized data is going to be difficult for them to understand. This is why you need help from charts. In web design, charts are one of the best tools for data visualization<\/a><\/strong>. It is easy to read, easy on the eyes and relatively easy to set up.<\/p>\n

But let\u2019s take things up a notch: let\u2019s add animation and interactivity to those charts<\/strong>, so that readers can not only learn something new from the chart, but also play with it. It is actually easier than it sounds, thanks to a number of JS libraries out there. Let\u2019s check them out.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t10+ Animated & Interactive Infographics That Brings Content to Life<\/a>\n\t\t\t\t<\/p>\n

1. Chart JS<\/a><\/h3>\n

Chart.js<\/strong> is a no-dependency library to build charts in 6 different types: line charts, bar charts, radar charts, polar area charts, pie and donut charts. The library is also split according to chart type so your pages aren\u2019t bogged down with what is not needed. It supports responsive design and you can easily change variables like color or animation to customize the chart interface.<\/p>\n

\"ChartJS\"<\/a><\/figure>\n

2. Chartist JS<\/a><\/h3>\n

Chartist JS<\/strong> is great library to build responsive charts that make use of SVG. Besides its responsiveness, Chartist gives you flexibility by using clear separation of concerns: style with CSS and control with JS. To make customization easier, the SASS files are included. The great thing here is you have limitless options to animate your chart using the Chartist animation API, SMIL<\/a>, which gives you additional animation options.<\/p>\n

\"ChartistJS\"<\/a><\/figure>\n

3. C3 JS<\/a><\/h3>\n

C3 JS<\/strong> is a library to build charts based on D3 JS<\/a>. It wraps up the required code to build charts with D3 JS, so you can skip writing the D3 code, and just input your data. C3 comes with a variety of API that you can use to control your charts easily. To customize your chart, define your own custom styles to the given CSS classes. Build charts from simple line charts to gauge charts. Check out this page<\/a> to see how the library works.<\/p>\n

\"C3JS\"<\/a><\/figure>\n

4. Flot<\/a><\/h3>\n

Flot<\/strong> is a jQuery plguin for creating charts with interactive elements like turning a series on or off, data point interactions, panning, zooming and more. Flot comes with a variety of chart type options and if you want more ability on your chart, here are some plugins<\/a> you can use as well. The charts will work well with browsers that support HTML canvases.<\/p>\n

\"flotJS\"<\/a><\/figure>\n

5. EChart<\/h3>\n

Echart<\/strong> is an amazingly comprehensive library from China which supports multiple chart types, can process big data (plotting up to 200,000 data points on a Cartesian chart), has scale roaming, the ability to effortlessly extract, integrate, and exchange data among multiple charts, allowing one to easily switch from one data type to another, and a whole lot more.<\/p>\n

\"echart\"<\/figure>\n

6. Peity<\/a><\/h3>\n

Peity<\/strong> will add a mini chart to your web page. It is a small jQuery plugin that transforms an element into a mini svg<\/code> line, bar, donut, or pie chart. You just need to create an element and give a value like 1\/5<\/code> and make a call peity('pie')<\/code> on that element to make a mini pie chart. For instance, to create a donut chart that is only one-fifth highlighted, here is the HTML:<\/p>\n

<span class=\"donut\">1\/5<\/span><\/code><\/p>\n

You can customize the chart color, radius, width and height, but by default it\u2019s displayed in small size.<\/p>\n

\"Peity\"<\/a><\/figure>\n

7. DC JS<\/a><\/h3>\n

DC JS<\/strong> has similarities with C3 JS in terms of engine used; they both use the D3 library to render charts in SVG. DC JS is created to help you visualize data and analysis for browsers and for mobile devices. Since it leverages on the D3 JS, it allows you to add user interaction to your chart. DC JS is one powerful library to create charts from simple to high complexities.<\/p>\n

\"DS<\/a><\/figure>\n

8. Google Chart<\/h3>\n

You can create interactive charts and data tools using the Google Visualization API<\/a> via Google Chart. There are chart galleries<\/a> to check out Google Chart\u2019s data visualization capabilities. To start, embed simple JavaScript to your web page to load the Google Chart libraries you need. Then list the data you want charted, and make some customizations through the chart options. Finally create a chart object with an id, and on your web page, create a <div><\/code> with that id to display your chart.<\/p>\n

\"Google<\/a><\/figure>\n

9. NVD3<\/a><\/h3>\n

NVD3<\/strong> is a set of reusable charts and chart components that are built with D3 JS. This library is hence a \u2018template\u2019 that will help make it easier for you to build charts. Check out the many sample charts<\/a> built with NVD3 here<\/a>.<\/p>\n

\"NVD3\"<\/a><\/figure>\n

Now Read:JavaScript Libraries to Create Interactive & Customized Maps<\/a><\/h3>\n
<\/a><\/figure>","protected":false},"excerpt":{"rendered":"

So you have in your hand tons of data, with a number of variables, that you have to somehow relay to somebody else. Raw, unorganized data is going to be difficult for them to understand. This is why you need help from charts. In web design, charts are one of the best tools for data…<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[3497,4117,4538],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n9 Javascript Libraries to Build Interactive Charts - Hongkiat<\/title>\n<meta name=\"description\" content=\"So you have in your hand tons of data, with a number of variables, that you have to somehow relay to somebody else. Raw, unorganized data is going to be\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"9 Javascript Libraries to Build Interactive Charts\" \/>\n<meta property=\"og:description\" content=\"So you have in your hand tons of data, with a number of variables, that you have to somehow relay to somebody else. Raw, unorganized data is going to be\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-04-20T15:01:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-22T11:41:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/js-library-interactive-charts\/chartjs.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-library-interactive-charts\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-library-interactive-charts\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"9 Javascript Libraries to Build Interactive Charts\",\"datePublished\":\"2015-04-20T15:01:03+00:00\",\"dateModified\":\"2022-07-22T11:41:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-library-interactive-charts\\\/\"},\"wordCount\":783,\"commentCount\":16,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-library-interactive-charts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/js-library-interactive-charts\\\/chartjs.jpg\",\"keywords\":[\"Javascript Library\",\"Javascripts\",\"Maps and Navigation\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-library-interactive-charts\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-library-interactive-charts\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-library-interactive-charts\\\/\",\"name\":\"9 Javascript Libraries to Build Interactive Charts - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-library-interactive-charts\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-library-interactive-charts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/js-library-interactive-charts\\\/chartjs.jpg\",\"datePublished\":\"2015-04-20T15:01:03+00:00\",\"dateModified\":\"2022-07-22T11:41:23+00:00\",\"description\":\"So you have in your hand tons of data, with a number of variables, that you have to somehow relay to somebody else. Raw, unorganized data is going to be\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-library-interactive-charts\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-library-interactive-charts\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-library-interactive-charts\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/js-library-interactive-charts\\\/chartjs.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/js-library-interactive-charts\\\/chartjs.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-library-interactive-charts\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"9 Javascript Libraries to Build Interactive Charts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"9 Javascript Libraries to Build Interactive Charts - Hongkiat","description":"So you have in your hand tons of data, with a number of variables, that you have to somehow relay to somebody else. Raw, unorganized data is going to be","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/","og_locale":"en_US","og_type":"article","og_title":"9 Javascript Libraries to Build Interactive Charts","og_description":"So you have in your hand tons of data, with a number of variables, that you have to somehow relay to somebody else. Raw, unorganized data is going to be","og_url":"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-04-20T15:01:03+00:00","article_modified_time":"2022-07-22T11:41:23+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/js-library-interactive-charts\/chartjs.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"9 Javascript Libraries to Build Interactive Charts","datePublished":"2015-04-20T15:01:03+00:00","dateModified":"2022-07-22T11:41:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/"},"wordCount":783,"commentCount":16,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/js-library-interactive-charts\/chartjs.jpg","keywords":["Javascript Library","Javascripts","Maps and Navigation"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/","url":"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/","name":"9 Javascript Libraries to Build Interactive Charts - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/js-library-interactive-charts\/chartjs.jpg","datePublished":"2015-04-20T15:01:03+00:00","dateModified":"2022-07-22T11:41:23+00:00","description":"So you have in your hand tons of data, with a number of variables, that you have to somehow relay to somebody else. Raw, unorganized data is going to be","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/js-library-interactive-charts\/chartjs.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/js-library-interactive-charts\/chartjs.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/js-library-interactive-charts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"9 Javascript Libraries to Build Interactive Charts"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6aA","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23720"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23720\/revisions"}],"predecessor-version":[{"id":58607,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23720\/revisions\/58607"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23720"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}