<linkrel=apple-touch-iconsizes=180x180href=/congo/apple-touch-icon.png><linkrel=icontype=image/pngsizes=32x32href=/congo/favicon-32x32.png><linkrel=icontype=image/pngsizes=16x16href=/congo/favicon-16x16.png><linkrel=manifesthref=/congo/site.webmanifest><metaproperty="og:title"content="Charts"><metaproperty="og:description"content="Guide to Chart.js usage in Congo"><metaproperty="og:type"content="article"><metaproperty="og:url"content="https://jpanther.github.io/congo/samples/charts/"><metaproperty="article:section"content="samples"><metaproperty="article:published_time"content="2019-03-06T00:00:00+00:00"><metaproperty="article:modified_time"content="2019-03-06T00:00:00+00:00"><metaproperty="og:site_name"content="Congo"><metaname=twitter:cardcontent="summary"><metaname=twitter:titlecontent="Charts"><metaname=twitter:descriptioncontent="Guide to Chart.js usage in Congo"><scripttype=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Content Samples","name":"Charts","headline":"Charts","description":"Guide to Chart.js usage in Congo","abstract":"Congo includes Chart.js for powerful charts and data visualisations.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/samples\/charts\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2019","dateCreated":"2019-03-06T00:00:00\u002b00:00","datePublished":"2019-03-06T00:00:00\u002b00:00","dateModified":"2019-03-06T00:00:00\u002b00:00","keywords":["chart","sample","graph","shortcodes"],"mainEntityOfPage":"true","wordCount":"82"}]</script><metaname=authorcontent="Congo"><linkhref=https://twitter.com/rel=me><linkhref=https://facebook.com/rel=me><linkhref=https://linkedin.com/rel=me><linkhref=https://youtube.com/rel=me><scriptdefertype=text/javascriptsrc=/congo/js/chart.bundle.7b4f80dd7ad96f704adb7753856a8dedf445bee88167c9555f477b220cb23e9683af9cc943a845eb5f9e3eea8b431b2390a99c83b7513632c2581fe1438b0822.jsintegrity="sha512-e0+A3XrZb3BK23dThWqN7fRFvuiBZ8lVX0d7IgyyPpaDr5zJQ6hF61+ePuqLQxsjkKmcg7dRNjLCWB/hQ4sIIg=="></script></head><bodyclass="flex flex-col h-screen px-6 m-auto text-lg leading-7 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32"><divid=the-topclass="absolute flex self-center"><aclass="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"href=#main-content><spanclass="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400">↓</span>Skip to main content</a></div><headerclass="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10"><navclass="flex items-start justify-between sm:items-center"><divclass="flex flex-row items-center"><aclass="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"rel=mehref=/congo/>Congo</a></div><ulclass="flex flex-col list-none ltr:text-right rtl:text-left sm:flex-row"><liclass="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><ahref=/congo/docs/title=Documentation><spanclass="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Docs</span></a></li><liclass="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><ahref=/congo/samples/title="Content Samples"><spanclass="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Samples</span></a></li><liclass="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><ahref=/congo/users/title=Users><spanclass="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Users</span></a></li><liclass="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><ahref=https://github.com/jpanther/congotitletarget=_blank><spanclass="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"><spanclass="relative inline-block align-text-bottom icon"><svg
<spanclass="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"><spanclass="relative inline-block align-text-bottom icon"><svgaria-hidden="true"focusable="false"data-prefix="fas"data-icon="search"class="svg-inline--fa fa-search fa-w-16"role="img"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><pathfill="currentcolor"d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9.0 208 0S0 93.1.0 208s93.1 208 208 208c48.3.0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9.0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7.0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7.0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg></span></span><spanclass="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"></span></button></li></ul></nav></header><divclass="relative flex flex-col grow"><mainid=main-contentclass=grow><article><headerclass=max-w-prose><olclass="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><liclass="inline hidden"><aclass="hover:underline decoration-neutral-300 dark:underline-neutral-600"href=/congo/>Welcome to Congo! :tada:</a><spanclass="px-1 text-primary-500">/</span></li><liclass=inline><aclass="hover:underline decoration-neutral-300 dark:underline-neutral-600"href=/congo/samples/>Content Samples</a><spanclass="px-1 text-primary-500">/</span></li><liclass="inline hidden"><aclass="hover:underline decoration-neutral-300 dark:underline-neutral-600"href=/congo/samples/charts/>Charts</a><spanclass="px-1 text-primary-500">/</span></li></ol><h1class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">Charts</h1><divclass="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><divclass="flex flex-row flex-wrap items-center"><timedatetime="2019-03-06 00:00:00 +0000 UTC">6 March 2019</time><spanclass="px-2 text-primary-500">·</span><spantitle="Reading time">1 min</span></div></div></header><sectionclass="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><divclass="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><divclass="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><detailsopenclass="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summaryclass="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><divclass="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><navid=TableOfContents><ul><li><ahref=#bar-chart>Bar chart</a></li><li><ahref=#line-chart>Line chart</a></li><li><ahref=#doughnut-chart>Doughnut chart</a></li></ul></nav></div></details></div></div><divclass="min-w-0 min-h-0 max-w-prose grow"><p>Congo includes support for Chart.js using the <code>chart</code> shortcode. Simply wrap the chart markup within the shortcode. Congo automatically themes charts to match the configured <code>colorScheme</code> parameter, however the colours can be customised using normal Chart.js syntax.</p><p>Refer to the <ahref=https://jpanther.github.io/congo/docs/shortcodes/#chart>chart shortcode</a>
docs for more details.</p><p>The examples below are a small selection taken from the <ahref=https://www.chartjs.org/docs/latest/samplestarget=_blankrel="noreferrer noopener">official Chart.js docs</a>
. You can also <ahref=https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/charts.mdtarget=_blankrel="noreferrer noopener">view the page source</a>
on GitHub to see the markup.</p><h2id=bar-chartclass="relative group">Bar chart <spanclass="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#bar-chartaria-label=Anchor>#</a></span></h2><divclass=chart><canvasid=895316742></canvas>
