Modules

Charts: plotting data inside a Divi section

3 min read Updated September 2026 Applies to: Lite & Pro

Charts is one Creative module covering several chart types, drawn with Chart.js. The library is registered as a dependency of the module’s own script, so it loads only on pages that hold a chart.

Draw a chart

  1. Add Charts to a row and set Chart Type.
  2. Enter the data. In the Divi 5 builder that is the Data table: the first column is the category, and every column after it is a series.
  3. Give it a Chart Title. It is the only label a visitor gets if the colours are hard for them to tell apart.
  4. Set the honesty controls: leave Begin At Zero on unless you have a reason, and leave Show Grid on so a reader can judge the values.
  5. Set Chart Height and, if the default palette clashes, list your own colours one per line in Custom Colors.
  6. Save and check the chart on a phone. A tall chart with many categories is unreadable narrow, and that is a data decision rather than a CSS one.

Choose a type

Chart Type offers Bar, Line, Area, Radar, Pie, Doughnut and Polar Area in both builders. In Divi 5 it also offers Scatter and Bubble, because those two plot points from two or three numbers per row and that needs a data table rather than a line of text.

Giving it data in the Divi 4 builder

There is no table there. The same data comes from two text areas:

  • Labels: one per line, which becomes the X axis or the slice labels.
  • Datasets: one per line, written as Sales: 12,19,3,5. Blank cells are skipped.

Both fields still exist in Divi 5, grouped under a legacy data heading for layouts that predate the table. The table wins as soon as it holds anything, so fill in one or the other, not both.

Options worth knowing

  • Custom Colors: one colour per line. Left empty, the module uses its own palette.
  • Show Legend: on by default. Turn it off when the chart has one series and the title already says what it is.
  • Show Grid and Begin At Zero: bar and line charts only. A truncated axis makes a small difference look enormous, which is the most common way a correct chart misleads.
  • Animate On Scroll: holds the drawing until the chart is in view, so the animation is seen rather than missed.
  • Chart Height and Border Width: the canvas height in pixels, from 150 to 600, and the width of the dataset border.