CINXE.COM

<!doctype html> <html lang="en-US"> <head> <title>Chart.js | Open source HTML5 Charts for your website</title> <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' www.google-analytics.com *.typekit.net"> <script src="https://use.typekit.net/kfx1lmb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <script> /*! modernizr 3.3.1 (Custom Build) | MIT * * http://modernizr.com/download/?-cssanimations-setclasses-shiv !*/ !function(e,t,n){function r(e,t){return typeof e===t}function o(){var e,t,n,o,a,i,s;for(var l in C)if(C.hasOwnProperty(l)){if(e=[],t=C[l],t.name&&(e.push(t.name.toLowerCase()),t.options&&t.options.aliases&&t.options.aliases.length))for(n=0;n<t.options.aliases.length;n++)e.push(t.options.aliases[n].toLowerCase());for(o=r(t.fn,"function")?t.fn():t.fn,a=0;a<e.length;a++)i=e[a],s=i.split("."),1===s.length?Modernizr[s[0]]=o:(!Modernizr[s[0]]||Modernizr[s[0]]instanceof Boolean||(Modernizr[s[0]]=new Boolean(Modernizr[s[0]])),Modernizr[s[0]][s[1]]=o),y.push((o?"":"no-")+s.join("-"))}}function a(e){var t=S.className,n=Modernizr._config.classPrefix||"";if(b&&(t=t.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+n+"no-js(\\s|$)");t=t.replace(r,"$1"+n+"js$2")}Modernizr._config.enableClasses&&(t+=" "+n+e.join(" "+n),b?S.className.baseVal=t:S.className=t)}function i(e,t){return!!~(""+e).indexOf(t)}function s(){return"function"!=typeof t.createElement?t.createElement(arguments[0]):b?t.createElementNS.call(t,"http://www.w3.org/2000/svg",arguments[0]):t.createElement.apply(t,arguments)}function l(e){return e.replace(/([a-z])-([a-z])/g,function(e,t,n){return t+n.toUpperCase()}).replace(/^-/,"")}function c(e,t){return function(){return e.apply(t,arguments)}}function u(e,t,n){var o;for(var a in e)if(e[a]in t)return n===!1?e[a]:(o=t[e[a]],r(o,"function")?c(o,n||t):o);return!1}function f(e){return e.replace(/([A-Z])/g,function(e,t){return"-"+t.toLowerCase()}).replace(/^ms-/,"-ms-")}function d(){var e=t.body;return e||(e=s(b?"svg":"body"),e.fake=!0),e}function m(e,n,r,o){var a,i,l,c,u="modernizr",f=s("div"),m=d();if(parseInt(r,10))for(;r--;)l=s("div"),l.id=o?o[r]:u+(r+1),f.appendChild(l);return a=s("style"),a.type="text/css",a.id="s"+u,(m.fake?m:f).appendChild(a),m.appendChild(f),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(t.createTextNode(e)),f.id=u,m.fake&&(m.style.background="",m.style.overflow="hidden",c=S.style.overflow,S.style.overflow="hidden",S.appendChild(m)),i=n(f,e),m.fake?(m.parentNode.removeChild(m),S.style.overflow=c,S.offsetHeight):f.parentNode.removeChild(f),!!i}function p(t,r){var o=t.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(f(t[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var a=[];o--;)a.push("("+f(t[o])+":"+r+")");return a=a.join(" or "),m("@supports ("+a+") { #modernizr { position: absolute; } }",function(e){return"absolute"==getComputedStyle(e,null).position})}return n}function h(e,t,o,a){function c(){f&&(delete j.style,delete j.modElem)}if(a=r(a,"undefined")?!1:a,!r(o,"undefined")){var u=p(e,o);if(!r(u,"undefined"))return u}for(var f,d,m,h,g,v=["modernizr","tspan"];!j.style;)f=!0,j.modElem=s(v.shift()),j.style=j.modElem.style;for(m=e.length,d=0;m>d;d++)if(h=e[d],g=j.style[h],i(h,"-")&&(h=l(h)),j.style[h]!==n){if(a||r(o,"undefined"))return c(),"pfx"==t?h:!0;try{j.style[h]=o}catch(y){}if(j.style[h]!=g)return c(),"pfx"==t?h:!0}return c(),!1}function g(e,t,n,o,a){var i=e.charAt(0).toUpperCase()+e.slice(1),s=(e+" "+x.join(i+" ")+i).split(" ");return r(t,"string")||r(t,"undefined")?h(s,t,o,a):(s=(e+" "+_.join(i+" ")+i).split(" "),u(s,t,n))}function v(e,t,r){return g(e,n,n,t,r)}var y=[],C=[],E={_version:"3.3.1",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,t){var n=this;setTimeout(function(){t(n[e])},0)},addTest:function(e,t,n){C.push({name:e,fn:t,options:n})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=E,Modernizr=new Modernizr;var S=t.documentElement,b="svg"===S.nodeName.toLowerCase();b||!function(e,t){function n(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function r(){var e=C.elements;return"string"==typeof e?e.split(" "):e}function o(e,t){var n=C.elements;"string"!=typeof n&&(n=n.join(" ")),"string"!=typeof e&&(e=e.join(" ")),C.elements=n+" "+e,c(t)}function a(e){var t=y[e[g]];return t||(t={},v++,e[g]=v,y[v]=t),t}function i(e,n,r){if(n||(n=t),f)return n.createElement(e);r||(r=a(n));var o;return o=r.cache[e]?r.cache[e].cloneNode():h.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!o.canHaveChildren||p.test(e)||o.tagUrn?o:r.frag.appendChild(o)}function s(e,n){if(e||(e=t),f)return e.createDocumentFragment();n=n||a(e);for(var o=n.frag.cloneNode(),i=0,s=r(),l=s.length;l>i;i++)o.createElement(s[i]);return o}function l(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return C.shivMethods?i(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+r().join().replace(/[\w\-:]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(C,t.frag)}function c(e){e||(e=t);var r=a(e);return!C.shivCSS||u||r.hasCSS||(r.hasCSS=!!n(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),f||l(e,r),e}var u,f,d="3.7.3",m=e.html5||{},p=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,h=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,g="_html5shiv",v=0,y={};!function(){try{var e=t.createElement("a");e.innerHTML="<xyz></xyz>",u="hidden"in e,f=1==e.childNodes.length||function(){t.createElement("a");var e=t.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(n){u=!0,f=!0}}();var C={elements:m.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:d,shivCSS:m.shivCSS!==!1,supportsUnknownElements:f,shivMethods:m.shivMethods!==!1,type:"default",shivDocument:c,createElement:i,createDocumentFragment:s,addElements:o};e.html5=C,c(t),"object"==typeof module&&module.exports&&(module.exports=C)}("undefined"!=typeof e?e:this,t);var w="Moz O ms Webkit",x=E._config.usePrefixes?w.split(" "):[];E._cssomPrefixes=x;var _=E._config.usePrefixes?w.toLowerCase().split(" "):[];E._domPrefixes=_;var N={elem:s("modernizr")};Modernizr._q.push(function(){delete N.elem});var j={style:N.elem.style};Modernizr._q.unshift(function(){delete j.style}),E.testAllProps=g,E.testAllProps=v,Modernizr.addTest("cssanimations",v("animationName","a",!0)),o(),a(y),delete E.addTest,delete E.addAsyncTest;for(var k=0;k<Modernizr._q.length;k++)Modernizr._q[k]();e.Modernizr=Modernizr}(window,document); </script> <meta name="description" content="Simple yet flexible JavaScript charting library for the modern web"/>  <meta property="og:type" content="website"> <meta property="og:title" content="Chart.js"> <meta property="og:description" content="Simple yet flexible JavaScript charting library for the modern web"> <meta property="og:image" content="https://www.chartjs.org/img/cover.png">  <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:title" content="Chart.js"> <meta property="twitter:description" content="Simple yet flexible JavaScript charting library for the modern web"> <meta property="twitter:image" content="https://www.chartjs.org/img/cover.png"> <link rel="icon" href="./favicon.ico"/> <link rel="stylesheet" type="text/css" href="./styles.css"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-28909194-3', 'auto'); ga('send', 'pageview'); </script> </head> <body class="homepage"> <div class="background-chart fade-in"> <canvas id="background-bar"></canvas> </div> <div class="content-overlay fade-in-up animation-delay__1"> <div class="hero-container"> <img class="chart-logo fade-in animation-delay__3" src="./img/chartjs-logo.svg" alt="logo" /> <div class="fade-in fade-in animation-delay__5"> <h1 class="hero-title">Chart.js</h1> <h2 class="hero-subtitle">Simple yet flexible JavaScript charting library for the modern web</h2> </div> <div class="hero-button-wrapper fade-in animation-delay__6"> <a class="button button__red" href="./docs">Get Started</a> <a class="button button__blue" href="./docs/latest/samples">Samples</a> <a class="button button__green" href="https://github.com/chartjs/awesome" target="_blank">Ecosystem</a> <a class="button button__black" href="https://github.com/chartjs/Chart.js" target="_blank">GitHub</a> </div> </div> <div class="feature-container fade-in animation-delay__7"> <div class="feature"> <div class="feature-text feature-text__pull-right"> <h3 class="subtitle"> <span class="pill pill__new pill__v4">New in 4.0</span> Colors plugin </h3> <p class="description"><a href="https://www.chartjs.org/docs/latest/general/colors.html#default-color-palette">Default palette</a> of Chart.js brand colors is available as a built-in time-saving zero-configuration plugin.</p> </div> <div class="feature-chart feature-chart__left feature-chart__pull-right"> <canvas id="v4colors" height="200" width="300"></canvas> </div> </div> <div class="feature"> <div class="feature-text"> <h3 class="subtitle"> <span class="pill pill__new pill__v4">New in 4.0</span> Tree-shaking </h3> <p class="description">JavaScript bundle size can be reduced by dozens of kilobytes by registering only <a href="https://www.chartjs.org/docs/latest/getting-started/integration.html#bundle-optimization" tagrtet="_blank">necessary components</a>.</p> </div> <div class="feature-chart feature-chart__right"> <img src="./img/tree-shaking.png" width="300" alt="Example of reduced bundle size from 48 KB to 14 KB" /> </div> </div> <div class="feature"> <div class="feature-text feature-text__pull-right"> <h3 class="subtitle"> <span class="pill pill__new pill__v3">New in 3.5</span> Scale stacking </h3> <p class="description">Layout boxes can be stacked and weighted in groups.</p> </div> <div class="feature-chart feature-chart__left feature-chart__pull-right"> <canvas id="v35box" height="200" width="300" aria-label="Chart with stacked scales"></canvas> </div> </div> <div class="feature"> <div class="feature-text"> <h3 class="subtitle"> <span class="pill pill__new pill__v3">New in 3.4</span> Subtitle plugin </h3> <p class="description">A secondary title <a href="https://www.chartjs.org/docs/latest/configuration/subtitle.html">plugin</a> with all the same options as main title.</p> </div> <div class="feature-chart feature-chart__right"> <canvas id="v34subtitle" height="200" width="300" aria-label="Pie chart with subtitle"></canvas> </div> </div> <div class="feature"> <div class="feature-text feature-text__pull-right"> <h3 class="subtitle"> <span class="pill pill__new pill__v3">New in 3.1</span> Line segment styling </h3> <p class="description">Line segments can be styled by any user defined criteria.</p> </div> <div class="feature-chart feature-chart__left feature-chart__pull-right"> <canvas id="v31segments" height="200" width="300" aria-label="Line segments with different colors"></canvas> </div> </div> <div class="feature"> <div class="feature-text"> <h3 class="subtitle"> <span class="pill pill__new pill__v3">New in 3.0</span> Advanced animations </h3> <p class="description">Transitions of every property in every element can be configured individually and independently.</p> </div> <div class="feature-chart feature-chart__right"> <canvas id="v3anims" height="200" width="300" aria-label="Chart with lines that move and animate in different ways"></canvas> </div> </div> <div class="feature"> <div class="feature-text feature-text__pull-right"> <h3 class="subtitle"> <span class="pill pill__new pill__v3">New in 3.0</span> Performance! </h3> <p class="description">Numerous performance enhancements have been introduced. This example has 1M (2x500k) points with the new <a href="https://www.chartjs.org/docs/latest/configuration/decimation.html">decimation plugin</a> enabled.</p> </div> <div class="feature-chart feature-chart__left feature-chart__pull-right"> <canvas id="v3perf" height="200" width="300" aria-label="Chart with 1 million data point"></canvas> </div> </div> <div class="feature"> <div class="feature-text"> <h3 class="subtitle"> <span class="pill pill__new">New in 2.0</span> Mixed chart types </h3> <p class="description">Mix and match bar and line charts to provide a clear visual distinction between datasets.</p> </div> <div class="feature-chart feature-chart__right"> <canvas id="mixed-chart" height="200" width="300" aria-label="Bar chart overlayed on top of an area chart"></canvas> </div> </div> <div class="feature"> <div class="feature-text feature-text__pull-right"> <h3 class="subtitle"> <span class="pill pill__new">New in 2.0</span> New chart axis types </h3> <p class="description">Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease.</p> </div> <div class="feature-chart feature-chart__left feature-chart__pull-right"> <canvas id="axis-chart" height="200" width="300" aria-label="Area chart with a logarithmic x axis"></canvas> </div> </div> <div class="feature"> <div class="feature-text"> <h3 class="subtitle"> <span class="pill pill__new">New in 2.0</span> Animate everything! </h3> <p class="description">Out of the box stunning <a href="https://www.chartjs.org/docs/latest/configuration/animations.html">transitions</a> when changing data, updating colours and adding datasets.</p> </div> <div class="feature-chart feature-chart__right"> <canvas id="animate-chart" height="200" width="300" aria-label="Circles animate as they change position, size, and color"></canvas> </div> </div> </div> <hr/> <div class="feature-small-container fade-in animation-delay__7"> <div class="feature-small"> <div class="feature-icon"> <img src="./img/open-source.svg" alt="" /> </div> <h4 class="subtitle subtitle__small">Open source</h4> <p class="description description__small">Chart.js is a community maintained project, contributions welcome!</p> </div> <div class="feature-small"> <div class="feature-icon"> <img src="./img/chart-types.svg" alt="" /> </div> <h4 class="subtitle subtitle__small">8 Chart types</h4> <p class="description description__small">Visualize your data in 8 different ways; each of them animated and customisable.</p> </div> <div class="feature-small"> <div class="feature-icon"> <img src="./img/canvas-icon.svg" alt="" /> </div> <h4 class="subtitle subtitle__small">HTML5 Canvas</h4> <p class="description description__small">Great rendering performance across all modern browsers (IE11+).</p> </div> <div class="feature-small"> <div class="feature-icon"> <img src="./img/responsive.svg" alt="" /> </div> <h4 class="subtitle subtitle__small">Responsive</h4> <p class="description description__small">Redraws charts on window resize for perfect scale granularity.</p> </div> </div> <hr/> <div class="link-container fade-in animation-delay__7"> <h2 class="subtitle"> <a href="https://github.com/chartjs/Chart.js" target="_blank">Find Chart.js on GitHub</a> or <a href="./docs"> Read detailed documentation</a> </h2> </div> </div> <footer class="fade-in animation-delay__8"> <div class="footer-logo"> <img src="./img/icon.svg" alt="" /> </div> <p class="footer-note">Chart.js was built from the hard work of all <a href="https://github.com/chartjs/Chart.js/contributors" target="_blank">these contributors.</a> </footer> <script async src="./build.js"></script> </body> </html>