How to Add Graphs and Charts Widget to Your Website

Jotform’s Graphs and Charts Widget makes it easy to present information in a clear, engaging, and visually appealing way. Whether you’re sharing business metrics, survey results, sales figures, or other important data, the widget helps visitors understand it all at a glance.

Choose from different chart types, customize the layout and design, and tailor the widget’s appearance to your website. In this guide, you’ll learn how to configure the widget and add it to your website.

Before you can add the Graphs and Charts Widget to your website, you’ll first need to enter your data, customize the chart, and copy the embed code for it. Here’s how to do it:

1. On the top-left side of your Workspace page, click on Create.

2. In the menu that opens up, click on Website Widget.

3. Next, in the Search bar in the upper-left corner of the Choose Website Widget window, enter Graphs and Charts.
4. Then, in the search results, click on Use Widget.

5. Now, in the Widget Properties menu that opens on the right side of Website Widgets, set up these properties:
   • Widget Title — Add a title to describe what your chart represents and give visitors helpful context.
   • Description — Include a short description to explain your data or give additional info about the chart.
   • Chart Type — Click on the Downward Arrow icon and choose the chart format. 
   • Chart Data — Enter or edit the data that’ll be displayed in your graph or chart.

6. Next, scroll down to the bottom and then continue setting up these options:
   • Import from CSV — Upload a CSV file up to 64 KB. The chart will import the first 16 rows.
   • Value Prefix — Add text or symbols before each value, such as a currency symbol ($) or other identifier.
   • Value Suffix — Toggle this on to add text or symbols after each value, such as %, kg, or hrs, to indicate units or measurements.

7. Then, under the Styles tab, customize these properties:
   • Theme — Choose a pre-designed theme to quickly change the overall look and feel of your chart.
   • Corner Radius — Choose the corner style of the widget elements: Square, Rounded, or Circular.
   • Jotform Branding — Show or hide Jotform branding on the widget.
   • Font — Toggle this on to select and match your website’s font.
   • Custom CSS — Turn this on to add custom CSS code and apply advanced styling to the widget.

8. If you select Custom in the Theme section, configure the following properties:
   • Colors — Customize the chart colors using the options below.
     • Background — Choose a background color for the widget.
     • Chart Area — Select a background color for the chart area.
     • Text — Pick a primary text color to use throughout the widget.
     • Muted Text — Set a color for secondary text, such as labels or supporting info.
     • Grid Lines — Set the color of the grid lines to improve readability or better match your website’s design.
     • Accent — Choose a primary color to use for chart elements like bars, lines, or chart highlights.

9. Now, under the Layout tab, configure these properties:
   • Chart Height — Adjust the height of the chart to fit your website’s layout.
   • Legend — Show or hide the chart legend that identifies each data series or category.
   • Value Labels — Display or hide the values directly on the chart for better readability.
   • Grid Lines — Show or hide the grid lines to make chart values easier to compare.
10. Once you’ve finished configuring the widget, in the pink navigation bar at the top of the page, click on Publish.

11. Next, in the Embed section, click on Copy Code, and, if you already know how, paste that into the Embed section on your platform, and you’re good to go.
12. To view embedding instructions for your widget, click on Platforms in the menu on the left side of the page. 

13. Then, in the Platforms section on the right, select the platform you want to view embedding instructions for. Or, use the Search bar at the top of the section to find it easily. 

14. Now, follow the steps in the How to Embed Your Widget section to add it to your website.

That’s it! Your Graphs and Charts widget will appear on your website with the design and settings you selected for it. See the screenshot below for an example of how it looks:

Discover

Website Widgets

Supercharge your website with interactive widgets that empower visitors to take action.

Discover Now