---
title: Pivot Chart for Household Income Survey Analysis
product: Dashboard
description: Learn how to analyze income distribution by demographic group using SurveyJS Dashboard. This demo shows an interactive pivot chart dashboard with dynamic categories and series.
framework: React
source: https://surveyjs.io/dashboard/examples/household-income-analysis-pivot-chart/reactjs
index: https://surveyjs.io/dashboard/examples/overview.md
---

# Pivot Chart for Household Income Survey Analysis (React)

This example demonstrates how to analyze household income data alongside key demographic dimensions using an interactive pivot chart from the SurveyJS Dashboard library. Users can dynamically reconfigure categories, series, and aggregation settings to uncover patterns, identify disparities, and explore correlations within the dataset.

## Create a Pivot Chart Dashboard Item

To add a pivot chart to the Dashboard, create a dashboard item with the [`type`](/dashboard/documentation/api-reference/idashboarditemoptions#type) property set to `"pivot"`. Specify the item's [`name`](/dashboard/documentation/api-reference/idashboarditemoptions#name) and [`title`](/dashboard/documentation/api-reference/idashboarditemoptions#title):

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

const dashboard = new Dashboard({
  data: dataFromServer,
  items: [{
    name: "pivot-chart",
    type: "pivot",
    title: "Household Income and Demographics Analysis"
  }]
});
```

## Bind the Pivot Chart to Data

Configure data binding and other pivot chart settings using the [`visualizer`](/dashboard/documentation/api-reference/idashboarditemoptions#visualizer) object. Assign survey questions available for user selection to the [`questions`](/dashboard/documentation/api-reference/ipivotvisualizeroptions#questions) array and define the following data fields:

- [`categoryField`](/dashboard/documentation/api-reference/ipivotvisualizeroptions#categoryField)           
The data field whose values form categories along the X axis.

- [`seriesField`](/dashboard/documentation/api-reference/ipivotseriesoptions#seriesField) (within each object in the [`series`](/dashboard/documentation/api-reference/ipivotvisualizeroptions#series) array)         
The data field whose values define individual series and appear in the legend.

- [`valueField`](/dashboard/documentation/api-reference/ipivotseriesoptions#valueField) (within each object in the `series` array)          
The data field whose values are aggregated and plotted on the Y axis. If not set, the `seriesField` is used.

Users can change selected data fields at runtime.

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

const dashboard = new Dashboard({
  data: dataFromServer,
  items: [{
    name: "pivot-chart",
    type: "pivot",
    title: "Household Income and Demographics Analysis",
    visualizer: {
      questions: survey.getAllQuestions(),
      categoryField: "education_level",
      series: [{
        valueField: "annual_income",
        seriesField: "employment_status"
      }]
    }
  }]
});
```

## Select the Value Aggregation Method

Pivot values can be aggregated using different methods. By default, values are counted. To aggregate numeric data (for example, income), set a series' [`aggregation`](/dashboard/documentation/api-reference/ipivotseriesoptions#aggregation) property to `"sum"`, as shown below.

Users can switch the aggregation method at runtime.

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

const dashboard = new Dashboard({
  // ...
  items: [{
    name: "pivot-chart",
    type: "pivot",
    // ...
    visualizer: {
      // ...
      series: [{
        valueField: "annual_income",
        seriesField: "employment_status",
        aggregation: "sum" // default: "count"
      }]
    }
  }]
});
```

## Enable the Secondary Y Axis

The secondary Y axis allows you to plot multiple measures with different scales on the same chart (for example, total income and respondent count). This is useful when combining metrics that are not directly comparable on a single axis.

To enable the secondary Y axis, set the [`useSecondaryYAxis`](/dashboard/documentation/api-reference/ipivotvisualizeroptions#useSecondaryYAxis) property to `true`. Then assign a series to the secondary axis by setting its [`yAxis`](/dashboard/documentation/api-reference/ipivotseriesoptions#yAxis) property to `"secondary"`:

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

const dashboard = new Dashboard({
  // ...
  items: [{
    name: "pivot-chart",
    type: "pivot",
    // ...
    visualizer: {
      // ...
      series: [{
        seriesField: "series1"
      }, {
        seriesField: "series2",
        yAxis: "secondary"
      }],
      useSecondaryYAxis: true
    }
  }]
});
```

Users can enable or disable the secondary Y axis and move series between axes at runtime. In this demo, open the pivot chart settings, enable the **Secondary Y axis** option, and select which series should be plotted against it.

## 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
export const dataFromServer = [
  {
    "household_head_age": 32,
    "household_size": 5,
    "region": "Montana",
    "education_level": "Bachelor's degree",
    "employment_status": "Retired",
    "annual_income": 40952,
    "income_sources": [
      "Government assistance"
    ]
  },
  {
    "household_head_age": 46,
    "household_size": 7,
    "region": "Florida",
    "education_level": "Master's degree or higher",
    "employment_status": "Employed part-time",
    "annual_income": 142990,
    "income_sources": [
      "other"
    ],
    "income_sources-Comment": "Crowdfunding / donations"
  },
  {
    "household_head_age": 71,
    "household_size": 7,
    "region": "Georgia",
    "education_level": "Primary education",
    "employment_status": "Self-employed",
    "annual_income": 25480,
    "income_sources": [
      "other",
      "Pension / Retirement"
    ],
    "income_sources-Comment": "Tips / commissions"
  },
  {
    "household_head_age": 73,
    "household_size": 6,
    "region": "Kentucky",
    "education_level": "No formal education",
    "employment_status": "Employed part-time",
    "annual_income": 137472,
    "income_sources": [
      "Pension / Retirement",
      "Salary / Wages",
      "Government assistance"
    ]
  },
  {
    "household_head_age": 50,
    "household_size": 2,
    "region": "Iowa",
    "education_level": "Master's degree or higher",
    "employment_status": "Employed part-time",
    "annual_income": 94307,
    "income_sources": [
      "other"
    ],
    "income_sources-Comment": "Scholarships / stipends"
  },
  {
    "household_head_age": 73,
    "household_size": 4,
    "region": "Oregon",
    "education_level": "Secondary education",
    "employment_status": "Employed part-time",
    "annual_income": 33955,
    "income_sources": [
      "other",
      "Investments / Dividends",
      "Business income"
    ],
    "income_sources-Comment": "Capital gains"
  },
  {
    "household_head_age": 25,
    "household_size": 1,
    "region": "Nevada",
    "education_level": "Primary education",
    "employment_status": "Employed full-time",
    "annual_income": 144993,
    "income_sources": [
      "Pension / Retirement"
    ]
  },
  {
    "household_head_age": 46,
    "household_size": 4,
    "region": "Utah",
    "education_level": "Master's degree or higher",
    "employment_status": "Retired",
    "annual_income": 49839,
    "income_sources": [
      "Business income",
      "other"
    ],
    "income_sources-Comment": "Freelance gigs"
  },
  {
    "household_head_age": 20,
    "household_size": 7,
    "region": "Oregon",
    "education_level": "Bachelor's degree",
    "employment_status": "Self-employed",
    "annual_income": 102059,
    "income_sources": [
      "Salary / Wages"
    ]
  },
  {
    "household_head_age": 81,
    "household_size": 4,
    "region": "Illinois",
    "education_level": "No formal education",
    "employment_status": "Employed part-time",
    "annual_income": 118933,
    "income_sources": [
      "other"
    ],
    "income_sources-Comment": "Freelance gigs"
  },
  {
    "household_head_age": 29,
    "household_size": 3,
    "region": "Maryland",
    "education_level": "Bachelor's degree",
    "employment_status": "Retired",
    "annual_income": 110535,
    "income_sources": [
      "Pension / Retirement"
    ]
  },
  {
    "household_head_age": 30,
    "household_size": 2,
    "region": "Connecticut",
    "education_level": "No formal education",
    "employment_status": "Self-employed",
    "annual_income": 48908,
    "income_sources": [
      "Government assistance",
      "Business income"
    ]
  },
  {
    "household_head_age": 84,
    "household_size": 6,
    "region": "Tennessee",
    "education_level": "Bachelor's degree",
    "employment_status": "Self-employed",
    "annual_income": 68780,
    "income_sources": [
      "Salary / Wages",
      "other",
      "Business income"
    ],
    "income_sources-Comment": "Royalties"
  },
  {
    "household_head_age": 79,
    "household_size": 4,
    "region": "Virginia",
    "education_level": "No formal education",
    "employment_status": "Unemployed",
    "annual_income": 20118,
    "income_sources": [
      "Business income",
      "Government assistance",
      "Investments / Dividends"
    ]
  },
  {
    "household_head_age": 39,
    "household_size": 4,
    "region": "Maryland",
    "education_level": "Secondary education",
    "employment_status": "Employed full-time",
    "annual_income": 124043,
    "income_sources": [
      "Salary / Wages"
    ]
  },
  {
    "household_head_age": 52,
    "household_size": 5,
    "region": "Alaska",
    "education_level": "Bachelor's degree",
    "employment_status": "Retired",
    "annual_income": 126593,
    "income_sources": [
      "Investments / Dividends"
    ]
  },
  {
    "household_head_age": 40,
    "household_size": 2,
    "region": "South Carolina",
    "education_level": "No formal education",
    "employment_status": "Employed full-time",
    "annual_income": 175551,
    "income_sources": [
      "Government assistance",
      "Business income"
    ]
  },
  {
    "household_head_age": 79,
    "household_size": 3,
    "region": "Illinois",
    "education_level": "Secondary education",
    "employment_status": "Self-employed",
    "annual_income": 69519,
    "income_sources": [
      "Government assistance"
    ]
  },
  {
    "household_head_age": 26,
    "household_size": 1,
    "region": "Wyoming",
    "education_level": "Bachelor's degree",
    "employment_status": "Unemployed",
    "annual_income": 34760,
    "income_sources": [
      "Investments / Dividends",
      "Government assistance"
    ]
  },
  {
    "household_head_age": 31,
    "household_size": 2,
    "region": "Montana",
    "education_level": "Bachelor's degree",
    "employment_status": "Retired",
    "annual_income": 100332,
    "income_sources": [
      "Investments / Dividends"
    ]
  },
  {
    "household_head_age": 21,
    "household_size": 7,
    "region": "Hawaii",
    "education_level": "Secondary education",
    "employment_status": "Employed part-time",
    "annual_income": 199485,
    "income_sources": [
      "Government assistance",
      "Business income"
    ]
  },
  {
    "household_head_age": 54,
    "household_size": 4,
    "region": "North Carolina",
    "education_level": "Bachelor's degree",
    "employment_status": "Unemployed",
    "annual_income": 96045,
    "income_sources": [
      "other"
    ],
    "income_sources-Comment": "Freelance gigs"
  },
  {
    "household_head_age": 75,
    "household_size": 2,
    "region": "Pennsylvania",
    "education_level": "No formal education",
    "employment_status": "Employed full-time",
    "annual_income": 191024,
    "income_sources": [
      "Government assistance"
    ]
  },
  {
    "household_head_age": 35,
    "household_size": 5,
    "region": "Indiana",
    "education_level": "Bachelor's degree",
    "employment_status": "Employed part-time",
    "annual_income": 61400,
    "income_sources": [
      "Salary / Wages",
      "other",
      "Business income"
    ],
    "income_sources-Comment": "Royalties"
  },
  {
    "household_head_age": 50,
    "household_size": 8,
    "region": "Missouri",
    "education_level": "Bachelor's degree",
    "employment_status": "Self-employed",
    "annual_income": 52082,
    "income_sources": [
      "Business income",
      "Pension / Retirement",
      "Salary / Wages"
    ]
  },
  {
    "household_head_age": 45,
    "household_size": 4,
    "region": "Wyoming",
    "education_level": "Primary education",
    "employment_status": "Unemployed",
    "annual_income": 75507,
    "income_sources": [
      "Salary / Wages"
    ]
  },
  {
    "household_head_age": 76,
    "household_size": 2,
    "region": "Missouri",
    "education_level": "Secondary education",
    "employment_status": "Retired",
    "annual_income": 90392,
    "income_sources": [
      "Pension / Retirement",
      "Government assistance",
      "other"
    ],
    "income_sources-Comment": "Freelance gigs"
  },
  {
    "household_head_age": 53,
    "household_size": 6,
    "region": "New York",
    "education_level": "Secondary education",
    "employment_status": "Retired",
    "annual_income": 185922,
    "income_sources": [
      "other",
      "Business income",
      "Salary / Wages"
    ],
    "income_sources-Comment": "Scholarships / stipends"
  },
  {
    "household_head_age": 75,
    "household_size": 8,
    "region": "Kentucky",
    "education_level": "No formal education",
    "employment_status": "Unemployed",
    "annual_income": 104055,
    "income_sources": [
      "other",
      "Investments / Dividends",
      "Government assistance"
    ],
    "income_sources-Comment": "Freelance gigs"
  },
  {
    "household_head_age": 52,
    "household_size": 7,
    "region": "Idaho",
    "education_level": "Primary education",
    "employment_status": "Employed part-time",
    "annual_income": 142592,
    "income_sources": [
      "Pension / Retirement",
      "Business income"
    ]
  },
  {
    "household_head_age": 27,
    "household_size": 8,
    "region": "North Dakota",
    "education_level": "Secondary education",
    "employment_status": "Retired",
    "annual_income": 109247,
    "income_sources": [
      "Government assistance"
    ]
  },
  {
    "household_head_age": 72,
    "household_size": 5,
    "region": "Kentucky",
    "education_level": "No formal education",
    "employment_status": "Employed full-time",
    "annual_income": 174444,
    "income_sources": [
      "other",
      "Pension / Retirement"
    ],
    "income_sources-Comment": "Agricultural / farming income"
  },
  {
    "household_head_age": 33,
    "household_size": 7,
    "region": "Michigan",
    "education_level": "Primary education",
    "employment_status": "Employed full-time",
    "annual_income": 193752,
    "income_sources": [
      "Salary / Wages"
    ]
  },
  {
    "household_head_age": 65,
    "household_size": 7,
    "region": "Indiana",
    "education_level": "Bachelor's degree",
    "employment_status": "Unemployed",
    "annual_income": 92578,
    "income_sources": [
      "Investments / Dividends",
      "Salary / Wages",
      "other"
    ],
    "income_sources-Comment": "Freelance gigs"
  },
  {
    "household_head_age": 75,
    "household_size": 1,
    "region": "Alabama",
    "education_level": "No formal education",
    "employment_status": "Employed part-time",
    "annual_income": 143485,
    "income_sources": [
      "Government assistance"
    ]
  },
  {
    "household_head_age": 46,
    "household_size": 8,
    "region": "Florida",
    "education_level": "Primary education",
    "employment_status": "Self-employed",
    "annual_income": 139901,
    "income_sources": [
      "Salary / Wages"
    ]
  },
  {
    "household_head_age": 76,
    "household_size": 1,
    "region": "Alaska",
    "education_level": "Secondary education",
    "employment_status": "Unemployed",
    "annual_income": 150903,
    "income_sources": [
      "Pension / Retirement"
    ]
  },
  {
    "household_head_age": 40,
    "household_size": 7,
    "region": "North Carolina",
    "education_level": "Bachelor's degree",
    "employment_status": "Employed full-time",
    "annual_income": 38558,
    "income_sources": [
      "Investments / Dividends"
    ]
  },
  {
    "household_head_age": 64,
    "household_size": 2,
    "region": "Alaska",
    "education_level": "No formal education",
    "employment_status": "Employed full-time",
    "annual_income": 97138,
    "income_sources": [
      "other",
      "Investments / Dividends"
    ],
    "income_sources-Comment": "Freelance gigs"
  },
  {
    "household_head_age": 83,
    "household_size": 7,
    "region": "Colorado",
    "education_level": "Primary education",
    "employment_status": "Retired",
    "annual_income": 26982,
    "income_sources": [
      "Salary / Wages",
      "Business income"
    ]
  },
  {
    "household_head_age": 40,
    "household_size": 8,
    "region": "Ohio",
    "education_level": "Bachelor's degree",
    "employment_status": "Self-employed",
    "annual_income": 177414,
    "income_sources": [
      "Investments / Dividends",
      "Pension / Retirement",
      "Business income"
    ]
  },
  {
    "household_head_age": 78,
    "household_size": 8,
    "region": "West Virginia",
    "education_level": "Primary education",
    "employment_status": "Retired",
    "annual_income": 65204,
    "income_sources": [
      "other",
      "Salary / Wages",
      "Pension / Retirement"
    ],
    "income_sources-Comment": "Freelance gigs"
  },
  {
    "household_head_age": 48,
    "household_size": 8,
    "region": "Massachusetts",
    "education_level": "No formal education",
    "employment_status": "Retired",
    "annual_income": 91062,
    "income_sources": [
      "Salary / Wages",
      "Government assistance",
      "Business income"
    ]
  },
  {
    "household_head_age": 52,
    "household_size": 2,
    "region": "Oklahoma",
    "education_level": "Secondary education",
    "employment_status": "Self-employed",
    "annual_income": 66033,
    "income_sources": [
      "Business income",
      "other",
      "Pension / Retirement"
    ],
    "income_sources-Comment": "Freelance gigs"
  },
  {
    "household_head_age": 41,
    "household_size": 1,
    "region": "Pennsylvania",
    "education_level": "Bachelor's degree",
    "employment_status": "Retired",
    "annual_income": 175730,
    "income_sources": [
      "Salary / Wages",
      "Business income"
    ]
  },
  {
    "household_head_age": 57,
    "household_size": 2,
    "region": "North Carolina",
    "education_level": "Primary education",
    "employment_status": "Unemployed",
    "annual_income": 46744,
    "income_sources": [
      "Investments / Dividends",
      "Government assistance"
    ]
  },
  {
    "household_head_age": 31,
    "household_size": 5,
    "region": "New Hampshire",
    "education_level": "Primary education",
    "employment_status": "Self-employed",
    "annual_income": 145655,
    "income_sources": [
      "Salary / Wages",
      "other",
      "Government assistance"
    ],
    "income_sources-Comment": "Freelance gigs"
  },
  {
    "household_head_age": 22,
    "household_size": 6,
    "region": "Connecticut",
    "education_level": "Primary education",
    "employment_status": "Retired",
    "annual_income": 20157,
    "income_sources": [
      "Salary / Wages",
      "other",
      "Business income"
    ],
    "income_sources-Comment": "Freelance gigs"
  },
  {
    "household_head_age": 70,
    "household_size": 4,
    "region": "Vermont",
    "education_level": "Bachelor's degree",
    "employment_status": "Employed part-time",
    "annual_income": 106633,
    "income_sources": [
      "Pension / Retirement"
    ]
  },
  {
    "household_head_age": 41,
    "household_size": 4,
    "region": "Kentucky",
    "education_level": "Master's degree or higher",
    "employment_status": "Retired",
    "annual_income": 40600,
    "income_sources": [
      "Government assistance"
    ]
  }
];
```

### `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: "pivot-chart",
                    type: "pivot",
                    title: "Household Income and Demographics Analysis",
                    allowChangeType: false,
                    visualizer: {
                        questions: survey.getAllQuestions(),
                        categoryField: "education_level",
                        series: [{
                            valueField: "annual_income",
                            seriesField: "employment_status",
                            aggregation: "sum"
                        }],
                        legendPosition: "bottom"
                    }
                }]
            });
            
            
            
            
            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 = {
  "title": "Household Income and Demographics Survey",
  "description": "This survey collects information about household income, demographics, and employment for statistical research purposes.",
  "pages": [
    {
      "name": "household_info",
      "title": "Household Information",
      "elements": [
        {
          "type": "text",
          "name": "household_head_age",
          "title": "Age of the head of household",
          "inputType": "number",
          "min": 16,
          "max": 120
        },
        {
          "type": "dropdown",
          "name": "household_size",
          "title": "Number of people in the household",
          "choicesMin": 1,
          "choicesMax": 10
        },
        {
          "type": "dropdown",
          "name": "region",
          "title": "State",
          "choices": [
            "Alabama", "Alaska", "Arizona", "Arkansas",
            "California", "Colorado", "Connecticut",
            "Delaware", "Florida", "Georgia", "Hawaii",
            "Idaho", "Illinois", "Indiana", "Iowa",
            "Kansas", "Kentucky", "Louisiana", "Maine",
            "Maryland", "Massachusetts", "Michigan",
            "Minnesota", "Mississippi", "Missouri",
            "Montana", "Nebraska", "Nevada", "New Hampshire",
            "New Jersey", "New Mexico", "New York",
            "North Carolina", "North Dakota", "Ohio",
            "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island",
            "South Carolina", "South Dakota", "Tennessee", "Texas",
            "Utah", "Vermont", "Virginia", "Washington",
            "West Virginia", "Wisconsin", "Wyoming"
          ]
        },
        {
          "type": "dropdown",
          "name": "education_level",
          "title": "Highest education level of the head of household",
          "choices": [
            "No formal education",
            "Primary education",
            "Secondary education",
            "Bachelor's degree",
            "Master's degree or higher"
          ]
        }
      ]
    },
    {
      "name": "employment_info",
      "title": "Employment Information",
      "elements": [
        {
          "type": "radiogroup",
          "name": "employment_status",
          "title": "Employment status of the head of household",
          "choices": [
            "Employed full-time",
            "Employed part-time",
            "Self-employed",
            "Unemployed",
            "Retired"
          ]
        },
        {
          "type": "text",
          "name": "annual_income",
          "title": "Total annual household income (in USD)",
          "inputType": "number",
          "min": 0
        }
      ]
    },
    {
      "name": "additional_info",
      "title": "Additional Information",
      "elements": [
        {
          "type": "checkbox",
          "name": "income_sources",
          "title": "Sources of household income",
          "description": "(select all that apply)",
          "choices": [
            "Salary / Wages",
            "Business income",
            "Pension / Retirement",
            "Government assistance",
            "Investments / Dividends"
          ],
          "showOtherItem": true,
          "otherText": "Other (specify)"
        }
      ]
    }
  ],
  "headerView": "advanced"
};
```

### `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/household-income-analysis-pivot-chart/angular.md)
- [Vue 3](https://surveyjs.io/dashboard/examples/household-income-analysis-pivot-chart/vue3js.md)
- [jQuery](https://surveyjs.io/dashboard/examples/household-income-analysis-pivot-chart/jquery.md)
- [Vanilla JS](https://surveyjs.io/dashboard/examples/household-income-analysis-pivot-chart/vanillajs.md)