Getting Started With Charts for WPForms

Install Charts for WPForms #

Start by installing the Charts for WPForms plugin on your website.

1. Log in to your Account page on site.
2. Click the Downloads tab.
3. Download the Charts for WPForms plugin ZIP file.

Now install it on your WordPress site:

1. Go to Plugins → Add New
2. Click Upload Plugin, then Choose File
3. Select the ZIP file you downloaded and click Install Now
4. When installation completes → click Activate Plugin

Activate Your License #

After activating the plugin, the next step is to enter your license key.

1. Copy your Charts for WPForms license key from your Account page
2. Go to WPForms → Settings
3. Click on the Charts tab
4. Paste your license key in the License field and save

Your plugin is now ready to use.

Create or Use an Existing WPForm #

If you already have a form with entry data, you can skip this step.

Otherwise:

1. Go to WPForms → Add New
2. Give your form a name and add the fields you need
3. Make sure your form includes at least one field that can be used for chart data, such as:
   • Dropdown
   • Multiple Choice
   • Checkboxes
   • Rating
   • Survey fields
4. Click Save

Create a Chart in Charts for WPForms #

Now it’s time to create your first chart.

1. Go to WPForms → All Forms in the left menu
2. Click on the form for which you want to add chart.
3. Click on Settings and the Click on Charts menu.
4. Click Add New Chart

You’ll now see the chart setup screen.

Type & Source Tab #

This tab controls what data is displayed and how it’s aggregated.

Chart Type #

Select from 7 different chart types:

• Bar – Vertical or horizontal bars (use Bar Direction setting to switch)
• Line – Connected data points with lines
• Pie – Circular chart divided into slices
• Doughnut – Similar to pie, but with a hollow center
• Polar Area – Circular chart with varying segment sizes
• Radar – Spider web style chart

Data Source #

Select which form field to use as your data source. Supported field types include:

• Dropdown / Select
• Multiple Choice / Radio
• Checkboxes
• Rating
• Likert Scale
• Net Promoter Score
• Payment Select Fields

Data Operation #

Choose how to calculate the chart values:

• Entry count – Count how many times each option was selected (default)
• Sum values – Add up values from a numeric field
• Average values – Calculate the average of values from a numeric field
• Maximum value – Show the highest value from a numeric field
• Minimum value – Show the lowest value from a numeric field

Note: When using Sum, Average, Max, or Min, you’ll need to select a Value Field (numeric field to aggregate).

Value Field #

This field appears when you select an operation other than “Entry count”. Choose which numeric field to use for calculations. Supported numeric fields include Number, Number Slider, Rating, and Payment fields.

Design Tab #

Control the visual appearance of your chart.

Bar Direction #

(Only visible for Bar charts)

• Vertical – Bars grow upward (default)
• Horizontal – Bars grow from left to right

Order Values #

Sort your chart data:

• Values order (default) – Display in the order options appear in your form
• Label A → Z – Sort alphabetically by label
• Label Z → A – Sort reverse alphabetically
• Value low → high – Sort by data value ascending
• Value high → low – Sort by data value descending

Aspect Ratio #

Control the chart’s width-to-height ratio:

• Automatic – Adjusts based on chart type and available space
• Square – Equal width and height
• Wide – Wider than tall (good for dashboards)

Border Width #

Set the thickness of borders around chart elements:

• No Border – Removes all borders
• Thin – 1px border
• Medium – 2px border (default)
• Thick – 3px border

Enable Animation #

When enabled, the chart will animate smoothly when first displayed. Disable for faster loading or if animation causes issues.

Color Palette #

Choose from 8 pre-designed color schemes:

• Default – Blue tones
• Vibrant – Bold, bright colors
• Pastel – Soft, muted colors
• Ocean – Blues and greens
• Earth – Browns and greens
• Monochrome – Shades of gray
• Sunset – Warm oranges and reds
• Forest – Natural greens

Title & Legend Tab #

Configure text and legend display options.

Use Values for Labels #

When enabled, the chart will display field choice values instead of labels. Useful when your form labels are long but values are short codes.

Show Chart Title #

Toggle to display a title inside the chart area. When enabled, you’ll see additional options:

• Chart Title Text – The text to display (e.g., “Survey Results”)
• Title Font Size – Size in pixels (10-48px, default: 22px)

Enable Legend #

Show or hide the color legend that identifies what each color represents. Enabled by default.

Legend Position #

(Visible when legend is enabled)

Choose where the legend appears:

• Top – Above the chart (default)
• Bottom – Below the chart
• Left – Left side of the chart
• Right – Right side of the chart

Legend Alignment #

(Visible when legend is enabled)

• Start – Align to the left/top
• Center – Center the legend (default)
• End – Align to the right/bottom

Show Total Responses #

Display the total number of responses below the chart. Enabled by default.

Total Responses Text #

(Visible when Show Total Responses is enabled)

Customize the text displayed. Use {total} as a placeholder for the actual count.

Examples:

• Total responses: {total} (default)
• Total entries: {total}
• {total} people responded
• Based on {total} submissions

Axis Tab #

Note: Axis settings apply to Bar, Line, and Radar charts only.

Show X Axis Grid Lines #

Display vertical grid lines on the chart. Enabled by default.

Show X Axis Title #

Add a title to the X axis. When enabled:

• X Axis Title – Text to display (e.g., “Response Options”)

Show Y Axis Grid Lines #

Display horizontal grid lines on the chart. Enabled by default.

Show Y Axis Title #

Add a title to the Y axis. When enabled:

• Y Axis Title – Text to display (e.g., “Number of Responses”)

Auto Scale #

Automatically adjust the axis scale based on your data values. When disabled, you can set custom min/max values. Enabled by default.

Display Overlapping Labels #

Show all axis labels even if they overlap. When disabled, Chart.js will automatically skip labels if they would overlap. Enabled by default.

Exclude Empty Labels #

Hide labels that have zero or no data. Useful for keeping charts clean when some options weren’t selected. Enabled by default.

Labels Tab #

Add data labels directly on chart elements.

Enable Labels #

Show numeric labels on each chart element (bars, pie slices, etc.). Disabled by default.

Label Text #

(Visible when labels are enabled)

Choose what to display in the labels:

• Value – Show the numeric value (e.g., “150”)
• Percentage – Show percentage of total (e.g., “25%”)
• Label – Show the option name
• Value + Percentage – Show both (e.g., “150 (25%)”)
• Label + Value – Show name and value
• Label + Percentage – Show name and percentage

Label Position #

(Visible when labels are enabled)

• Default – Inside for pie/doughnut charts, on top for bar/line charts
• Border – At the edge of the element
• Outside – Outside the element (good for crowded charts)

Label Font Size #

(Visible when labels are enabled)

Set label text size in pixels (8-24px, default: 14px).

Label Color #

(Visible when labels are enabled)

• Auto – White for pie/doughnut charts, dark for others
• Custom – Choose your own color using the color picker

(Optional) Enable conditional logic to filter your chart results #

• Example: Only include entries where “Status = Approved”

Embed Your Chart on a Page or Post #

To publish your chart:

1. Copy the shortcode from your chart edit page
2. Add the shortcode to any page/post.

Tips & Best Practices #

Choosing the Right Chart Type #

• Bar/Horizontal Bar – Best for comparing multiple categories
• Line – Great for showing trends over time or continuous data
• Pie/Doughnut – Perfect for showing parts of a whole (percentages)
• Polar Area – Similar to pie but emphasizes differences in values
• Radar – Excellent for comparing multiple variables across categories

Performance Tips #

• Disable animations if you have many charts on one page
• Use “Exclude Empty Labels” to keep charts clean
• For forms with many options, consider sorting by value to highlight top responses

Accessibility #

• Always include descriptive chart titles
• Use high-contrast color palettes for better visibility
• Consider adding the total responses text for context

Common Use Cases #

Survey Results #

• Chart Type: Bar or Pie
• Data Operation: Entry count
• Enable: Legend, Total responses
• Sort by: Value high → low

Customer Satisfaction Ratings #

• Chart Type: Bar
• Data Operation: Average values
• Value Field: Rating field
• Enable: Data labels with percentage

Product Preferences #

• Chart Type: Doughnut
• Data Operation: Entry count
• Enable: Labels with value + percentage
• Color Palette: Vibrant

Using Shortcodes #

After configuring your chart, you’ll see a shortcode like:

[wpf_chart id="123" chart="1"]

You can add this shortcode to:

• Pages and posts (in the editor)
• Widgets (using the Shortcode widget)
• Template files (using do_shortcode())

Troubleshooting #

Chart not displaying? #

• Make sure your form has entries
• Verify the data source field has responses
• Check that you’re using a supported field type

Colors not showing correctly? #

• Try switching to a different color palette
• Check if your theme’s CSS is conflicting

Labels overlapping? #

• Disable “Display Overlapping Labels”
• Try a different aspect ratio
• Use label position “Outside” for more space

Need Help? #

If you need assistance with WPF Charts, please visit our contact us page.