Give your Divi Chart module X-axis and Y-axis labels their own font families, weights, sizes, and colors. This makes category and numeric labels easier to distinguish and helps the chart fit your site's visual style.
Divi does not include font controls for the two Chart module axes. To address this, our Axis Label Font feature adds separate controls so you can style each axis independently.
Customize X and Y Axis Label Fonts in the Divi Chart Module using the Axis Label Font Feature
This method uses the Axis Label Font feature to add separate controls for the X-axis and Y-axis label font family, weight, size, and color. You'll configure each axis in the Chart module's Design settings, then check the result in the Visual Builder and on the published page.
The Axis Label Font feature is available in both our standalone Axis Label Font plugin and Divi Booster. If you already have Divi Booster installed, you don't need to install the standalone plugin.
This method is compatible with Divi 5 and has been tested on that version.
Accessing the Axis Label Font feature
The Axis Label Font feature is included in Divi Booster. If you already own Divi Booster, you can use the feature without installing any additional plugin.
If you don't have Divi Booster and only want the Axis Label Font functionality, you can purchase the standalone Axis Label Font plugin below.
Already using Divi Booster?
You can follow the instructions below using the Axis Label Font settings provided by Divi Booster. The settings and functionality described in this guide are the same whether you're using the standalone Axis Label Font plugin or Divi Booster.
Open the Chart module's axis label settings
Open the settings for the Chart module you want to edit. Select the "Design" tab, then expand the "Axis Labels" settings group.
Set the X-axis label font
In the expanded "Axis Labels" group, locate the "X Axis Label Font" controls. Choose a font family, weight, text size, and color that suit your design. In this example, we use Arial, Semi Bold (600), 18px, and #155E75.
Set the Y-axis label font
In the "Y Axis Label Font" controls, choose the font family, weight, text size, and color that best fit your chart. In this example, we use Georgia, Bold (700), 16px, and #7A3E00.
Preview the axis label styles
Review the chart preview in the Visual Builder. Confirm that the horizontal X-axis labels and vertical Y-axis labels each reflect their own selected font family, weight, size, and color.
Save and publish your changes
When the preview looks correct, open the save options dropdown in the bottom page bar and select "Save & Publish".
Check the result on the live page
Exit the Visual Builder to open the published page. Check the chart's horizontal category labels and vertical numeric labels to confirm that your selected styles are visible on the front end. The two axes should retain their independent styling, as shown in the example.
Conclusion
Your Chart module now uses independent font styling for its X-axis and Y-axis labels, both in the builder preview and on the live page. If you are trying to customize another part of the chart, leave a comment or get in touch and let us know what you need.
0 Comments