The Divi Chart module turns a simple table of data into a chart on your page. You type your labels and values into a spreadsheet-style editor, pick a chart type, and Divi draws it - no code, no third-party plugin. You can switch between nine chart types at any time without re-entering your data.
Add The Divi Chart Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row, which will show the list of all available Divi modules.Find the Chart module and click on it to load it. Alternatively, you can use the Search option to find it.
The Divi Chart Module Use Cases
Reporting results: Show revenue, traffic, or sign-ups over time in a line or bar chart on a client report or an about page.
Breaking down a total: Use a pie or doughnut chart to show how a budget, a market share, or a survey result splits up.
Comparing several things at once: Use a radar chart to score products, plans, or team skills across the same set of categories.
Choosing a chart type and entering your data
The Chart module comes with sample data already filled in, so you'll see a chart the moment you add it. Replace that sample data with your own in the Data table, then pick the Chart Type that suits it.
Your data always lives in one table. When you change the chart type, Divi keeps everything you typed and simply reads the columns differently. A small label above each column header tells you what that column is being used for right now - Category (labels), Series, Value, X axis, Y axis, Size, or Not Used - so you can always see how your table is being read.
Here's how each chart type reads the table:
Line, Area, Bar, Radar - The first column holds your category labels (months, product names, and so on). Every column after it is a separate series, so you can plot several lines or bar groups on the same chart.
Pie, Doughnut, Polar Area - The first column holds the slice labels and the second column holds the values. These types show one set of values at a time.
Scatter - The second column is the X axis and the third column is the Y axis.
Bubble - The second column is the X axis, the third is the Y axis, and the fourth sets each bubble's Size.
Note: Colors are set in the data table itself, not in the Design tab. Click the color swatch on a column (for Line, Area, Bar, and Radar) or on a row (for Pie, Doughnut, Polar Area, Scatter, and Bubble) to change it. Divi fills in a color for anything you leave unset, and moves your chosen colors across for you when you switch to a chart type that colors things the other way round.
In the Data table, you can add and remove rows and columns, drag rows to reorder them, move a column left or right, and hide a column you don't want plotted. A hidden column stays in your table - it's just left out of the chart.
The Chart Module Settings Breakdown
Once you've added the Chart module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
The Content tab is where you enter your data, choose the chart type, and write the text that appears on the chart.
Chart - Everything the chart is built from:
Chart Type - Choose how your data is drawn: Line (default), Area, Bar, Radar, Pie, Doughnut, Polar Area, Scatter, or Bubble.
Data - Open the table editor to enter your chart's labels, values, and colors, or import the data from a CVS file by clicking the Import CVS button.
Note: WordPress, out of the box, will block the upload of .cvs files. To learn more on how to properly set up WordPress to allow .cvs uploads, please check out How to Upload CVS file Types article.
Title - Set the chart's title text.
Subtitle - Set the chart's subtitle text.
Legend Title - Set the heading that appears above the legend.
Elements - Show or hide the pieces drawn on the chart:
Show Title - Display the chart title. On by default.
Show Subtitle - Display the chart subtitle. On by default.
Show Legend - Display the legend. On by default.
Show Legend Title - Display the legend title. Off by default.
Show Tooltip - Display a tooltip with the value when a visitor hovers over the chart. On by default.
You can also add nested modules to the Chart module.
Link - Make the entire Chart module clickable, creating a seamless way to direct users to another page, section, or external site.
Background - Choose the Chart module's background styles.
Loop - Enables the loop builder.
Order - Choose the order in which the Chart module appears inside a Flexbox and Grid layout.
Meta - Choose the Chart module's Label text and force its Visibility inside the Visual Builder.
The Design tab
All the design styles and options for the Chart module are in this tab. The Title Text, Subtitle Text, Legend, and Tooltip groups only appear while the matching element is switched on in the Content tab's Elements group.
Layout - Choose how the Chart module is displayed and how its content is arranged, using Flex, Grid, or Block layout options.
Title Text - Choose the chart title's styles.
Subtitle Text - Choose the chart subtitle's styles:
Legend - Choose the legend's styles:
Title Text - Choose the legend title's font, weight, italic style, color, size, and line height.
Label Text - Choose the legend labels' font, weight, italic style, color, size, and line height.
Layout - Set the Legend Position (Top (default), Left, Bottom, Right, or Chart Area) and the Legend Align (Start, Center (default), or End).
Markers - Style the small color markers next to each legend label. Set the Legend Label Padding, and turn on Use Point Style to draw the marker as a Circle, Cross, Star, or Triangle instead of a box. When Use Point Style is off, set the Legend Label Box Width and Legend Label Box Height instead.
Tooltip - Choose the styles for the tooltip that appears on hover:
Title Text - Choose the tooltip title's font, weight, italic style, color, size, and line height.
Body Text - Choose the tooltip body's font, weight, italic style, color, size, and line height.
Box - Set the tooltip's Background Color, Border Color, Border Width, Corner Radius, and Padding.
Color Boxes - Turn Display Color Boxes on or off to show a small color swatch inside the tooltip, and set its Width and Height.
Sizing - Choose the Chart module's sizing.
Spacing - Choose the Chart module's spacing.
Border - Choose the Chart module's border styles.
Box Shadow - Choose the Chart module's Box Shadow styles.
Filters - Choose the Chart module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Chart module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Chart module's animation styles.
Pro tip: Open the Tooltip group and Divi shows you a live tooltip on the chart while you style it, so you can see your changes without hovering.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
Attributes - Assign a CSS ID, reusable CSS classes, or custom HTML attributes to the element. Use these to apply advanced styling via your child theme's stylesheet or Divi's custom CSS settings.
CSS - Allows you to add custom CSS code to fine-tune your Chart module, including a Chart Canvas field that targets the chart area itself.
HTML - Choose the semantic HTML tag for the Chart module.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Interactions - Create custom interactions, such as showing or hiding the Chart, and many more.
Visibility - Choose the Chart module's visibility based on different devices.
Transitions - Choose how long the Chart module's animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Chart module's placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Chart module behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
