---
title: "How to Add a Chart in WordPress?"
url: https://nexterwp.com/docs/add-a-chart-in-wordpress/
date: 2024-12-09
modified: 2026-04-14
author: "Aditya Sharma"
description: "Adding charts and graphs can present data in a visually appealing and easy-to-understand format. For website designers and creators, incorporating charts into their content can significantly improve the user experience..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Chart-in-WordPress_-1024x519.jpg
word_count: 900
---

# How to Add a Chart in WordPress?

## Key Takeaways

- Nexter Blocks includes the Advanced Chart block, allowing users to add various chart types to their WordPress website.
- The Advanced Chart block supports six chart types: line, bar, radar, doughnut, pie, and bubble.
- Users can customize chart datasets by adding values and labels separated by a pipe sign (|).
- The Advanced Chart block offers styling options for grid lines, labels, legends, tooltips, and animations.

Adding charts and graphs can present data in a visually appealing and easy-to-understand format. For website designers and creators, incorporating charts into their content can significantly improve the user experience and make information more engaging and accessible for visitors.

With the Advanced Chart block from Nexter Blocks, you can easily add different types of charts to your WordPress website.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-charts-and-graph/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- This is a Premium block, and you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

- Make sure the Advanced Chart block is activated. To verify this, visit Nexter → Blocks → and search for Advanced Chart and activate.

## Learn via Video Tutorial:

https://www.youtube.com/watch?v=8zrDtrhtOv8

## How to activate the Advanced Chart Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block name and** turn**** on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/12/Nexter-Blocks-Advanced-Chart-Activation.png)

## Key Features

- **Line chart** - You can easily add a line chart.

- **Bar chart** - You can easily [add a bar chart (horizontal and vertical)](https://nexterwp.com/docs/create-a-bar-chart-in-wordpress/).

- **Radar chart** - You can easily [add a radar chart](https://nexterwp.com/docs/create-a-radar-chart-in-wordpress/).

- **Doughnut & Pie chart** - You can easily [add a doughnut and pie chart](https://nexterwp.com/docs/create-a-pie-chart-in-wordpress-doughnut-chart/).

- **Polar Area chart** - You can easily [add a polar area chart](https://nexterwp.com/docs/create-a-polar-area-graph-in-wordpress/).

- **Bubble chart** - You can easily [add a bubble chart](https://nexterwp.com/docs/bubble-chart-in-wordpress/).

## How to Use the Advanced Chart Block?

Add the Advanced Chart block to the page.

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2024/12/advanced-chart-design-type-1024x192.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

### Chart

From the **Style** section, you have to select the chart type. Here you’ll find six options - 

- **Line ** - To add a line chart.

- **Bar **- To [add a bar chart (horizontal and vertical)](https://nexterwp.com/docs/create-a-bar-chart-in-wordpress/).

- **Radar ** - To [add a radar chart](https://nexterwp.com/docs/create-a-radar-chart-in-wordpress/).

- **Doughnut & Pie** - To [add a doughnut and pie chart](https://nexterwp.com/docs/create-a-pie-chart-in-wordpress-doughnut-chart/).

- **Polar Area** - To [add a polar area chart](https://nexterwp.com/docs/create-a-polar-area-graph-in-wordpress/).

- **Bubble ** - To [add a bubble chart](https://nexterwp.com/docs/bubble-chart-in-wordpress/).

> *Note: For some chart types, you’ll get additional options.*

Let’s select Line here.

Then in the **Label Values** field, you have to add chart labels separated by a pipe sign (**|**).

### Datasets

In this tab, you have to add the chart dataset. By default, you’ll find three repeater items open one item -

> *Note: The options will vary for different chart types.* 

In the **Label** field, you can add the dataset label.

Then in the **Data** field, you have to add the values of the dataset separated by a pipe sign (**|**). Make sure to add the same number of data as added in the **Label Values** field of the Chart tab.

From the **Background** section, you can add a fill color to the particular line chart.

> *Note: The Background will only work when you enable the Fill toggle.*

Then you can change the border color from the **Border Color** section.

By enabling the **Multiple Dot Background** toggle, you can change the individual dataset dot background color. To do so, you have to add the color hex codes in the **Dot Background** field, separated by a pipe sign (**|**). Make sure that the number of colors added matches the quantity of data entries in the **Data** field.

But if the **Multiple Dot Background** toggle is disabled, you can change all the dot background colors at once from the **Dot Background** section.

Similarly, from the **Multiple Border** toggle, you can change the individual dataset dot border color. In the **Dot Border Color** field, you have to add the color hex codes separated by a pipe sign (**|**).

But you can change all the dataset dot border colors at once from the **Dot Border Color** field by disabling the **Multiple Border** toggle.

Then, from the **Fill** toggle, you can add or remove the fill color.

> *Note: Fill only works for the Line and Radar chart.*

By enabling the **Border Dash** toggle, you can make the line dashed.

> *Note: Border Dash only works for the Line and Radar chart.*

Following this process, you can edit the other items.

Then you can click on the **+ Add Item** button to add more items.

Now you should have a beautiful interactive line chart.

## How to Style the Advanced Chart Block?

You can style the Advanced Chart block from the Style tab. The options will vary for different chart types.

**Bar** - You’ll see this option only when the Bar is selected from the Layout tab. From here you can manage the bar size and space.

![](https://nexterwp.com/wp-content/uploads/2024/12/advanced-chart-style-tab-new.png)

**Grid Lines** - From here, you can customize the x-axis and y-axis line styles.

**Labels** - From here, you can show or hide the dataset labels from the chart. When enabled, you can manage the label color and size.

**Legend** - From here, you can show or hide the labels. When enabled you can manage the size, color, position and alignment.

**Custom Point** - From here, you can customize the chart points.

**Tooltip** - From here, you can show or hide the pointer tooltip. When enabled, you can customize the tooltip style.

**Extra Options** -  In this tab, you’ll find some additional styling options. From here, you can manage the line chart animation, chart height etc.  You’ll find additional options for different chart types.

Advanced options remain common for all our blocks, you can explore all it options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: What should I do if the Advanced Chart Block doesn't activate?**
A: If the Advanced Chart Block doesn't activate, first ensure that the Nexter Blocks plugin is installed and activated. This block is part of the PRO version of Nexter Blocks, so verify that you have the correct version. You can check this by navigating to Nexter u2192 Blocks and searching for the Advanced Chart block to turn on the toggle.

**Q: What are the best practices for styling the Advanced Chart Block?**
A: When styling the Advanced Chart Block, consider customizing the chart points, labels, and tooltips for better readability. You can manage the size and space of bars if you're using a bar chart. Additionally, enable grid lines for clarity on the x-axis and y-axis. These adjustments enhance user engagement and make your data more accessible.

**Q: Are there any limitations to the types of charts I can create with the Advanced Chart Block?**
A: While the Advanced Chart Block supports multiple chart types, each type has specific options and limitations. For instance, the fill color option only works for line and radar charts. It's essential to explore the features available for each chart type to maximize their effectiveness in your presentations.

**Q: How can I import a preset template for my chart?**
A: To import a preset template for your chart, add the Advanced Chart Block to your page and click on the 'Import Pre-Designed Template' button. This feature allows you to customize the template according to your needs, saving time and ensuring a polished look for your data visualizations.