---
title: "Chart Widget: Settings Overview"
url: https://theplusaddons.com/docs/chart-widget-settings-overview/
date: 2024-02-05
modified: 2026-04-09
author: "Aditya Sharma"
description: "Adding charts and graphs can display data in a visually appealing and easy-to-understand manner. For website designers and creators, incorporating charts into their content can greatly enhance the user experience..."
image: https://theplusaddons.com/wp-content/uploads/2024/02/Chart-Widget_-Settings-Overview-1024x536.jpg
word_count: 1229
---

# Chart Widget: Settings Overview

## Key Takeaways

- Chart widget from The Plus Addons for Elementor allows users to add various chart types including line, bar, radar, doughnut, pie, polar area, and bubble charts.
- Users must have the PRO version of The Plus Addons for Elementor installed and activated to access the Chart widget.
- The Chart widget enables customization options such as multiple dot backgrounds and borders for individual datasets.
- Users can apply pre-defined animations for datasets to enhance visual engagement when the chart loads.

Adding charts and graphs can display data in a visually appealing and easy-to-understand manner. For website designers and creators, incorporating charts into their content can greatly enhance the user experience and make information more engaging. 

With the Chart widget from The Plus Addons for Elementor, you can easily add different types of charts to your Elementor website.

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-advanced-charts/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Required Setup

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

- Make sure the Chart widget is activated. To verify this, visit The Plus Addons → Widgets → and search for Chart and activate.

## Learn via Video Tutorial:

https://www.youtube.com/watch?v=_WbbulAK9Ds

## How to Activate the Chart Widget?

Go to 

- **The Plus Addons **→** Widgets **

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

![](https://theplusaddons.com/wp-content/uploads/2024/02/tpae-chart-activate-1024x295.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://theplusaddons.com/docs//bar-graph-in-elementor/)

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

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

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

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

## How to Add a Line Chart in Elementor?

Add the Chart widget to the page.

### Layout

From the **Chart Type** dropdown, you have to select the **Chart Type**. Here you'll find three options -

- **Custom - **To add a custom chart.

- **CSV File** **- **To add a chart using a CSV file.

- **Google Sheet** **- **To add a chart using a Google Sheet.

![](https://theplusaddons.com/wp-content/uploads/2024/02/tpae-chart-type-line.gif)

Depending on the chart type, options will change.

From the **Select Chart** 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).

**Radar **- To add a radar chart.

**Doughnut & Pie **- To add a doughnut and pie chart.

**Polar Area **- To add a polar area chart.

**Bubble **- To add a bubble chart.

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

Let’s select Line here.

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

### Dataset

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

![](https://theplusaddons.com/wp-content/uploads/2024/02/tpae-chart-dataset.gif)

> *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 points as added in the **Label Values** field of the Chart tab.

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** 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** 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.

### Special Option

In this tab, you’ll find some additional options.

![](https://theplusaddons.com/wp-content/uploads/2024/02/tpae-chart-special-option.gif)

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

From the **Grid Lines** group control, you can show or hide the grid. When enabled, you’ll find some options - 

From the **X Axis** tab, you can style the x-axis lines of the grid.

- **Grid Color X Axis** - From here, you can color the x-axis lines of the grid.

- **Zero Line Color** - From here, you can color the x-axis baseline of the grid.

- **Draw Border** - From here, you can show or hide the x-axis baseline of the grid when the Draw Border on Chart Area is disabled. 

- **Draw Border on Chart Area** - From here, you can show or hide the x-axis lines of the grid.

From the **Y Axis** tab, you can style the y-axis lines of the grid.

- **Grid Color Y Axis** - From here, you can color the y-axis lines of the grid.

- **Zero Line Color** - From here, you can color the y-axis starting line of the grid.

- **Draw Border** - From here, you can show or hide the y-axis starting line of the grid when the Draw Border on Chart Area is disabled.

- **Draw Border on Chart Area** - From here, you can show or hide the y-axis lines of the grid.

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

Then, from the **Legend** group control, you can show or hide the labels. When enabled, you can manage the size, color, position, and alignment.

Then you can customize the chart points by enabling the **Custom Point Styles** group control.

- **Point Styles** - From here, you can choose different pointer styles.

- **Point Background** - From here, you can change the pointer background color.

- **Point Normal Size** - From here, you can set the pointer size.

- **Point Hover Size** - From here, you can set the pointer size for hover.

- **Point Border** - From here, you can set the pointer border color.

- **Point Border Width** - From here, you can set the pointer border width.

From the **Tooltip** group control, you can show or hide the pointer tooltip. When enabled, you’ll find some customization options.

- **Event** - From here, you can choose to show the tooltip on hover or click.

- **Font Size** - From here, you can manage the tooltip content font size.

- **Title Color** - From here, you can manage the tooltip title color.

- **Body Font Color** - From here, you can manage the tooltip content color.

- **Tooltip Background** - From here, you can manage the tooltip background color.

By enabling the **Smooth** toggle, you can make the line curves smooth.

Then, from the **Aspect Ratio** toggle, you can make the chart width and height equal.

From the **Maintain Aspect Ratio** toggle, you can set a custom height for the chart.

### Extra Option

In this tab, you’ll find some animation effect options.

You can add different pre-defined animations for datasets to show on page load from the **Animation** dropdown.

![](https://theplusaddons.com/wp-content/uploads/2024/02/tpae-chart-extra-option.gif)

You can control the animation speed from the **Duration** section.

Now you should have a beautiful interactive line chart.

![line chart demo](https://theplusaddons.com/wp-content/uploads/2024/02/line-chart-demo-1024x550.gif)

Advanced options remain common for all our widgets, you can explore all their options from here.

[View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/)

## Frequently Asked Questions

**Q: What do I need to activate the Chart widget?**
A: To activate the Chart widget, you need to have both the Elementor FREE Plugin and The Plus Addons for Elementor installed and activated. Additionally, since the Chart widget is a premium feature, you must have the PRO version of The Plus Addons for Elementor. Verify activation by going to The Plus Addons u2192 Widgets and searching for the Chart widget.

**Q: How can I add a radar chart using The Plus Addons for Elementor?**
A: To add a radar chart, first, include the Chart widget on your page. In the Chart Type dropdown, select 'Radar' from the available options. This selection will adjust the settings to suit the radar chart format. Be aware that different chart types may have unique options, so ensure you configure the dataset and labels accordingly.

**Q: What are common mistakes when setting up datasets for charts?**
A: A common mistake is not matching the number of data points in the Label Values field with the Data field. Each label must correspond to a data entry, and if you enable the Multiple Dot Background toggle, ensure the number of color hex codes matches the dataset entries. Failing to do this can lead to incomplete or incorrect chart displays.

**Q: Does the Chart widget support animation effects?**
A: The Chart widget includes options for animation effects that can be applied to datasets when the chart loads. You can select from pre-defined animations in the Animation dropdown and control the animation speed in the Duration section. This feature enhances user engagement by making the data presentation more dynamic.

**Q: What settings work best for displaying a line chart?**
A: For a line chart, ensure you enable the Fill toggle to add a fill color beneath the line, which enhances visibility. Additionally, consider using the Border Dash toggle to create a dashed line effect for better differentiation. These settings can improve the overall aesthetics and clarity of your data representation.