Style Chart Grid Lines and Axis Lines in Divi's Chart Module using the Chart Grid Line Styles Feature

This method adds color and width controls to the Chart module's "Grid Lines" settings. On Line, Bar, Area, Scatter, and Bubble charts, you can style the horizontal and vertical grid lines and axis lines independently. On Radar and Polar Area charts, the feature provides controls for the radial grid lines.

You can then check the result in the Visual Builder and on the published page.

This method has been tested on, and is compatible with, Divi 5.

Accessing the Chart Grid Line Styles feature

The Chart Grid Line Styles feature is included in Divi Booster. If you already own Divi Booster, you can use the feature without installing any additional plugin.

Learn more about Divi Booster

If you don't have Divi Booster and only want the Chart Grid Line Styles functionality, you can purchase the standalone Chart Grid Line Styles plugin below.

Already using Divi Booster?
You can follow the instructions below using the Chart Styling settings provided by Divi Booster (v5.10 onwards). The settings and functionality described in this guide are the same whether you're using the standalone Chart Styling plugin or Divi Booster.

Open the Chart Module's Design Settings

Open the settings for the Chart module you want to style. Select the "Design" tab, then expand the "Grid Lines" section. This is where the feature's color and width controls appear.

Style the horizontal grid lines

Use "Horizontal Grid Lines Color" to choose the line color and "Horizontal Grid Lines Width" to set its thickness. Choose a color that provides enough contrast without competing with the chart data. For example, the horizontal grid lines in this guide use `#D7E3F4` with a width of `2px`.

Style the vertical grid lines

Use "Vertical Grid Lines Color" and "Vertical Grid Lines Width" to style the lines that run in the other direction. Choose the color and width that best fit your design. In this example, the vertical grid lines use `#93C5FD` with a width of `3px`.

Style the horizontal and vertical axis lines

The axis line controls are in the same "Grid Lines" section. For Line, Bar, Area, Scatter, and Bubble charts, use "Horizontal Axis Line Color" and "Horizontal Axis Line Width" to style the horizontal axis. Use the corresponding vertical axis line controls to style the vertical axis independently.

Choose colors and widths that make the axes easy to distinguish from the grid. For example, this guide uses `#0F172A` with a width of `3px` for the horizontal axis line.

Style radial grid lines on Radar and Polar Area charts

If you're working with a Radar or Polar Area chart, choose the chart type in the Chart module's "Chart Type" setting. Then open Design > Grid Lines and use "Grid Lines Color" and "Grid Lines Width" to style the radial grid. These controls apply to both Radar and Polar Area charts.

Choose values that keep the radial structure visible without overwhelming the data. In this example, the Radar chart uses `#155E75` with a width of `4px`.

Check the chart in the Visual Builder

Close the Chart module settings and review the chart in the Visual Builder. For a Line, Bar, Area, Scatter, or Bubble chart, confirm that the horizontal and vertical grid lines and axis lines use your chosen styles. As shown here, the example colors and line widths have been applied to the chart.

If you're styling a Radar or Polar Area chart, review the chart after closing its settings and confirm that the radial grid lines use your selected color and width. 

Publish and verify the chart

When the chart looks correct in the builder, save and publish the page, then exit the Visual Builder to open the live front-end page. Confirm that the published chart displays your selected grid and axis line styles rather than relying only on the builder preview.

For a Radar or Polar Area chart, open the published page and check that the radial grid lines remain consistent with the settings from the Chart module.