Cross-Filtering in SurveyJS Dashboard

Cross-filtering is an interactive feature that lets users click a chart element (for example, a bar or pie slice) to filter all dashboard items and drill down into the corresponding subset of responses.

View Demo

Cross-filtering is available for the following chart types:

• Bar Chart
• Pie Chart
• Doughnut Chart
• Histogram

Cross-filtering is enabled by default. To disable it for the entire dashboard, set the allowSelection property to false when creating a Dashboard instance:

import { Dashboard } from "survey-analytics";

const dashboard = new Dashboard({
  questions: [ /* Survey questions to visualize */ ],
  data: [ /* Survey responses to aggregate */ ],
  items: [ /* Dashboard item configurations */ ],
  allowSelection: false // Disables cross-filtering globally
});

To override this behavior for a specific dashboard item, configure the allowSelection property in its visualizer object. Item-level settings take precedence over the global setting.

import { Dashboard } from "survey-analytics";

const dashboard = new Dashboard({
  questions: [ /* ... */ ],
  data: [ /* ... */ ],
  allowSelection: false, // Disable cross-filtering globally
  items: [
    {
      name: "question1",
      visualizer: {
        allowSelection: true // Re-enable cross-filtering for this item
      }
    },
    // ...
  ]
});

To apply a cross-filter in code, call the setFilter method on the Dashboard instance. Pass the dashboard item name and the target value:

import { Dashboard } from "survey-analytics";

const dashboard = new Dashboard({
  /* Dashboard configuration */
});

dashboard.setFilter("question1", "item1");

• Date Range Filtering
• Sorting
• Visualization Type Selection
• Legend-Based Series Toggling
• Dynamic Layout Management