Editable Charts in DuoCMS8

28th October 2022

When explaining complex information to your web audience, it’s often not what you say, but the way you say it. To help you achieve greater impact and understanding to the information you present on your DuoCMS website we’ve added a collection of chart tools. If you’re a school, trying to explain the improvements in this years grades, or a business explaining your latest pricing structure, graphs & charts can be an invaluable way of turning dull numbers into engaging illustrations.

Chart Types and Styles

We have included a number of chart types by default and a simple rainbow based colour palette. We’re also able to customise the palette on a per site basis, allowing us to tailor it to align with your corporate identity.

Editing

The editing process couldn’t be simpler. You simply drag and drop the chart into the page, add a list of labels, values and colours, then choose your chart type. The colours default to a set of 7 rainbow colours, but can be updated via a built in colour picker.

Charts use the same layout tools as images, so can be given an alignment to sit alongside text, as well as custom heights widths and margins.

We’ve also made them responsive by default, so they’ll scale to fit on smaller screens.

Finally, we’ve even added some code to detect if the chart is visible before running the animation. So if you place these on a long page, the animation won’t be missed, making the page feel more dynamic.

Credit

This feature is based on the open-source library chart.js - many thanks to them for this excellent chart library,