Chart Design

Colour Palettes for Charts

Colour schemes for charts can involve long lists of colours. To make that easier to manage, we have some special extensions to the standard concrete5 colour picker. 

In most cases, colour palettes and point styles can be applied by

  • Row - Each row uses the next line of the colour palette or point style. All columns in a row are styled the same. You can see this in use in most of our basic examples.
  • Column - Each column uses the next line of the colour palette or point style. All rows are styled the same
  • Row and Column - Styles are used sequentially though rows and columns. You can see this in action in the basic example doughnut chart.

In all cases, when we get to the end of a list of styles or colours, we start again from the beginning. 

Colour Palette

Manage entire columns of colours

Effective charts need nicely designed palettes of colours to help convey their information. UCP Charts supports configuring colours individually and by paste / import of lists of colours.

In additions to designing and inputting colours individually, each colour list in UCP Charts also provides a toolbar to help manage the colour list as a whole. As a starting point, you can make a list from your corporate design palette or use an online palette generating tool such as one of the tools listed below. Then copy your list of colours and in the chart edit tab use the column paste control to import the list to the chart.

The import processing can parse and extract colours from pretty much any export format from the online tools including fragments of HTML, SVG, CSS, LESS, SASS or just a plain text list of #hex codes, rgb, rgba or hsl values. Hey presto - a pre-designed list of colours in your chart.

The colour column tools also provide an export / copy tool to copy between columns and a bulk transparency and lightness/darkness tool to quickly adjust transparency and lightness/darkness for an entire column of colours. A typical use is to import a palette of line or border colours, then copy that list to the fill colour and add some transparency and/or lighten the fill colours.

Internally, the export / copy tool manages a current list of colours in browser storage and pre-populates the import / paste dialog and the colour picker palette. Having imported and perfected a charting colour scheme, you can then easily copy and reuse the colours between charts and between sites.

Global sort and shuffle

Our other global control is . This opens a sub menu for global sorting and shuffling the rows of colours. Unlike the individual column toolbars, these tools operate on entire rows of colours, so keeping fill and outline colours together.

random - Random shuffle of the rows of colours. Use with caution as randomization is a one-way process.

reverse - Reverse the rows of colours. Reverse again to return to the original sequence

Row controls

The remaining controls operate on individual rows of colour to add, remove and sort by drag and drop.

- Delete row.

- Add row, copying colours from current row or last row.

- Drag row up/down to sort.

Some useful colour palette resources

These resources have all been tested to create palettes of colour that can be imported by UCP Charts. The colours from these resources can be text copied using the cursor on their text values, or exported and the exported text copied. As already noted, the import processing of UCP Charts can parse and extract colours from pretty much any export format you can extract from these tools.

Fonts for Charts

Charts 'inherit' their fonts from the page theme and how it styles the enclosing area and block design. If you require different font sizes, faces or colours, set them in block or area design and the chart will follow.

The chart will use the same design for all fonts within the chart, save that smaller text is 70% the size of the larger text.


Chart key

The Chart From Table content display provides some options to enable automated generation of a key within the chart canvas. When this is selected, a best guess of what key you need is made from the data and chart type and colour swatches generated with the key item labels.

Within the Chart From Table content display the only control you have is which side of the chart the key is positioned on, what sequence it is in, or which items appear in the key.

To provide a much more flexible key generation, we have an associated Chart Key From Table content display. By disabling the key that would be auto-generated with the chart and Using a second Universal Content Puller block, Chart Key From Table can be set up with the same source data as the chart and configured to generate the key you require. 

Chart Key From Table also attaches marker classes to each item and has an option to skip outputting the generated key styles. With that in mind, you can also use your own CSS to augment the key styles or to completely take over the key styling.

Additional Pages

About this Sidebar

Creating a sidebar for a group of pages without messing about with stacks is an easy use-case for Universal Content Puller.

This sidebar is edited once, within the main addon page for Universal Content Puller.

It is then pulled into all UCP sub-pages using a UCP block.

The Content Source is Parent Page, set to pull the Sidebar area from 2 pages from the top. The Content Transform is Selector, set to remove container and row classes that, when unnecessarily nested, could mess up the Bootstrap grid. The Content Display is Plain, which just outputs the transformed text.

In the advanced settings, sanitization is disabled as we trust the source page and don't want to strip out any formatting or functionality from the pulled sidebar.