Add SurveyJS Dashboard to a React Application

This tutorial explains how to integrate SurveyJS Dashboard into a React application and visualize survey results. Follow the steps below to set up and render a dashboard:

• Install the survey-analytics npm Package
• Configure Styles
• Load Survey Results
• Configure the Dashboard
• Render the Dashboard
• Activate a SurveyJS License

The final result is an interactive dashboard similar to the one shown below:

View Full Code on GitHub

If you need a preconfigured starter project with all SurveyJS components, refer to the following repositories:

• SurveyJS + Next.js Quickstart Template
• SurveyJS + Remix Quickstart Template

SurveyJS Dashboard is distributed as the survey-analytics npm package. Install it using the following command:

npm install survey-analytics --save

SurveyJS Dashboard uses the Chart.js library for data visualization. This dependency is installed automatically.

Create a React component that will render your dashboard and import the SurveyJS Dashboard stylesheet as shown below:

// components/Dashboard.tsx
import 'survey-analytics/survey.analytics.css';

Survey results are typically collected in the SurveyModel's onComplete event handler and stored on your server. For more information, refer to the Handle Form Completion help topic.

To retrieve results, send a request to your backend and return an array of JSON objects:

// components/Dashboard.tsx
// ...
import { useEffect, useState } from 'react';
import { Dashboard } from 'survey-analytics';

const SURVEY_ID = 1;

export default function DashboardComponent() {
  const [dashboard, setDashboard] = useState<Dashboard>();

  useEffect(() => {
    loadSurveyResults(`https://your-web-service.com/${SURVEY_ID}`)
      .then((surveyResults: any[]) => {
        // ...
        // Configure and render the Dashboard here
        // Refer to the section below
        // ...
      })
      .catch((error) => {
        console.error('Failed to load survey results:', error);
      });
  }, []);

  return "...";
}

function loadSurveyResults(url: string): Promise<any[]> {
  return fetch(url, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error(`Request failed with status ${response.status}`);
      }
      return response.json();
    })
    .catch((error) => {
      throw new Error(error.message || 'Network error');
    });;
}

For demonstration purposes, this tutorial uses predefined survey results:

// components/Dashboard.tsx
// ...
const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

const surveyResults = [
  { "satisfaction-score": 5, "nps-score": 10 },
  { "satisfaction-score": 5, "nps-score": 9 },
  { "satisfaction-score": 3, "nps-score": 6 },
  { "satisfaction-score": 3, "nps-score": 6 },
  { "satisfaction-score": 2, "nps-score": 3 }
];

Pass an IDashboardOptions object to the Dashboard constructor to configure the dashboard.

Specify the data array to provide survey results. You can then either auto-generate dashboard items based on survey questions or define them manually.

To generate dashboard items automatically, assign survey questions to the questions property. Use the SurveyModel's getAllQuestions() method to retrieve them.

Each generated item inherits the question's name and title. The Dashboard also automatically selects a suitable visualization type and populates the list of available alternative types (availableTypes) that users can switch between.

Use the items array to control which items appear and override their configuration. This array can include question names and full configuration objects. When you specify a configuration object, it is merged with the auto-generated settings.

The following example uses the items array to set the default NPS visualization type for the nps-score question:

// components/Dashboard.tsx
// ...
import { useEffect, useState } from 'react';
import { Model } from 'survey-core';
import { Dashboard } from 'survey-analytics';

const SURVEY_ID = 1;

const surveyJson = { /* ... */ };
const surveyResults = [ /* ... */ ];

export default function DashboardComponent() {
  const [dashboard, setDashboard] = useState<Dashboard | null>(null);

  useEffect(() => {
    const survey = new Model(surveyJson);

    const dashboardInstance = new Dashboard({
      questions: survey.getAllQuestions(),
      data: surveyResults,
      items: [
        "satisfaction-score",
        {
          name: "nps-score",
          type: "nps"
        }
      ]
    });

    setDashboard(dashboardInstance);
  }, []);

  return "...";
}

// components/Dashboard.tsx
import 'survey-analytics/survey.analytics.css';
import { useState } from 'react';
import { Model } from 'survey-core';
import { IDashboardOptions, Dashboard } from 'survey-analytics';

const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

const surveyResults = [
  { "satisfaction-score": 5, "nps-score": 10 },
  { "satisfaction-score": 5, "nps-score": 9 },
  { "satisfaction-score": 3, "nps-score": 6 },
  { "satisfaction-score": 3, "nps-score": 6 },
  { "satisfaction-score": 2, "nps-score": 3 }
];

export default function DashboardComponent() {
  const [dashboard, setDashboard] = useState<Dashboard | null>(null);

  useEffect(() => {
    const survey = new Model(surveyJson);

    const dashboardInstance = new Dashboard({
      questions: survey.getAllQuestions(),
      data: surveyResults,
      items: [
        "satisfaction-score",
        {
          name: "nps-score",
          type: "nps"
        }
      ]
    });

    setDashboard(dashboardInstance);
  }, []);

  return "...";
}

If your dashboard is not based on a survey schema, configure all items explicitly. Populate the items array with IDashboardItemOptions objects. Use the name property to bind each item to a data field.

// components/Dashboard.tsx
// ...
import { useEffect, useState } from 'react';
import { Model } from 'survey-core';
import { Dashboard } from 'survey-analytics';

const SURVEY_ID = 1;

const surveyJson = { /* ... */ };
const surveyResults = [ /* ... */ ];

export default function DashboardComponent() {
  const [dashboard, setDashboard] = useState<Dashboard | null>(null);

  useEffect(() => {
    const survey = new Model(surveyJson);

    const dashboardInstance = new Dashboard({
      data: surveyResults,
      items: [
        {
          name: "satisfaction-score",
          type: "bar",
          title: "CSAT",
          availableTypes: [ "bar", "vbar", "pie", "gauge" ]
        },
        {
          name: "nps-score",
          type: "nps",
          title: "NPS Score",
          allowChangeType: false
        }
      ]
    });

    setDashboard(dashboardInstance);
  }, []);

  return "...";
}

// components/Dashboard.tsx
import 'survey-analytics/survey.analytics.css';
import { useState } from 'react';
import { Model } from 'survey-core';
import { IDashboardOptions, Dashboard } from 'survey-analytics';

const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

const surveyResults = [
  { "satisfaction-score": 5, "nps-score": 10 },
  { "satisfaction-score": 5, "nps-score": 9 },
  { "satisfaction-score": 3, "nps-score": 6 },
  { "satisfaction-score": 3, "nps-score": 6 },
  { "satisfaction-score": 2, "nps-score": 3 }
];

export default function DashboardComponent() {
  const [dashboard, setDashboard] = useState<Dashboard | null>(null);

  useEffect(() => {
    const survey = new Model(surveyJson);

    const dashboardInstance = new Dashboard({
      data: surveyResults,
      items: [
        {
          name: "satisfaction-score",
          type: "bar",
          title: "CSAT",
          availableTypes: [ "bar", "vbar", "pie", "gauge" ]
        },
        {
          name: "nps-score",
          type: "nps",
          title: "NPS Score",
          allowChangeType: false
        }
      ]
    });

    setDashboard(dashboardInstance);
  }, []);

  return "...";
}

Add a container element to the component template and call the render(containerId) method on the Dashboard instance you configured to mount the dashboard.

SurveyJS components do not support server-side rendering (SSR). If you are using Next.js or another framework that has adopted React Server Components, you need to explicitly mark the React component that renders a SurveyJS component as client code using the 'use client' directive.

// components/Dashboard.tsx
'use client'
// ...
import { useEffect } from 'react';

export default function DashboardComponent() {
  // ...
  useEffect(() => {
    // ...
    // Render the dashboard
    dashboardInstance.render("dashboard");

    // Cleanup when component unmounts
    return () => {
      dashboardInstance.clear();
    };
  }, []);

  return (
    <div id="dashboard" />
  );
}

The lack of SSR support may cause hydration errors if a SurveyJS component is pre-rendered on the server. To ensure against those errors, use dynamic imports with ssr: false for React components that render SurveyJS components. The following code shows how to do this in Next.js:

// dashboard/page.tsx
import dynamic from "next/dynamic";

const Dashboard = dynamic(() => import('@/components/Dashboard'), {
  ssr: false,
});

export default function SurveyDashboard() {
  return (
    <Dashboard />
  );
}

Run the application with npm run dev and open http://localhost:3000/ in your browser.

// components/Dashboard.tsx
'use client'

import { useState, useEffect } from 'react';
import 'survey-analytics/survey.analytics.css';
import { Model } from 'survey-core';
import { Dashboard } from 'survey-analytics';

const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

const surveyResults = [
  { "satisfaction-score": 5, "nps-score": 10 },
  { "satisfaction-score": 5, "nps-score": 9 },
  { "satisfaction-score": 3, "nps-score": 6 },
  { "satisfaction-score": 3, "nps-score": 6 },
  { "satisfaction-score": 2, "nps-score": 3 }
];

export default function DashboardComponent() {
  const [dashboard, setDashboard] = useState<Dashboard | null>(null);

  useEffect(() => {
    const survey = new Model(surveyJson);

    const dashboardInstance = new Dashboard({
      questions: survey.getAllQuestions(),
      data: surveyResults,
      items: [
        "satisfaction-score",
        {
          name: "nps-score",
          type: "nps"
        }
      ]
    });

    setDashboard(dashboardInstance);

    dashboardInstance.render("dashboard");

    return () => {
      dashboardInstance.clear();
    };
  }, []);

  return (
    <div id="dashboard" />
  );
}

// dashboard/page.tsx
import dynamic from "next/dynamic";

const Dashboard = dynamic(() => import('@/components/Dashboard'), {
  ssr: false,
});

export default function SurveyDashboard() {
  return (
    <Dashboard />
  );
}

View Full Code on GitHub

SurveyJS Dashboard is not available for free commercial use. To integrate it into your application, you must purchase a commercial license for the software developer(s) who will be working with the Dashboard APIs and implementing the integration. If you use SurveyJS Dashboard without a license, an alert banner will appear at the top of the interface:

After purchasing a license, follow the steps below to activate it and remove the alert banner:

1. Log in to the SurveyJS website using your email address and password. If you've forgotten your password, request a reset and check your inbox for the reset link.
2. Open the following page: How to Remove the Alert Banner. You can also access it by clicking Set up your license key in the alert banner itself.
3. Follow the instructions on that page.

Once you've completed the setup correctly, the alert banner will no longer appear.

Dashboard Demo Examples