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.