---
title: Interactive Survey Data Dashboard
product: Dashboard
description: Create and manage multiple charts in your survey data dashboard: add visualization panels to enable chart grouping, hide unwanted charts, apply filters, and more.
framework: React
source: https://surveyjs.io/dashboard/examples/interactive-survey-data-dashboard/reactjs
index: https://surveyjs.io/dashboard/examples/overview.md
---

# Interactive Survey Data Dashboard (React)

SurveyJS Dashboard is a graphical interface for interactive survey data analysis. It allows end users to tailor dashboards to their needs: reorder charts using drag-and-drop, filter data by interacting with chart elements, adjust sorting, and hide irrelevant visualizations. These changes are reversible—users can easily undo recent actions. At the same time, the Dashboard supports non-reversible (preset) configurations defined by developers. This demo showcases one such configuration: charts grouped by type and organized into separate tabs.

Charts are rendered as dashboard items, each bound to a specific data field and visualizing responses to a single question. To group charts, instantiate multiple [`Dashboard`](/dashboard/documentation/api-reference/dashboard) instances. Pass an [`IDashboardOptions`](/dashboard/documentation/api-reference/idashboardoptions) object to the constructor, where you define the [`questions`](/dashboard/documentation/api-reference/idashboardoptions#questions) to visualize, the survey result [`data`](/dashboard/documentation/api-reference/idashboardoptions#data), and the [`items`](/dashboard/documentation/api-reference/idashboardoptions#items) to include in each Dashboard. See the Fetch API call in the Code tab for an implementation example.

## See Also

[Get Started with SurveyJS Dashboard](https://surveyjs.io/dashboard/documentation/get-started (linkStyle))

## Files

### `public/index.html`

```html
<div id="loadingIndicator" class="data-loading-indicator-panel">
  <div class="data-loading-indicator">
    <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_17928_11482)">
        <path d="M32 64C14.36 64 0 49.65 0 32C0 14.35 14.36 0 32 0C49.64 0 64 14.35 64 32C64 49.65 49.64 64 32 64ZM32 4C16.56 4 4 16.56 4 32C4 47.44 16.56 60 32 60C47.44 60 60 47.44 60 32C60 16.56 47.44 4 32 4Z" fill="#E5E5E5" />
        <path d="M53.2101 55.2104C52.7001 55.2104 52.1901 55.0104 51.8001 54.6204C51.0201 53.8404 51.0201 52.5704 51.8001 51.7904C57.0901 46.5004 60.0001 39.4704 60.0001 31.9904C60.0001 24.5104 57.0901 17.4804 51.8001 12.1904C51.0201 11.4104 51.0201 10.1404 51.8001 9.36039C52.5801 8.58039 53.8501 8.58039 54.6301 9.36039C60.6701 15.4004 64.0001 23.4404 64.0001 31.9904C64.0001 40.5404 60.6701 48.5704 54.6301 54.6204C54.2401 55.0104 53.7301 55.2104 53.2201 55.2104H53.2101Z" fill="#19B394" />
      </g>
      <defs>
        <clipPath id="clip0_17928_11482">
          <rect width="64" height="64" fill="white" />
        </clipPath>
      </defs>
    </svg>
  </div>
</div>
<div id="surveyDashboardComponent"></div>
```

### `src/settings.js`

```js
export const dataUrl = "https://api.surveyjs.io/private/surveys/nps/";
export const tabsInfo = [
    { name: "Net Promoter Score", questions: ["product_recommend", "nps_score"], dashboard: undefined },
    { name: "Customer Segmentation", questions: ["useproduct", "product_discovering", "uselibraries"], dashboard: undefined },
    { name: "Frameworks and Devices", questions: ["javascript_frameworks", "backend_language", "supported_devices"], dashboard: undefined }
];
```

### `src/SurveyDashboardComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Dashboard } from "survey-analytics";
import "survey-analytics/survey.analytics.css";
import "./index.css";
import { json } from "./json";
import "survey-core/survey-core.min.css";
import { dataUrl, tabsInfo } from "./settings";

class SurveyDashboardComponent extends React.Component {
    constructor() {
        super();
        this.state = { tabIndex: 0 };
        this.isLoaded = false;
        this.mainDiv = React.createRef();
        this.dashboardContainer = React.createRef();
    }
    componentDidMount() {
        const survey = new Model(json);
        fetch(dataUrl).then(response => response.json()).then(data => {
            const dataFromServer = data.Data;
            for (let i = 0; i < tabsInfo.length; i++) {
                const tab = tabsInfo[i];
                tab.dashboard = new Dashboard({
                    questions: survey.getAllQuestions(),
                    data: dataFromServer,
                    items: tab.questions
                });
                
            }
            
            this.isLoaded = true;
            document.getElementById("loadingIndicator").style.display = "none";
            this.mainDiv.current.style.display = "";
            this.renderContainer(0);
        });
    }
    changeTab(index) {
        this.setState({ tabIndex: index });
        this.renderContainer(index);
    }
    renderContainer(index) {
        const el = this.dashboardContainer.current;
        el.innerHTML = "";
        tabsInfo[index].dashboard.render(el);
    }
    render() {
        const tabIndex = this.state.tabIndex;
        const tabs = [];
        for (var i = 0; i < tabsInfo.length; i++) {
            const className = "tablinks" + (tabIndex === i ? " active" : "");
            const index = i;
            const key = "tab_" + i;
            tabs.push(<button key={key} className={className} onClick={() => this.changeTab(index)}>{tabsInfo[index].name}</button>);
        }
        const mainStyle = !this.isLoaded ? { display: "none" } : {};
        return (<div ref={this.mainDiv} style={mainStyle} >
            <div className="tabs">
                {tabs}
            </div>
            <div className="tabcontent" ref={this.dashboardContainer} ></div>
        </div>);
    }
}

export default SurveyDashboardComponent;
```

### `src/index.css`

```css
.tabs {
  display: flex;
  padding: 0 40px 0 40px;
  align-items: flex-start;
  gap: 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  background: rgba(28, 27, 32, 0.05);
}

@media screen and (max-width: 600px) {
    .tabs {
        padding: 0 16px;
    }
}

.tabs button {
  background-color: transparent;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;

  display: flex;
  padding: 16px 0 16px 0;
  justify-content: center;
  align-items: center;

  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.tabs button:hover {
  border-bottom: 2px solid #19B394;
}

.tabs button.active {
  border-bottom: 2px solid #19B394;
  color: rgba(0, 0, 0, 0.91);
}

.data-loading-indicator-panel {
    width: 100%;
    height: 400px;
}
.data-loading-indicator {
    position: relative;
    width: 64px;
    height: 64px;
    left: calc((100% - 64px)/ 2);
    top: calc((100% - 64px)/ 2);
    animation: data-loading-indicator-spinner 1s infinite linear;
}
@keyframes data-loading-indicator-spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyDashboardComponent from "./SurveyDashboardComponent";

const root = createRoot(document.getElementById("surveyDashboardComponent"));
root.render(<SurveyDashboardComponent />);
```

### `src/json.js`

```js
export const json = {
  "elements": [
    {
      "type": "radiogroup",
      "name": "product_discovering",
      "title": "How did you first discover our product?",
      "choices": [
        "Search engine",
        "GitHub",
        "Friend or colleague",
        {
          "value": "Redit",
          "text": "Reddit"
        },
        "Medium",
        "Twitter",
        "Facebook"
      ]
    },
    {
      "type": "radiogroup",
      "name": "useproduct",
      "title": "Do you currently use our libraries?",
      "isRequired": true,
      "choices": [ "Yes", "No" ]
    },
    {
      "type": "checkbox",
      "name": "uselibraries",
      "title": "Which libraries do you use?",
      "choices": [
        {
          "text": "Form Library",
          "value": "Survey Library (Runner)"
        },
        {
          "text": "Survey Creator",
          "value": "Survey Creator (Designer)"
        }
      ]
    },
    {
      "type": "rating",
      "name": "nps_score",
      "title": "How likely are you to recommend our product to a friend or colleague?",
      "rateMin": 1,
      "rateMax": 10
    },
    {
      "type": "radiogroup",
      "name": "product_recommend",
      "title": "Have you recommended our product to anyone?",
      "choices": [ "Yes", "No" ]
    },
    {
      "type": "checkbox",
      "name": "javascript_frameworks",
      "title": "Which JavaScript frameworks do you use?",
      "showOtherItem": true,
      "choices": [
        "React",
        "Angular",
        "jQuery",
        "Vue",
        "Meteor",
        "Ember",
        "Backbone",
        "Knockout",
        "Aurelia",
        "Polymer",
        "Mithril"
      ]
    },
    {
      "type": "checkbox",
      "name": "backend_language",
      "title": "Which web backend programming languages do you use?",
      "showOtherItem": true,
      "choices": [
        "Java",
        "Python",
        "Node.js",
        "Go",
        "Django",
        {
          "value": "Asp.net",
          "text": "ASP.NET"
        },
        "Ruby"
      ]
    },
    {
      "type": "checkbox",
      "name": "supported_devices",
      "title": "Which device types do you need to support?",
      "isRequired": true,
      "choices": [
        "Desktop",
        {
          "value": "Tablete",
          "text": "Tablet"
        },
        "Mobile"
      ]
    }
  ]
};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "babel": "latest",
    "survey-core": "latest",
    "chart.js": "4.5.1",
    "survey-analytics": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ]
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/dashboard/examples/interactive-survey-data-dashboard/angular.md)
- [Vue 3](https://surveyjs.io/dashboard/examples/interactive-survey-data-dashboard/vue3js.md)
- [jQuery](https://surveyjs.io/dashboard/examples/interactive-survey-data-dashboard/jquery.md)
- [Vanilla JS](https://surveyjs.io/dashboard/examples/interactive-survey-data-dashboard/vanillajs.md)