Overview of the Bar Chart module

This page shows you how to add the Bar Chart module to your page and explains every setting in its Content, Design and Advanced tabs, with screenshots. The Bar Chart module turns your data into an animated bar chart, with a legend, grid lines and value prefixes or suffixes. For more details, view the demo.

How to add the Bar Chart module to your page

1. Open your page in the Divi Visual Builder.
2. Click the gray (+) icon inside a row to add a new module.
3. Search for DP Bar Chart in the module search box.
4. Click the module to insert it. Its settings open on the right.

Content tab settings

The Content tab holds the module’s own settings, grouped in the toggles below. Link, Background and Element Label are the standard Divi options.

Use Add New Bar Chart Item to add items. Click an item in the list to open its own settings; drag items to change their order.

Content

• Title: Define the title which will appear in the active state.
• Value Prefix: Text to show before each number, e.g. a currency symbol like $.
• Value Suffix: Text to show after each number, e.g. a unit like % or kg.

Bar Chart Item settings

Each bar chart item has its own settings. Click an item in the list to open them.

Content

• Label: Enter the label for the bar to show on bar chart.
• Value: Enter the value/digits for the bar to show on bar chart.
• Bar Background Color: Define a custom background color for the bar.
• Bar Border Color: Define a custom border color for the bar.

Design tab settings

The Design tab lets you style each part of the module:

• Bar Chart: styling options for the bar chart.
• Sizing, Spacing, Border, Box Shadow, Filters, Transform, Animation: the standard Divi design options for the whole module.

Advanced tab settings

The Advanced tab has the standard Divi options: Attributes (add a CSS class or ID), CSS, HTML, Conditions, Interactions, Visibility, Transitions, Position and Scroll Effects.