How to Use Data Bars to Visualize Survey Scores in WordPress

Updated July 2026 • 6 min read • By Fahad Murtaza • By Fahad Murtaza

Survey data locked in a Gravity Forms spreadsheet tells only half the story. TableCrafter's data bars feature renders inline bar charts directly inside numeric table cells, turning raw scores into instant visual comparisons without touching a charting library or writing a line of code. If you collect NPS scores, satisfaction ratings, or any 0–100 numeric scale through Gravity Forms, this guide shows you exactly how to set it up. WordPress powers 43% of all websites globally (W3Techs, July 2026), and TableCrafter bridges the gap between the data you collect and the tables your users need to see, no custom PHP, no dashboard access required for viewers. The free version on WordPress.org supports CSV, JSON, Google Sheets, and Excel. Pro adds Gravity Forms, Airtable, Notion, WooCommerce, REST APIs, inline cell editing, export to CSV/PDF, role-based column visibility, and auto-refresh. Every table embeds on any page with a [tablecrafter] shortcode or the native Gutenberg block. Notion databases support up to 10,000 rows per database on free plans (Notion documentation, 2025).

What Are Data Bars and Why Use Them for Survey Scores?

A data bar is a horizontal bar rendered inside a table cell, scaled relative to a minimum and maximum value you define. Unlike a separate chart widget that sits outside your table, data bars live in-cell alongside the numeric value itself. The bar grows or shrinks proportionally as the underlying Gravity Forms entry value changes, giving viewers an at-a-glance ranking across every row simultaneously.

For survey scores this is particularly useful. When you have fifty respondents and a column of numbers between 1 and 10, a human eye cannot rank them at a glance. With data bars, the highest-scoring respondents rise visually to the top even before anyone sorts the column. Common use cases include:

• Net Promoter Score (NPS) fields (0–10 scale)
• Customer satisfaction ratings (1–5 stars mapped to numeric values)
• Employee engagement survey dimensions
• Product or event feedback forms
• Quiz or assessment scores (0–100)

Step 1: How Do I Build Your Survey Table in TableCrafter?

Before you can enable data bars you need a table connected to the Gravity Forms survey form. Open your WordPress admin and navigate to TableCrafter → Tables → Add New. The table builder opens with a tabbed configuration panel on the left and a live preview on the right.

1. In the Data Source tab, select Gravity Forms and choose the form that contains your survey responses.
2. Switch to the Columns tab. TableCrafter loads all available form fields as potential columns. Enable the fields you want to display: respondent name, submission date, and the numeric score field(s).
3. For each numeric score column, set the Column Type to Number. This tells the renderer the cell contains a scalar value, which is a prerequisite for data bars.
4. Save the table. TableCrafter stores the configuration and assigns a numeric table ID visible in the URL (e.g., post=42). Note this ID.

Place the table on any page or post using one of the equivalent shortcodes:

[tablecrafter id="42"]
[tablecrafter id="42"]
[tablecrafter id="42"]

Step 2: How Do I Enable Data Bars on a Numeric Column?

With the table saved and displaying data, return to the table builder (TableCrafter → Tables, click Edit on your table). Click the column you want to visualize, the score column, to expand its settings panel.

Scroll to the Display section within that column's settings. You will find a Data Bars toggle. Enable it. Three additional fields appear:

• Min Value, the lower bound of your scale. For a 1–10 NPS field, enter 0 or 1.
• Max Value, the upper bound. For NPS enter 10; for a percentage score enter 100.
• Bar Color, accepts any valid CSS color value (#4f46e5, rgb(79,70,229), or a named color). Leave blank to inherit the theme accent color.

Save the table. The live preview in the builder will immediately render the bars inside each cell, scaled between your min and max values.

Step 3: How Do I Combine Data Bars with Sorting and Filters?

Data bars become even more powerful when paired with TableCrafter's built-in sort and filter controls, both available to Free tier users for basic functionality and extended on Pro.

Because sorting is column-based, clicking the score column header instantly reorders all rows from lowest to highest (or highest to lowest) while the bars redraw in their new positions. Viewers can immediately identify your top and bottom performers without any additional configuration.

On the Pro tier, advanced filters let you scope the visible rows before the bars render. For example, you could add a filter on a "Department" column to show only responses from the engineering team, and the data bars will rescale visually within that subset. The min/max values you configured remain fixed anchors, so a score of 7 always renders at the same bar width regardless of filtering, preserving a consistent reference frame across different views.

[tablecrafter id="42" default_sort="score_column" default_order="desc"]

Step 4: How Do I Control Who Sees the Data with Role-Based Permissions?

Survey data is often sensitive. TableCrafter's Pro role-based permissions let you restrict both table-level access and individual column visibility by WordPress user role.

In the table builder, open the Permissions tab. You can set:

• Table Access, which roles can see the table at all (e.g., restrict to administrator and editor).
• Column-Level Visibility, hide specific columns from certain roles. For example, you might show the data bar score column only to managers while showing respondent names only to administrators.

This means you can embed the same [tablecrafter id="42"] shortcode on a single page and serve different views to different logged-in users, the data bars render only for roles that have visibility on the numeric column.

Step 5: How Do I Export Results with Data Intact?

When you need to share survey results outside WordPress, TableCrafter's Pro export feature lets you download the table as CSV, Excel, or PDF directly from the frontend table toolbar. The exported file preserves the raw numeric values in the score column, the visual bar is a display-layer overlay and does not alter the underlying data.

For recurring reports, pair the export with Pro email alerts. Configure an alert to fire whenever a new Gravity Forms entry is submitted to your survey form. TableCrafter will email a designated address (or list of addresses) with a notification, letting stakeholders know new responses have arrived without them needing to log into WordPress.

If you want the displayed table to always reflect the latest submissions without a page reload, enable the Auto-Refresh option in the table settings and configure an interval in seconds. The table will re-query Gravity Forms data via AJAX on that schedule, and data bars will update live as new scores arrive.

How Does Troubleshooting Common Data Bar Issues Work?

If your data bars are not appearing after following the steps above, work through this checklist:

• Column type is not Number. Open the column settings and confirm the type dropdown is set to Number, not Text or Auto-Detect.
• Min and Max are identical. If both are set to 0, every bar renders at 0% width. Make sure Max is greater than Min and covers your actual data range.
• Plugin license not active. Data bars are a Pro feature. Navigate to TableCrafter → Settings → License and confirm your license key is entered and validated. A warning banner in the table builder appears when the license is inactive.
• Caching serving stale markup. If you enabled data bars after the page was first cached, purge your caching plugin (WP Rocket, NitroPack, W3 Total Cache) and reload.
• Gravity Forms field stores non-numeric values. Some Gravity Forms field types (like checkboxes or dropdowns) store label text rather than integers. Map to a Number or Rating field type in your form, or remap via a Gravity Forms notification/feed before the entry hits the table.