Introduction
The Extension section includes three Chartist particles assigned to the extension-a, extension-b, and extension-c module positions.
Here is a breakdown of the module(s) and particle(s) that appear in this section:
Section Settings
Option |
Setting |
Layout |
Boxed |
CSS Classes |
Blank |
Tag Attributes |
Blank |
Chartist (Particle) 1
The Chartist particle is a Gantry 5 Particle module placed within the extension-a module position. Adding a particle to a module position can be done by creating a Gantry 5 Particle module, adding the particle using the settings found in the section below, and assigning it to the position.
Module Position Particle Settings
Particle Settings
Option |
Setting |
Particle Name |
FP Extension A |
Key |
extension-a |
Chrome |
gantry |
Block Settings
Option |
Setting |
CSS ID |
Blank |
CSS Classes |
fp-extension-a |
Variations |
Blank |
Tag Attributes |
Blank |
Fixed Size |
Unchecked |
Block Size |
33.3% |
Chartist Particle Settings
Particle Settings
Option |
Setting |
Particle Name |
Chartist |
CSS Classes |
title-center |
Title |
Line Chart |
Chart Type |
Line |
Labels Data |
'1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12' |
Series Data
[12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
[4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
[5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4]
Chartist (Particle) 2
The Chartist particle is a Gantry 5 Particle module placed within the extension-b module position. Adding a particle to a module position can be done by creating a Gantry 5 Particle module, adding the particle using the settings found in the section below, and assigning it to the position.
Module Position Particle Settings
Particle Settings
Option |
Setting |
Particle Name |
FP Extension B |
Key |
extension-b |
Chrome |
gantry |
Block Settings
Option |
Setting |
CSS ID |
Blank |
CSS Classes |
fp-extension-b |
Variations |
Blank |
Tag Attributes |
Blank |
Fixed Size |
Unchecked |
Block Size |
33.3% |
Chartist Particle Settings
Particle Settings
Option |
Setting |
Particle Name |
Chartist |
CSS Classes |
title-center |
Title |
Bar Chart |
Chart Type |
Bar |
Labels Data |
'Term 1', 'Term 2', 'Term 3', 'Term 4' |
Series Data
[5, 4, 3, 7],
[3, 2, 9, 5],
[1, 5, 8, 4]
Chartist (Particle) 3
The Chartist particle is a Gantry 5 Particle module placed within the extension-c module position. Adding a particle to a module position can be done by creating a Gantry 5 Particle module, adding the particle using the settings found in the section below, and assigning it to the position.
Module Position Particle Settings
Particle Settings
Option |
Setting |
Particle Name |
FP Extension C |
Key |
extension-c |
Chrome |
gantry |
Block Settings
Option |
Setting |
CSS ID |
Blank |
CSS Classes |
fp-extension-c |
Variations |
Blank |
Tag Attributes |
Blank |
Fixed Size |
Unchecked |
Block Size |
33.3% |
Chartist Particle Settings
Particle Settings
Option |
Setting |
Particle Name |
Chartist |
CSS Classes |
title-center |
Title |
Pie Chart |
Chart Type |
Pie |
Labels Data |
'30',' 35', '50', '35', '45' |
Series Data |
['CSS', 'PHP', 'jQuery', 'Twig', 'SCSS'] |