Charts

The Chart Bric brings the power of the open source Javascript library charts.js to Blocs. With support for bar, line, pie, doughnut, polar and radar chart types, this Bric can be used in a wide variety of ways to display a wide range of data on your website.

The Chart Bric does not come bundled with the Blocs application and can be purchased separately here.

Requirements

The Chart Bric requires MacOS 12 (Mojave) minimum and will work with both Blocs 4 and 5.

How to Install

All add-ons can be installed into Blocs using the Extension Manager. If you are unfamiliar with installing add-ons, you can follow this guide.

Appearance

The appearance controls are used to set the visual appearance of a chart.

Style

The style drop-down can be used to select the visual style of a chart. You can select from Bar, Line, Pie, Doughnut, Polar Area, Radar.

Layout

The layout control is only available for Bar and Line chart styles, This drop-down can be used to set the layout of a chart to either vertical (default) or horizontal. This control is hidden when any other chart style is selected.

Background Colour

This colour well can be used to set the background colour of a chart.

Text Colour

This colour well can be used to set the text colour of a chart.

Border Colour

This colour well can be used to set the border colour of a chart.

Grid Colour

This colour well can be used to set the grid colour of a chart.

Legend

The legend controls are used to set characteristics of the chart legend.

Position

This drop-down is used to set the position of the legend. It can be set to either top, bottom, left or right.

Show Legend

This checkbox is used to toggle the visibility of the chart legend.

Data

The data controls are used to set the data that is populated in a chart. Depending on the style of chart you are creating, it’s possible to populate both singular and multiple sets of data into a single chart.

Labels

This text input field is used to set the label array that is used to populate the content the X of Y axis of a chart. This value should consist of the same number of items as the Values field. Each value must be separated by a comma.

Label Short Codes

Blocs supports quickly generating label arrays for common data types such as months or the year. The following short codes can be used in the Labels field to quickly generate corresponding label data, e.g. typing *q1 into the Labels field will automatically generate January, February, March.

*months = Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec

*q1 = January, February, March

*q2 = April, May, June

*q3 = July, August, September

*q4 = October, November, December

*socials = Facebook, Instagram, LinkedIn, Reddit, SnapChat, TikTok, Twitter, Youtube

*crypto = Bitcoin, Ethereum, Tether, XRP, Cardano, Dodgecoin, Solona, Shib, Litecoin, Stellar

*europe = list European countries

*states = list American States

Data Sets

This drop-down can be used to select a data set, making it possible to edit the values and colours applied to it. This option also allows adding and removing additional data sets.

Label

This text field can be used to set the label that is used in the legend for the current data set.

Values

This text input field is used to set the value array for the current data set that is used to populate the content of a chart. This value array should consist of the same number of items as the Labels field. Each value must be separated by a comma.

Fill Colour

This colour well can be used to set the fill colour of a data set. This option is only available for Bar, Line and Radar charts.

Border Colour

This colour well can be used to set the border colour of a data set. This option is only available for Bar, Line and Radar charts.

Seg Colours

This text input field is used to set the colour value array for the current data set that is used to populate the content of a chart. This value array should consist of the same number of items as the Labels field. Each value must be separated by a comma. You can use either HEX or RGBA colour values. This option is only available for the pie, doughnut and polar area chart styles.

You can read more about HEX and RGBA colour values here.

Scale X

The Scale X controls are used to customise the appearance of the X axis of a chart.

Label

This text input field can be used to set the label for the X axis of a chart.

Show Scale

This checkbox is used to toggle the visibility of the X axis details of a chart.

Scale Y

The Scale Y controls are used to customise the appearance of the Y axis of a chart.

Label

This text input field can be used to set the label for the Y axis of a chart.

Minimum Value

This text input field can be used to set the preferred minimum value for the Y axis of a chart. This value must be numeric and can be either positive (100) or negative (-100).

Maximum Value

This text input field can be used to set the preferred maximum value for the Y axis of a chart. This value must be numeric and can be either positive (100) or negative (-100).

Step Size

This text input field can be used to set the numerical step size of the charts Y axis. Changing this value will affect the numbers that run on the Y axis. The default step value is 20, this means the chart will show a step on the Y axis in increments of 20 e.g. 20, 40, 60, 80. If this value is changed to 10, it would display double the steps listing them 10, 20, 30, 40, 50, 60, 70 ,80. This value must be numeric.

Show Scale

This checkbox is used to toggle the visibility of the Y axis of a chart.

Animation

The animation controls can be used to customise the way a chart is animated when it is previewed on a live website.

Chart animations can only be viewed when in preview mode or when a site is exported/published and loaded via a web browser.

Delay

This text input field is used to customise the delay of a chart animation. The value should be numerical and is measured in milliseconds e.g. 1000 = 1 second.

Duration

This text input field is used to customise the duration of a chart animation. The value should be numerical and is measured in milliseconds e.g. 1000 = 1 second.. If you require no animation on a chart, set this value to 0.

Updated on 15th February 2023

Was this article helpful?

Related Articles