---
title: Visualize Net Promoter Score (NPS) Results Using SurveyJS Dashboard
product: Dashboard
description: Learn how to effectively visualize and analyze Net Promoter Score (NPS) results using the SurveyJS Dashboard. Discover how to use the Rating Scale question for NPS surveys and the benefits of the special NPS visualizer for comprehensive insights. Try out our JavaScript demo to learn more.
framework: React
source: https://surveyjs.io/dashboard/examples/how-to-visualize-net-promoter-score-results/reactjs
index: https://surveyjs.io/dashboard/examples/overview.md
---

# Visualize Net Promoter Score (NPS) Results Using SurveyJS Dashboard (React)

Net Promoter Score (NPS) is a popular metric used to assess and predict customer loyalty by asking respondents only one question: "On a scale from 0 to 10, how likely are you to recommend our product/service to a friend or colleague?". Respondents who score 9-10 (promoters) will most likely keep buying your product and bring new customers. Respondents scoring 7-8 (passives) are overall satisfied with your product but may switch to your competitors if they come across a more attractive offering. Respondents with a score of 0-6 (detractors) are unhappy with your product and may damage your brand through negative word-of-mouth. To calculate the NPS, subtract the percentage of detractors from that of promoters. This demo shows how to enable a special NPS visualizer in SurveyJS Dashboard.

## SurveyJS NPS Question

In SurveyJS, you can use the [Rating Scale](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model) question type to add an NPS question to your form. A Rating Scale question asks respondents to evaluate a particular characteristic of a product or service on a predefined scale. The scale can display a range of numbers, graphic symbols (stars or emojis), or descriptive terms that represent different degrees of agreement or satisfaction. For more information on how to create an NPS question using the Rating Scale question type, refer to the following demo:

[NPS Survey Question](https://surveyjs.io/form-library/examples/nps-question (linkStyle))

## Enable Dedicated NPS Visualization

By default, responses to a Rating Scale question can be visualized using bar, pie, gauge, bullet, or histogram charts. When a Rating Scale question is used to collect NPS data, you can configure its dashboard item to render a dedicated NPS visualization. This visualization displays the calculated NPS score along with the number and percentage of promoters, passives, and detractors.

To render the NPS visualization by default, set the [`type`](/dashboard/documentation/api-reference/idashboarditemoptions#type) property to `"nps"` for the dashboard item associated with the NPS question. This approach is demonstrated in the current demo.

If you want the NPS visualization to be available for selection without making it the default, add `"nps"` to the [`availableTypes`](/dashboard/documentation/api-reference/idashboarditemoptions#availableTypes) array of the NPS dashboard item:

```js
import { Dashboard } from "survey-analytics";

const dashboard = new Dashboard({
  questions: survey.getAllQuestions(),
  data: dataFromServer,
  items: [{
    name: "nps_score",
    availableTypes: ["bar", "vbar", "pie", "doughnut", "gauge", "bullet", "nps"]
  },
  // ...
  ]
});
```

## 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/surveydata.js`

```js
function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
function generateData() {
    const data = [];
    for (let index = 0; index < 1000; index++) {
        data.push({
            nps_score: (index % 2) ? randomIntFromInterval(0, 10) : randomIntFromInterval(8, 10)
        });
    }
    return data;
}
export const dataFromServer = generateData();
```

### `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 { dataFromServer } from "./surveydata";

class SurveyDashboardComponent extends React.Component {
    componentDidMount() {
        const survey = new Model(json);
        // Imitate an asynchronous call that loads data from a server
        setTimeout(() => {
            const dashboard = new Dashboard({
                questions: survey.getAllQuestions(),
                data: dataFromServer,
                showToolbar: false,
                items: [{
                    name: "nps_score",
                    type: "nps",
                    allowChangeType: false
                }]
            });
            
            
            
            
            document.getElementById("loadingIndicator").style.display = "none";
            dashboard.render("surveyDashboardContainer");
            
        }, 1000);
    }
    render() {
        return React.createElement("div", { id: "surveyDashboardContainer" });
    }
}

export default SurveyDashboardComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
.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 = {
  "pages": [
    {
      "name": "promotion",
      "elements": [
        {
          "type": "rating",
          "name": "nps_score",
          "title": "How likely are you to recommend our product to a friend or colleague?",
          "isRequired": true,
          "rateMin": 0,
          "rateMax": 10,
          "minRateDescription": "Most unlikely",
          "maxRateDescription": "Most likely"
        }
      ]
    }   
  ]
};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "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/how-to-visualize-net-promoter-score-results/angular.md)
- [Vue 3](https://surveyjs.io/dashboard/examples/how-to-visualize-net-promoter-score-results/vue3js.md)
- [jQuery](https://surveyjs.io/dashboard/examples/how-to-visualize-net-promoter-score-results/jquery.md)
- [Vanilla JS](https://surveyjs.io/dashboard/examples/how-to-visualize-net-promoter-score-results/vanillajs.md)