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

Need to export the data with individual_dataset name

export const individual_dataset= [

   {
      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"
   },

]

Answer 2

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.

Answer 3

I don't know if you solved your problem yet, but I was facing the same issue when trying to render different types of charts (line, bars, doughnuts...) in the same page and I found the solution. Import and register as follow and then you should not get the error anymore:

import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    BarElement,
    ArcElement,
    Tooltip,
    Legend,
    registerables as registerablesJS
} from 'chart.js';

import { Chart } from 'react-chartjs-2';

ChartJS.register(...registerablesJS);

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    BarElement,
    ArcElement,
    Tooltip,
    Legend,
);