Render multiple chart simultaneously using react-chartjs-2

Question

I have rendered bar chart without any errors. but while adding doughnut chart it's getting this type of error in console. getting error when uncommenting doughnut chart component. i think the problem here is i may be missing any of the chart js register for doughnut chart.

react-dom.development.js:22831 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at setDatasets (utils.ts:57:1)
    at cloneData (utils.ts:94:1)
    at renderChart (chart.tsx:43:1)
    at chart.tsx:97:1
    at commitHookEffectListMount (react-dom.development.js:23139:1)
    at commitPassiveMountOnFiber (react-dom.development.js:24917:1)
    at commitPassiveMountEffects_complete (react-dom.development.js:24880:1)
    at commitPassiveMountEffects_begin (react-dom.development.js:24869:1)
    at commitPassiveMountEffects (react-dom.development.js:24856:1)
    at flushPassiveEffectsImpl (react-dom.development.js:27029:1)

this is my code. app.js

import {
  Chart as ChartJs,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from  'chart.js'

import { Bar, Doughnut } from 'react-chartjs-2';

import {useState, useEffect} from 'react'

import { individual_dataset } from './data';

import {
  Container,
  NavBar,
  ConfidenceContainer,
  OutLine,
  DesigInput,
  Box,
  Option,
  ChartsContainer,
} from './style'

ChartJs.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
)



function App() {
  const [confidenceData, setConfidenceData] = useState({
    datasets: []
  })
  const [ chartOptions, setChartOptions] = useState({});

  const [gaughData, setGaughData] = useState({
    dataset:[]
  })
  const [gaughChartOptions, setGaughChartOptions] = useState({})

  const [selected, setSelected] = useState({});
  const [showList, setShowList] = useState(false);
  const handleItemChange=(item)=>{
    setSelected(item)
    setShowList(false)
  }

  useEffect(()=>{
    if(selected?.name){
    setConfidenceData({
      labels: ['confidence', 'active listening', 'total'],
      datasets: [
        {
            label: 'Average',
            data: [58.05, 67.125, 125.5],
            borderColor: "rgb(53,162, 235)",
            backgroundColor: "#9EA1D4"
        },
        {
            label: 'Individual Score',
            data: [selected.total_score_confidence, selected.total_score_active_listening, selected.total_score_overall],
            borderColor: "rgb(53,162, 235)",
            backgroundColor: "#FD8A8A"
        },
        
      ]
    })
    setGaughData({
      labels:['Confidence', 'left over', 'hi'],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }],

    })
  }


    setGaughChartOptions({

    })
    setChartOptions({
      responsive: true,
      plugins: {
        scales: {
          y:{
            min: 200,
            max: 200,
            stepSize: 40, 
          }
        },
        legend:{
          position: "bottom",
          labels:{
            pointStyle: 'circle'
          }
        },
        title:{
          display: true,
          text: `Performance of ${selected?.name}`,
        }
      }
    })

  },[selected])
  

  return (
    <Container>
      <NavBar>
        <h2> {selected?.name ? `${selected.name}\'s Performance` : "Individual Performance"}</h2>
        <OutLine>
            <DesigInput onClick={()=>setShowList(!showList)}>{selected?.name?selected.name: "Select Person"}</DesigInput>
            { showList && <Box>
                <Option onClick={()=>handleItemChange()}>NONE</Option>
                {individual_dataset.map((item)=>{
                    return <Option key={item.id} onClick={()=>handleItemChange(item)} >{item.name}</Option>;
                })}
            </Box>}
        </OutLine>
      </NavBar>
      <ChartsContainer>
        { selected?.name && <ConfidenceContainer key={'confidence'}><Bar key={'confidence'} options={chartOptions}  data={confidenceData} /></ConfidenceContainer>}
        {selected?.name && <Doughnut options={gaughChartOptions} data={gaughData} />}
      </ChartsContainer>
    </Container>
  );
}

export default App;

example data.js

data = [

   {
      id:"1",
      name:"Shivam",
      total_score_confidence:"100",
      total_score_active_listening:"100",
      total_score_overall:"200"
   },
   {
      id:"2",
      name:"Utkarsh",
      total_score_confidence:"57",
      total_score_active_listening:"85",
      total_score_overall:"142"
   },

]

i need to render doughnut chart along with bar chart.

Answer 1

What I can see is that you are importing the BarElement from chart.js and that's why your Bar chart works correctly, but you should import also ArcElement for Doughnut chart. Don't forget to add 'ArcElement' also to the CharJS.register list.