# Charts

The **Charts Widget** allows you to build, manage and embed to any page of your website responsive charts or graphs.

### Using Charts widget

Go to your site and start editing the page with Elementor.

### Step 1:

Select the **Charts** widget from the menu bar on the left-hand side of your screen then drag and drop it into the selected area.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2Fbj8mS4GKkaAPVLIZeoBq%2FCompanion%20-%20charts%20add.png?alt=media\&token=e70dbbbe-9f40-4d6e-bac2-7de4ad387199)

### Step 2:

You will get a window with the basic setting options under the **Content** tab. It will give you two options **Data sets** and **Data Labels in the General section**.

In **Data sets**, you can add new chart items by setting their value, color, and border:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FgdXtU3pbkgIeADzsIFzS%2FCompanion%20-%20charts%20data%20set.png?alt=media\&token=b2eccf17-276a-4bb3-ab65-e6e550a7f7d7)

In the **Data Labels** section, you can set columns to display the charts. You can set data labels to show the category name the series name

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F14cyAShLM7Q6A1uuuIxB%2FCompanion%20-%20charts%20data%20lables.png?alt=media\&token=b2820d58-11c9-4f11-942e-7b52c61233ee)

Hit on the **Add items** to add/delete items.

### Step 3:

Now, by clicking on the Style Tab you can customize the Graphs, and typography of the Legend.

In the Graph section, you can change the default chart type **Bar** into Line, Polar Area, and Radar. Then depending on the selected type, you can customize the appearance:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F4rlSsyf4EKKlfSOwojt0%2FCompanion%20-%20charts%20data%20line.png?alt=media\&token=223dc85f-1978-40d9-8853-73266581d3e6)

In the **Legend** section, you can customize the appearance of the Data Legends:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F2cNJoueX9mq4jfnWfZve%2FCompanion%20-%20charts%20data%20legend.png?alt=media\&token=fd5fe69a-4856-4976-b7fd-2ee3c38099b7)

### Step 4:

If you want to add motion effects, background, or make the page responsive, click on ‘Advanced**’** to explore those options. This **‘Advanced’** tab is a default feature of Elementor. Give a read to [this Document](https://docs.elementor.com/article/571-advanced-tab) to know more about Advanced features and their uses.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FOLkIp8ObZPv4nSxuUDFe%2FCompanion%20-%20charts%20data%20adv.png?alt=media\&token=e700aa34-62cc-4b4f-b6cb-7f5ae44f5e43)

Finally, after completing all the customization click on ‘Publish’ to see your work live.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FbZ8DS27Ypq6GLvONozEt%2FCompanion%20-%20charts%20final.png?alt=media\&token=1fb8111f-a689-47f3-b600-2f5eddf75188)

Great job! You have done it successfully.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FwyiMZ7LTGEKy19zesf2R%2FCharts.gif?alt=media\&token=79c989a8-3073-492f-b6ff-7bf726323087)