--- title: "How to Create an Elementor Chart by Importing Data From Google Sheets?" url: https://theplusaddons.com/docs/create-an-elementor-chart-by-importing-data-from-google-sheets/ date: 2025-06-20 modified: 2026-04-09 author: "Aditya Sharma" description: "Do you want to import data from Google Sheets to an Elementor chart? Importing data from Google Sheets into an Elementor chart offers a seamless way to display and manage..." word_count: 2852 --- # How to Create an Elementor Chart by Importing Data From Google Sheets? ## Key Takeaways - The Plus Addons for Elementor Chart widget imports data from Google Sheets directly into an Elementor table. - Users generate a Google API Key through the Google Developers Console to connect their Google Sheets with Elementor. - The Chart widget allows selection of various chart types, including Bar, Radar, and Line charts. - The Y-axis in the chart represents values ranging from 10 to 70, while the X-axis displays years from 2021 to 2025. - Data visualization in the chart includes color-coded legends for months, aiding in easy identification of values. Do you want to import data from Google Sheets to an Elementor chart?** **Importing data from Google Sheets into an Elementor chart offers a seamless way to display and manage dynamic content on your website. By integrating Google Sheets with Elementor, you can effortlessly update and synchronize your data in real time, ensuring that your chart is always up to date. With the Chart widget from The Plus Addons for Elementor, you can import data from your Google Sheets directly into an Elementor table, eliminating the need for manual data entry and streamlining your workflow. *To check the complete feature overview documentation of The Plus Addons for Elementor Chart widget, [click here.](https://theplusaddons.com/docs//chart-widget-settings-overview/)* ***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-advanced-charts/?utm_source=tpae&utm_medium=docs&utm_campaign=text) To do this, first, you have to generate a Google API Key. 1. Login to your Google account and go to the [Google Developers Console](https://console.developers.google.com/). 2. If you don’t have any projects created, then click on **CREATE PROJECT **link. ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-select-new-project.png) 3. On the next screen, add your **Project name** and click the **CREATE** button. ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-create-project-name.png) 4. Then click on **+ENABLE APIS AND SERVICES** at the top. ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-enable-apis-and-services.png) 5. On the next page, search for Google Sheets API in the search bar. Click on **Google Sheets API,** then click on the **Enable** button. ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-api.gif) 6. Then click on **Credentials** in the left sidebar. 7. On the Credentials page, from the top, click on **+ CREATE CREDENTIALS** > **API Key**. ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-create-credentials.png) 8. It will generate the API Key, and you will copy and paste the key into a notepad. ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-create-credentials-api-key-created.png) In the same Google account that you generated the API key with, you should have a Google Spreadsheet with some data. Now, to import Google Sheet data into the Elementor chart with the Chart widget, follow the steps - 1. Add the Chart widget on the page, then select **Google Sheet** from the **Chart Type** dropdown. 2. In the **API Key** field, paste your API Key. ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-add-google-api-key.png) 3. Go to your Google Spreadsheet, and click on the **Share** button. In the popup, set the **General Access** to **Anyone with the link** and click on **Done**. ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-data-access-anyone-with-link.gif) This will allow the Chart widget to access your Spreadsheet. 4. Now, you have to find your Google Sheet ID. You can find the spreadsheet ID in the spreadsheet URL. Then your ID should be “**1MsbzRj6ybfCXtRRU--RNNXlOiZ9sHzcHSF_PfwCJswg**” ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-add-google-spreadsheets-id.png) 5. Copy and paste your spreadsheet ID in the **Sheet ID** field of the Chart widget. 6. In the **Table Range** field, you have to add the cell range of your Google Spreadsheet, which you want to show in your Elementor chart. Go to your Spreadsheet, select the range, and then click on **Data** > **Named ranges**.  It will show the cell range, copy and paste it into the **Table Range** field of the Chart widget. ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-data-table-range-bar-line-radar.gif) You can select the **Bar** type option from the **Select Chart **section. > ***Note:**** In the sheet, we've included different types of data formats for various chart types. So, for each chart type (e.g., Bar, Radar, Line), you can refer to the relevant section. As shown in the video above, this applies to the Bar, Radar, and Line charts.* > ***Note:**** To help you understand how this option works, we’ve shown two examples with data for Bar, Radar, and Line charts below. Just follow the steps.* #### Example 1: Data Without pre-defined Color You'll see below your raw data table in Google Sheets. This table is used to generate a chart. The structure follows: This table is used to generate a chart. The structure follows: - X-Axis represents → Years (2021 to 2025) - Y-Axis represents → Values (from the data for Jan, Feb, and Mar), and each row (Jan, Feb, Mar) represents a series on the graph You can either select all your data or just the specific part you want to see in the graph (like your A3:F6 example). Selecting only the part you need is usually simpler and clearer for that specific graph.  > *Note: So, if your data is in the first sheet (which Excel usually names "Sheet1" by default) and your table range is A3:F6, the correct way to represent this range is: ****Sheet1!A3:F6*** ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-bar-radar-line-chart.png) After that, once you have collected the **API Key, Sheet ID, and Table Range**, the following steps will show how the data from the sheet is visualized in a bar chart. ##### 1. Chart Type Source Selection : - Select **Google Sheet** from the **Chart Type** dropdown. - Enter the correct API Key, Sheet ID, and Table Range to connect to your data. ##### 2. Chart Style Selection: - Choose **Bar **from the **Select Chart** section. - This choice determines the visual representation of the data, displaying it as vertical bars, useful for comparing quantities across different categories or over time. ##### 3. Chart Orientation : - Select the Vertical Bar from the Orientation dropdown. - This specifies that the bars in the chart will be drawn vertically, with categories typically on the horizontal (X) axis and values on the vertical (Y) axis. ##### 4. Color Legend : - The legend at the top of the chart indicates the categories represented by different colors: Jan (yellow), Feb (greenish-blue), and Mar (black). This allows for easy identification of which bar corresponds to which month. ##### 5. Y-Axis (Values): - The Y-axis is displayed on the left side of the chart. It represents the quantitative values being measured, ranging from 10 to 70 in this chart. The number 5 points to the starting point of this axis. ##### 6. X-Axis (Years): - The X-axis is displayed at the bottom of the chart. It represents the categorical data, which in this case are the years from 2021 to 2025. The number 6 points to the starting point of this axis. ##### 7. Bar Heights (Data Representation): - **The height of each bar reflects the value from the sheet** - The number 7 points to the group of three vertical bars for the year 2021. Each bar within this group represents the value for a specific month (Jan, Feb, Mar) for that year, allowing for a direct comparison of values across months for a given year, and also across years. - **For example:**** ** **In 2021: Jan = 15, Feb = 25, Mar = 35**** ** - **These are shown as 3 different bars with respective heights for 2021** > ***Note:**** If your data does not include color hexadecimal codes, the graph will display default colors. These colors will change each time the page loads. Each color represents a different month.* Now, you will see your graph displaying your data. ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-bar-radar-line-chart-graph.png) #### Example 2: Data with pre-defined Color  > ***Note:**** In this example, the process is the same as you saw above. The only difference is that here you will pre-define and add colors(hexadecimal codes), so you will be able to see specific colors in the chart's columns.* ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-bar-radar-line-chart-with-color-code.png) ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-bar-radar-line-chart-with-color-code-graph.png) 7. When you select the **Bar** chart, you can choose the appropriate chart view from the **Orientation **dropdown. > ***Note:**** To help you understand how this option works, we’ve shown two examples with data for ****Doughnut****, ****Pie****, ****PolarArea****, and ****Bubble**** charts below. Just follow the same steps as shown above.* #### Example 1: Data Without pre-defined Color (Doughnut Chart) You'll see below your raw data table in Google Sheets. This table is used to generate a chart. The structure follows: This table is used to generate a chart. The structure follows: - **Months** (Jan, Feb, Mar, Apr). - **Years** (2021 to 2025). - The **numeric values** from your sheet (e.g., 25, 40, 15...). You can either select all your data or just the specific part you want to see in the graph (like your A3:E8 example). Selecting only the part you need is usually simpler and clearer for that specific graph.  > *Note: So, if your data is in the first sheet (which Excel usually names "Sheet1" by default) and your table range is A3:E8, the correct way to represent this range is: ****Sheet1!A3:E8*** ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-doughunt-chart.png) ##### 1. Chart Type Source Selection - Select Google Sheet from the **Chart Type** dropdown. - Then enter the values in the **API Key, Sheet ID, and Table Range** fields. ##### 2. Chart Style Selection - Click the Doughnut Chart from the **Select Chart** section. - This defines the chart style as a doughnut, which displays values in a ring-shaped format.* * ##### 3. Chart Orientation - Set the Orientation to Doughnut using the dropdown. - This ensures that the chart displays in a multi-ring doughnut style, where each ring represents a different year.* * ##### 4. Color Legend - The Legend at the top of the chart shows the color-coded key for each year (2021 to 2025). - Each colored ring in the chart corresponds to a year and helps in identifying the data visually.* * ##### 5. Data Hover Tooltip - Hovering over a segment in the chart shows a tooltip with details:* * Year (e.g., 2022) - Month and Value (e.g., Apr: 40)* * - This makes it easier to identify exact values from the data set without going back to the sheet. Each ring segment reflects a **month’s value** for a particular **year**, making it easy to compare values across years visually. > ***Note:**** If your data does not include color hexadecimal codes, the graph will display default colors. These colors will change each time the page loads. Each color represents a different month.* Now, you will see your graph displaying your data. ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-doughnut-chart-graph.png) #### Example 2: Data with pre-defined Color  (Doughnut Chart) > ***Note:**** In this example, the process is the same as you saw above. The only difference is that here you will pre-define and add colors(hexadecimal codes), so you will be able to see specific colors in the chart's columns.* ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-doughnut-chart-with-color-code.png) ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-doughnut-chart-with-color-code-graph.png) #### Example 1: Data Without pre-defined Color (Pie Chart) You'll see below your raw data table in Google Sheets. This table is used to generate a chart. The structure follows: This table is used to generate a chart. The structure follows: - **Years** (2021 to 2025). (from column A in the sheet). - The **numeric values** from your sheet (e.g., 8, 12, 20...). (from column B in the sheet). You can either select all your data or just the specific part you want to see in the graph (like your A4:B8 example). Selecting only the part you need is usually simpler and clearer for that specific graph.  > *Note: So, if your data is in the first sheet (which Excel usually names "Sheet1" by default) and your table range is A4:B8, the correct way to represent this range is: ****Sheet1!A4:B8*** ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-pie-polar-area-chart.png) ##### 1. Chart Type Source Selection - Select **Google Sheet** from the **Chart Type** dropdown. - Then enter the values in the **API Key, Sheet ID, and Table Range** fields. ##### 2. Chart Style Selection - Click the **Pie Chart** from the **Select Chart** section. - This sets the chart type to Pie, which divides a circle into slices to show proportion. ##### 3. Chart Orientation - In the **Orientation** dropdown, select **Pie**. - This ensures that the chart renders in a classic pie format where each slice represents a value for a specific year. ##### 4. Color Legend - The **Legend** at the top shows which color corresponds to which year (2021 to 2025). - This helps visually match each slice of the pie to its year. ##### 5. Data Hover Tooltip - Hovering over any slice displays a **tooltip** that includes: **Year** (e.g., 2025) - **Value** (e.g., 25) - This provides quick reference without checking the original data table. - **Slices**: Each slice of the pie reflects a **year’s total value**, showing its proportion relative to the full dataset. > ***Note:**** If your data does not include color hexadecimal codes, the graph will display default colors. These colors will change each time the page loads. Each color represents a different month.* Now, you will see your graph displaying your data. ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-pie-chart-graph-1.png) #### Example 2: Data with pre-defined Color  (Pie Chart) > ***Note:**** In this example, the process is the same as you saw above. The only difference is that here you will pre-define and add colors(hexadecimal codes), so you will be able to see specific colors in the chart's columns.* ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-pie-polar-area-chart-with-color-code-1.png) ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-pie-chart-graph-with-color-code-1.png) #### Example 1: Data Without pre-defined Color (Polar Area Chart) You'll see below your raw data table in Google Sheets. This table is used to generate a chart. The structure follows: This table is used to generate a chart. The structure follows: - **Years** (2021 to 2025). (from column A in the sheet). - The **numeric values** from your sheet (e.g., 8, 12, 20...). (from column B in the sheet). You can either select all your data or just the specific part you want to see in the graph (like your A4:B8 example). Selecting only the part you need is usually simpler and clearer for that specific graph.  > *Note: So, if your data is in the first sheet (which Excel usually names "Sheet1" by default) and your table range is A4:B8, the correct way to represent this range is: ****Sheet1!A4:B8*** ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-pie-polar-area-chart-2.png) ##### 1. Chart Type Source Selection  - Select "**Google Sheet**" from the Chart Type dropdown. - Then enter the values in the **API Key, Sheet ID, and Table Range** fields. ##### 2. Chart Style Selection  - Click the **Polar Area Chart **from the **Select Chart** section. - Sets the chart type to Pie, dividing a circle into slices to show proportions between values. ##### 3. Chart Orientation (Y-Axis - Values) - Shows the numerical values for each month from the sheet (e.g., 5, 10, 15...) ##### 4. Color Orientation (X-Axis) - Displays the sequence numbers (e.g., a specific measurement or quantity). ##### 5. Data Hover Tooltip  - This refers to the legend located at the top of the chart display area, showing the years 2021 to 2025 with their corresponding colors.  ##### 6. Polar Area Chart Sections - Hovering over any slice displays a **tooltip** that includes: **Year** (e.g., 2025) - **Value** (e.g., 25) - This provides quick reference without checking the original data table. - **Slices**: Each slice of the pie reflects a **year’s total value**, showing its proportion relative to the full dataset. > ***Note:**** If your data does not include color hexadecimal codes, the graph will display default colors. These colors will change each time the page loads. Each color represents a different month.* Now, you will see your graph displaying your data. ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-polar-area-chart-graph-1.png) #### Example 2: Data with pre-defined Color  (Polar Area Chart) > ***Note:**** In this example, the process is the same as you saw above. The only difference is that here you will pre-define and add colors(hexadecimal codes), so you will be able to see specific colors in the chart's columns.* ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-pie-polar-area-chart-with-color-code-2.png) ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-polar-area-chart-graph-with-color-code-1.png) #### Example 1: Data Without pre-defined Color (Bubble Chart) You'll see below your raw data table in Google Sheets. This table is used to generate a chart. The structure follows: This table is used to generate a chart. The structure follows: - **Years** (2023 to 2025). - **Months **(Jan to Mar). - The **numeric values** from your sheet (e.g., 5|15|25, 10|18|12, 7|14|14...). You can either select all your data or just the specific part you want to see in the graph (like your A3:D6 example). Selecting only the part you need is usually simpler and clearer for that specific graph.  > *Note: So, if your data is in the first sheet (which Excel usually names "Sheet1" by default) and your table range is A3:D6, the correct way to represent this range is: ****Sheet1!A3:D6*** ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-bubble-chart-3.png) ##### 1. Chart Type Source Selection  - Select "**Google Sheet**" from the Chart Type dropdown. - Then enter the values in the **API Key, Sheet ID, and Table Range** fields. ##### 2. Chart Style Selection  - Click the **Bubble Chart** from the **Select Chart** section. - This choice indicates that the data will be visualized as a bubble chart, where each data point is represented by a circle (bubble) whose size can vary based on a third data dimension. ##### 3. Color Legend - The legend at the top of the chart shows the categories represented by different colors: Jan (blue), Feb (orange), and Mar (pink). This helps in identifying which month each bubble corresponds to. ##### 4. Y-Axis - The Y-axis is highlighted on the left side of the chart. It represents one of the quantitative dimensions of the data, with values ranging from approximately 10 to 24 in this view. The number 4 points to the starting point of this axis. ##### 5. X-Axis  - The X-axis is highlighted at the bottom of the chart. It represents another quantitative dimension of the data, with values ranging from approximately 5 to 15. The number 5 points to the starting point of this axis. ##### 6. Data Hover Tooltip - Hovering over a specific bubble (in this case, a pink one representing March) displays a tooltip. The tooltip (marked as 6) provides detailed information for that specific data point, showing: Month: Mar (March) - X-axis value: 14 - Y-axis value: 24 - Bubble size value: 20 (This is the value that determines the size of the bubble, although not explicitly labeled in the tooltip, it's typically the third dimension in a bubble chart) > ***Note:**** If your data does not include color hexadecimal codes, the graph will display default colors. These colors will change each time the page loads. Each color represents a different month.* Now, you will see your graph displaying your data. ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-bubble-chart-graph-3.png) #### Example 2: Data with pre-defined Color  (Bubble Chart) > ***Note:**** In this example, the process is the same as you saw above. The only difference is that here you will pre-define and add colors(hexadecimal codes), so you will be able to see specific colors in the chart's columns.* ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-bubble-chart-with-color-code-1.png) ![](https://theplusaddons.com/wp-content/uploads/2025/06/tpae-chart-google-sheets-example-bubble-chart-graph-with-color-code-1.png) That’s it. Now, data from your Google Spreadsheet will show in your Elementor chart. ## Frequently Asked Questions **Q: What do I need before starting to create an Elementor chart with Google Sheets?** A: You need to have The Plus Addons for Elementor installed and activated to use the Chart widget. Additionally, you'll need a Google account to generate a Google API Key and access a Google Spreadsheet with data. **Q: How do I import data from Google Sheets into an Elementor chart?** A: To import data, add the Chart widget on your page, select Google Sheet from the Chart Type dropdown, and enter your API Key, Sheet ID, and Table Range. This allows the Chart widget to access and display your Google Sheet data. **Q: What happens if I don't set the Google Spreadsheet access to 'Anyone with the link'?** A: If you don't set the Google Spreadsheet access to 'Anyone with the link', the Chart widget will not be able to access your data, and the chart will not display any information from your Google Sheet. **Q: Is there a specific format for the Table Range when importing data?** A: Yes, the Table Range must be specified in the format 'Sheet1!A3:F6', where 'Sheet1' is the name of the sheet and 'A3:F6' is the range of cells containing your data. This format is necessary for the Chart widget to correctly pull the data. **Q: Can I use The Plus Addons for Elementor Chart widget with page builders other than Elementor?** A: No, the Chart widget from The Plus Addons for Elementor works exclusively with Elementor and does not support other page builders like Gutenberg, Beaver Builder, or Divi. **Q: What types of charts can I create using The Plus Addons for Elementor?** A: You can create various types of charts, including Bar, Radar, Line, Doughnut, Pie, Polar Area, and Bubble charts using The Plus Addons for Elementor. Each chart type has specific data formatting requirements.