Integrate SurveyJS Dashboard with Plotly.js
Plotly.js is a third-party data visualization library that you can use as an alternative to the default ApexCharts integration in SurveyJS Dashboard. While Plotly.js has a larger bundle size, it offers a higher degree of customization and a broader set of charting capabilities.
Add Dependencies
Angular
Install the survey-analytics npm package and Plotly.js type definitions:
npm install survey-analytics --save
npm i @types/plotly.js-dist-min --save-dev
Because of how Plotly.js exports modules, enable the allowSyntheticDefaultImports option in your tsconfig.json:
// tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true
}
}
Then, register the Plotly-specific styles in angular.json:
// angular.json
"styles": [
"src/styles.css",
"node_modules/survey-analytics/survey.analytics.plotly.min.css"
]
Vue
Install the survey-analytics npm package:
npm install survey-analytics --save
Import the Plotly integration stylesheet:
<script setup lang="ts">
import 'survey-analytics/survey.analytics.plotly.css'
</script>
React
Install the survey-analytics npm package:
npm install survey-analytics --save
Import the Plotly integration stylesheet in your component:
import 'survey-analytics/survey.analytics.plotly.css';
HTML/CSS/JavaScript
SurveyJS Dashboard depends on Survey Core, a platform-independent part of the SurveyJS Form Library. If your page also renders surveys, include the full Form Library resources as well.
Add the following resources in this order:
<head>
<!-- Survey Core -->
<script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
<!-- Optional: Survey UI -->
<!-- <link href="https://unpkg.com/survey-core/survey-core.min.css" type="text/css" rel="stylesheet"> -->
<!-- <script type="text/javascript" src="https://unpkg.com/survey-js-ui/survey-js-ui.min.js"></script> -->
<!-- Plotly.js -->
<script src="https://unpkg.com/plotly.js-dist-min/plotly.min.js"></script>
<!-- SurveyJS Dashboard (Plotly integration) -->
<link href="https://unpkg.com/survey-analytics/survey.analytics.plotly.min.css" rel="stylesheet">
<script src="https://unpkg.com/survey-analytics/survey.analytics.plotly.min.js"></script>
</head>
Render the Dashboard
To display a dashboard, add a container element to your component or page and render a Dashboard instance into it.
Angular
Import Dashboard from the "survey-analytics/plotly" module and use the AfterViewInit hook:
<div id="dashboard"></div>
import { AfterViewInit, Component } from '@angular/core';
import { Model } from 'survey-core';
import { Dashboard } from 'survey-analytics/plotly';
const surveyJson = { /* Survey JSON schema */ };
const surveyResults = { /* Survey responses */};
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
title = 'SurveyJS Dashboard for Angular';
ngAfterViewInit(): void {
const survey = new Model(surveyJson);
const dashboard = new Dashboard({
questions: survey.getAllQuestions(),
data: surveyResults
});
dashboard.render("dashboard");
}
}
Vue.js
Import Dashboard from the "survey-analytics/plotly" module and use the onMounted hook:
<script setup lang="ts">
import 'survey-analytics/survey.analytics.plotly.css'
import { Model } from 'survey-core'
import { Dashboard } from 'survey-analytics/plotly'
import { onMounted } from 'vue'
const surveyJson = { /* Survey JSON schema */ };
const surveyResults = { /* Survey responses */};
onMounted(() => {
const survey = new Model(surveyJson);
const dashboard = new Dashboard({
questions: survey.getAllQuestions(),
data: surveyResults
});
dashboard.render("dashboard");
});
</script>
<template>
<div id="dashboard" />
</template>
React
Import Dashboard from the "survey-analytics/plotly" module and use the useEffect hook, as shown below.
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 'survey-analytics/survey.analytics.plotly.css';
import { useState, useEffect } from 'react';
import { Model } from 'survey-core';
import { Dashboard } from 'survey-analytics/plotly';
const surveyJson = { /* Survey JSON schema */ };
const surveyResults = { /* Survey responses */};
export default function DashboardComponent() {
const [dashboard, setDashboard] = useState<Dashboard | null>(null);
useEffect(() => {
// Initialize the survey model
const survey = new Model(surveyJson);
// Create the dashboard instance
const dashboardInstance = new Dashboard({
questions: survey.getAllQuestions(),
data: surveyResults
});
setDashboard(dashboardInstance);
// 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 />
);
}
HTML/CSS/JavaScript
Reference Dashboard from the SurveyAnalyticsPlotly namespace and use the DOMContentLoaded event to render it:
<div id="dashboard"></div>
const surveyJson = { /* Survey JSON schema */ };
const surveyResults = { /* Survey responses */};
const survey = new Survey.Model(surveyJson);
const dashboard = new SurveyAnalyticsPlotly.Dashboard({
questions: survey.getAllQuestions(),
data: surveyResults
});
document.addEventListener("DOMContentLoaded", function() {
dashboard.render(document.getElementById("dashboard"));
});
Next Steps
Once integrated, you can configure the dashboard in the same way as with the default ApexCharts setup. Refer to platform-specific guides and examples for details:
Send feedback to the SurveyJS team
Need help? Visit our support page