Using multiple charts in one component, causes to render only last chart.

[Yagnesh]

I've created 4x different table components and used all those into one class based component. I'm passing dataSource via state and once I've passed data only last component gets rendered while first 3 charts doesn't gets displayed at all. Inspecting says it's height is 0.

My all 4 chart components shares same code as below so I've only shared one snippet. btw I get's log for all charts mounting so I'm sure that all 4x charts are getting mounted.

import React, { Component } from 'react'
import CustomerLeaderboardChart from './Charts/customerLeaderboardChart'
import AverageDailyResponsesChart from './Charts/averageDailyResponsesChart'
import TotalDailyResponsesChart from './Charts/totalDailyResponsesChart'
import TotalSentEmailsChart from './Charts/totalSentEmailsChart'

class OTRDashboard extends Component {
  constructor(props) {
    super(props)

    this.state = {
      customerLeaderboardData: []
    }
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        customerLeaderboardData: cloneDeep(dummyData.customerLeaderboardData)
      })
    }, 2500) // Mimicking API call behaviour
  }

render() {
  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', height: '70vh', border: '1px solid orange' }}>
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            width: '50vw',
            height: '100%',
            border: '1px solid orange'
          }}>
            {
              this.state.customerLeaderboardData.length
                ? (
                  <Container>
                    <CustomerLeaderboardChart
                      dataSources={ this.state.customerLeaderboardData }
                    />
                  </Container>
                ) : null
            }
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', width: '50vw', height: '100%' }}>
            <div style={{ display: 'flex', width: '100%', height: '50%', border: '1px solid orange' }}>
              {
                this.state.customerLeaderboardData.length
                  ? (
                    <Container>
                      <AverageDailyResponsesChart
                        dataSources={ this.state.customerLeaderboardData }
                      />
                    </Container>
                  ) : null
              }
            </div>
            <div style={{ display: 'flex', width: '100%', height: '50%', border: '1px solid orange' }}>
              {
                this.state.customerLeaderboardData.length
                  ? (
                    <Container>
                      <TotalDailyResponsesChart
                        dataSources={ this.state.customerLeaderboardData }
                      />
                    </Container>
                  ) : null
              }
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', height: '30vh', border: '1px solid orange' }}>
          {
            this.state.customerLeaderboardData.length
              ? (
                <Container>
                  <TotalSentEmailsChart
                    dataSources={ this.state.customerLeaderboardData }
                  />
                </Container>
              ) : null
          }
        </div>
      </div>
    </>
  )
}

import React, { Component } from 'react';
import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  Legend,
  Category,
  StackingBarSeries,
  Tooltip
} from '@syncfusion/ej2-react-charts'

class TotalDailyResponsesChart extends Component {
  constructor(props) {
    super(props);

  }

  componentDidMount() {
    console.log('totalDailyResponsesChart mounted...')
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('totalDailyResponsesChart updated...')
  }

  render() {
    return (
      <div>
        <ChartComponent
          id='charts'
          style={{ textAlign: "center" }}
          primaryXAxis={{
            valueType: 'Category',
            majorGridLines: { width: 0 }
          }}
          width='100%'
          height='55%'
          chartArea={{ border: { width: 0 } }}
          primaryYAxis={{
            lineStyle: { width: 0 },
            majorTickLines: { width: 0 },
            labelFormat: '{value}%',
            edgeLabelPlacement: 'Shift'
          }}
          title='Total Daily Responses'
          tooltip={{ enable: true }}
        >
          <Inject services={[StackingBarSeries, Category, Legend, Tooltip]}/>
          <SeriesCollectionDirective>
            {
              (this.props.dataSources || []).map((dataSource, index) => {
                return (
                  <SeriesDirective
                    key={`customerLeaderboard_${index}`}
                    dataSource={dataSource.data}
                    width={2}
                    xName='x'
                    yName='y'
                    name={dataSource.name}
                    type='StackingBar'
                  />
                )
              })
            }
          </SeriesCollectionDirective>
        </ChartComponent>
      </div>
    )
  }
}

export default TotalDailyResponsesChart

[Swetha Babu]

Hi Yagnesh 

  

Greetings from Syncfusion 

  

We have analyzed the reported scenario using the provided code snippet and we came to know that you have used the same Id name for all the charts. We request you to specify the different Id for each charts to overcome the reported problem. We have created a simple react application to demonstrate the same. Please find the below stackblitz link for your sample reference 

  

Sample Link: https://stackblitz.com/edit/react-5fb55v-f8pwhq?file=index.js

Please let us know if the above sample meets your requirement. If not, please replicate the reported issue on the above sample so that it will be helpful  to analyze further and assist you better. 

  

Thanks, 

Swetha 

[Yagnesh]

Hi Swetha,

Thanks for showing me this quick fix. I kinda forgot to change the Id and that was the main culprit out there.

Regards,

Yagnesh

[Swetha Babu]

Hi Yagnesh,


Most Welcome. Please let us know if you need further assistance.

Regards,
Swetha