Drupal 8: Add Charts Module as a Paragraph field

This article was inspired by https://www.vardot.com/en/ideas/technology-posts/guide-drupal-charts-field-formatter and it is intended for who knows Drupal 8 and Paragraph Module ( https://www.drupal.org/project/paragraphs)

Drupal charts module works with different Javascript chart libraries. In our case, I'm going to use Highchart ( https://www.highcharts.com/ )

Paragraph works very well with different kind of Drupal entities (user, taxonomy, node, etc). In our case we will work with node entity, "Article" type.

1 — Adding modules

Assuming you already have a Drupal instance with paragraph module installed, we have to install bellow modules:

• Charts (https://www.drupal.org/project/charts)
• TableField (https://www.drupal.org/project/tablefield)
• Charts Field Formatter (https://www.drupal.org/project/charts_field_formatter)

To install those modules, you can use Drupal extend page

or you can install by command line using composer. E.g. composer require drupal/charts . Remind yourself you have to run composer command in the folder where composer.json belongs.

2 — Adding Highchart library

• in your Drupal folder, go to the folder docroot/modules/contrib/charts/modules/charts_highcharts/ .
• open README.txt file. Inside this file there are instructions of how to install js library using Composer. You have to follow the instructions. Pay attention that installter-paths sections must be placed inside extra section in your composer.json file. The extra section lives in the same level of repositories . The composer.json file below is an example where should be sections

3— Configuring modules

3.1 — Charts

• go to the page admin/config/content/charts
• on "Chart type" filed choose "Line". Don't worry at this moment :D! You will use different charts in your entity instances. We have to choose "Line" options just for standard configurations
• on "Charting Library" field, select "Hightcharts" option
• save configurations

3.2 —TableField

• go to the page admin/config/content/tablefield
• on “CSV Separator” field type comma (,)
• on “Default Number of Table rows” field type 3
• on “Default Number of Table columns” field type 2
• save

4— Creating a Paragraph type for charts

• go to the page admin/structure/paragraphs_type
• click [Add Paragraph type] button
• on "Label" field type "charts" and save
• On next page, click [add Field] button
• on "New field" dropdown select "TableField", fill "Label" field and save.
• On next page, just save
• And On next page, just save again

If everything goes well, you will see below page

Now you have to change field chart (E.g. field_my_chart) display mode to "Charts". On above page, click on "Display mode" (Gerenciar exibição) tab .

On "format" Dropdown, change from "Tabular View" to "Charts". After that, save.

However, as you've noticed on charts page configuration (admin/config/content/charts), there are many charts types available to use. So, we have to enable in our paragraph to choose what kind of chart we want to render when a entity instance (E.g. node) is created.

So, let's do it:

• go to paragraph type manager fields (admin/structure/paragraphs_type/chart/fields)
• click [add Field] button.
• on “New field” dropdown select “text list”
• on “Label” field fill Chart Type . The field machine name must be field_chart_type
• save
• On next page, in "Allowed values" field, paste below values:

line|Line
pie|Pie
area|Area
bar|Bar
column|Column
donut|Donut
gauge|Gauge
scatter|Scatter
spline|Spline

• save
• On next save, save again

If everything goes well, you will see below page

5 —Creating a node with chart paragraph type

• go to "Article" manage field page (admin/structure/types/manage/article/)
• click [add Field] button.
• on “New field” dropdown select “Paragraph”
• on “Label” field type Paragraph . The field machine name must be field_paragraph
• save
• On next page, save
• On next page, select paragraph type "Charts"
• Save

Now lets create a "Article" content

• go to create article form (node/add/article)
• fill node title
• on Paragraph área, click "Add Button"
• on present modal, select "Chart"
• on "Table Caption" field, fill the name of your chart
• on the right table (2 fields per row and 3 fields per column), the first row is the your table header. To easily understand, in the first row, type "Item" in first column and type "Value" in second column
• in the second row, type bananain the first column and type 60 in the second column
• in the third row, type applein first column type 40 in second column
• on "Chart type" field selectbox, choose "pie" option
• save your node

If everything goes well, you will see pie char on node view page

I hope this article is helpful to you. If you have any questions, leave a comment bellow ;)