Visualize Net Promoter Score (NPS) Results Using SurveyJS Dashboard

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.

In SurveyJS, you can use the Rating Scale 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

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 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 array of the NPS dashboard item:

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"]
  },
  // ...
  ]
});