---
title: "Filter the Chart While Hiding the Table"
description: "Workaround to set up a chart with column filters and hide the source table"
url: https://help.wpdatatables.com/en/articles/30-filter-the-chart-while-hiding-the-table
collection: "Charts"
updated: 2026-08-31
language: en
---

# Filter the Chart While Hiding the Table

Workaround to set up a chart with column filters and hide the source table

By default, charts **won’t follow table filtering** unless they’re on the same page as their source table.

But good news! 🎉 You can still make a chart respond to filters—even if you don’t want to display the table itself.

To achieve this, just insert **both the table and the chart shortcodes on the same page**, and enable **“**[**Follow table filtering**](https://wpdatatables.com/documentation/wpdatacharts/follow-table-filtering-in-charts/)**”** in the chart's settings (via Chart Wizard).

Then, choose one of the two workarounds below depending on whether you want to hide **everything**, or just the **table body**:

* * *

### ✅ Option 1: **Hide the table and filters completely**

Use this if you want only the **chart visible**—no table, no filters.

1.  On the page, add both the **table** and **chart** shortcodes.
    
2.  In the table settings, go to:  
    `Customize → Custom CSS`
    
3.  Add this CSS to the Table’s settings/Customize/Custom CSS:
    

```javascript
.wpdt-c .wpDataTables.wpDataTablesWrapper {
    display: none !important;
}
```

🟢 _Result:_ The table will be completely hidden, but the chart will still **respond to filters** (e.g. via URL parameters or programmatic filtering).

* * *

### 🧩 Option 2: **Hide only the table, but keep the filters visible**

Use this if you want the chart to stay on the page **with column filters**, but **without** showing the table itself.

1.  In table settings:
    
    -   Go to the **Display** tab and disable:
        
        -   "Show X entries" dropdown
            
        -   "Info block"
            
            ![](https://staticfiles.gleap.io/helparticle/20250521124910_9356.png)
            
    -   Go to the **Sorting and Filtering** tab and enable:
        
        -   "Main search block"
            
        -   "Show filters in a form above the table"
            
            ![](https://staticfiles.gleap.io/helparticle/20250521124934_5975.png)
            
2.  Then, add this CSS in the table settings/Customize → Custom CSS:
    

```javascript
.wpdt-c .wpDataTablesWrapper table {
display: none !important;
}
```

🟢 _Result:_ Filters remain visible above the chart, and the chart **dynamically responds** to user filtering input.

🎯 **Final Tip:**  
These workarounds rely on the chart being tied to a visible (or invisible) table on the same page. So always include both shortcodes together—even if one is hidden!