Dynamic Chart

Display charts with data from ACF, Metabox, etc through Brick’s Query loop feature. Supports multiple datasets, linear/logarithmic scales & easily customized and styled to match your site.

Intro

This element will be most useful for displaying relatively standard charts where the x-axis has text labels, and the y-axis value has numbers. The chart can either be used to display one data set, ie one line or one set of bars with different values, or multiple datasets, where dynamic data will be needed to fetch the values for each set.

For dynamic data, ideally, you’d be using an ACF repeater field, or similar, where you’d be looping through rows, with each row having new values from sub fields being plotted for each dataset. (tutorial coming).

Use Query Loop – If you’re wishing to use dynamic data to populate multiple datasets, set a query loop (for example an ACF repeater) to loop through rows for each set of data. This can then be added to the chart using Bricks’ built-in dynamic data options.

If not using any dynamic data, you can just add the number/labels in manually in the settings to plot a chart.

Data

Here’s where to add the data points, add as many data points as you need and fill in the fields inside each one. The three fields are..

  • Label – this is the labels across the x-axis (Jan, Feb, Mar etc)
  • Value – the corresponding value to plot in the y-axis. (20%, 50%, 90%). if using dynamic data, this is where you’d insert the custom field to populate the number for each dataset.
  • Data point color – If you’re NOT using multiple data sets, you may wish to change the colour across each data point. (if using multiple data sets, the colours will be changed across each dataset instead, see the bottom of the docs for a visual guide).

Chart Style

At the time of writing, there are currently two main chart styles available. Line and bar chart, each has it own settings. For the bar chart, the colours added will apply to the background colour of the bars, for the lines, they will apply to the points along the line, with the option to have the line a separate colour. (for multiple datasets the lines will take on the color of the corresponding dataset)

Line width/tension – the line style can be customised by changing the width, the colour and also the tension, which prevents the line from being straight and allows more of a curve.

AXES

Both the x-axis and y-axis can be customised, in terms of changing the grid colours, border colours and adding labels to the axis.

The y-axis has some extra settings relating to the data..

Y-axis type – Choose between linear (default) or logarithmic scale for the y-axis.

Begin at zero – By default the y-axis begins at zero, this may not be ideal depending on what data you’re showing and can be disabled.

Suggested min – Set a min value for the y-axis (only a suggestion, if there’s data lower than this number then it will adapt)

Suggested max – Set a max value for the y-axis (only a suggestion, if there’s data higher than this number then it will adapt)

Legends

If showing multiple datasets, legends can be added to the chart to show what each line/bar is referring to. The colours will automatically match the dataset colour. These can be positioned and aligned on any side of the chart.

Dataset Colours

When needing to add a different colour to each dataset, there are two options.

  • Using dynamic data – this is useful if you need the colour to be edited/added at the time that the data is added by custom fields. (ie the content editor has control)
  • Manually – this is useful if you instead which to create a colour palette for the chart to use, not connected to the datasets. This option means you can use your colour palette from inside Bricks rather than fetching the data.

A visual example to demonstrate the difference in applying colors either per data point or per dataset..

Using one dataset, it’s useful to change the colour per data point. For eg having a different colour for each month.

Using multiple datasets, it’s no longer useful to change the colour per data point. Instead, we change the colour per dataset. Here we have a different colour for each company, so the datasets can easily be compared visually. The legends use the dataset colours and can be used to filter the chart by clicking the legends.

Note – we’ll be looking to extend the use cases of this element over time. More chart types, features etc.