Chart.js is described as

Simple yet flexible JavaScript charting for designers & developers

The Shortcode Chart.js plugin we've created allows you to create simple animated charts using Chart.js in your Grav website. (Reload the page if you missed the animations.)

It installs in all the usual ways, and should be shortly available from the GPM so that you can intall it via the Admin plugin or the cli using gpm. In the meantime you can download it from our GitHub account, in the repo for the plugin.

This post is just about showing some typical examples of what the current release (v1.0.1 at this writing) can do. Which is simple charts with a single dataset (we'll be adding support multiple datasets).

A note about the example code shown, shortcodes start with a [ and then name of the short code e.g. chartjs as there is no way I'm aware of to include the open [ and the name without triggering the plugin the [ and closing ] have been omitted from the code blocks below. In addition the returns have been added to break the code over multiple lines for readability reasons - there should not be any returns/paragraph breaks in your shortcode.

Example #1 - A bar chart

chartjs type="bar" datapoints="76,29,5,10" datalabels="Booked, Available,
Reserved, Holidays" backgroundcolor3="orange" bordercolor3="yellow"
legend="false" responsive="false" style="margin:25px;"

A simple bar chart using the plugins default values for size (400 x 400px) and colors (LightGray and Gray), while overriding the color for the 3rd datapoint with orange fill and a yellow border.

If you hover over each of the bars you see an appropriate data balloon for each value in the chart.

Example #2 - same bar chart more options

chartjs name="bartest" width="350" height="200" type="bar" label="Oct. 2017"
datapoints="76,29,5,10" datalabels="Booked,Available, Reserved, Holidays"
backgroundcolor1="rgb(35, 82, 124)" backgroundcolor2="rgb(66, 165, 245)"
backgroundcolor3="rgb(255, 5, 5)" backgroundcolor4="rgb(50, 255, 5)"
bordercolor1="rgb(33, 80, 120);" bordercolor2="rgba(54, 162, 235, 1)"
bordercolor3="rgba(54, 162, 235, 1)" legend="false" responsive="false"
titledisplay="true" style="padding:10px 20% 10px 20%;"

You'll notice in this example we've added a few parameters, like:

• a name field (this is important, if you want to have more than one chart on a page, each chart needs its own unique name)
• a label (label="Oct. 2017" titledisplay="true")
• overriding the default width and height of the canvas
• different colours for each of the datapoints.

Example #3 - a pie chart

chartjs name="piechart" width="300" height="300" type="pie" label="Oct. 2017"
datapoints="76,29,5,10" datalabels="Booked, Available, Reserved, Holidays"
backgroundcolor1="rgb(35, 82, 124)" backgroundcolor2="rgb(66, 165, 245)"
backgroundcolor3="rgb(255, 5, 5)" backgroundcolor4="rgb(50, 255, 5)"
bordercolor1="rgb(33, 80, 120);" bordercolor2="rgba(54, 162, 235, 1)"
bordercolor3="rgba(54, 162, 235, 1)" legend="false" titledisplay="true"
titleposition="bottom" responsive="false" style="clear:both;padding:15px 25%"

For the pie chart all we've had to change was:

• setting the type to type="pie"
• we've also move the title to the bottom of the pie chart titleposition="bottom"

Wrap-up

You can read a bit more in the plugin's README on GitHub.
While we only have a few options in the current 1.0 release we expect to add support for new options as the need arises. In the mean time you can look at the Chart.js Samples or the Chart.js Docs to get a idea of what is possible.

# Header Image from Pexels.com