Render multiple chart simultaneously using react-chartjs-2答案

【问题标题】：Render multiple chart simultaneously using react-chartjs-2Render multiple chart simultaneously using react-chartjs-2
【发布时间】：2022-12-31 15:05:29
【问题描述】：

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.

标签： reactjs react-chartjs-2

【解决方案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"
   },

]

【解决方案2】：

To render both charts simultaneously, you can simply include both chart components within your JSX code. For example, you could include both the and components within the same parent container element, like this:

<div>
  <Bar options={barChartOptions} data={barChartData} />
  <Doughnut options={doughnutChartOptions} data={doughnutChartData} />
</div>

Keep in mind that you will need to make sure that you have properly defined the options and data props for each chart, and that these props contain the correct values for your specific chart configurations.