Cannot render stacking bar series correctly

[Yvonne]

Hi Syncfusion Team, I am building a stacking bar chart dynamically. Which means that I will have different yName for the data source every time. Here is my code:

And the below figure is the result:

But when I use static code instead of dynamic code, for example: 

It will render the chart correctly:

Why will this happen? And how can I solve this problem? Thank you!

[Swetha Babu]

Hi Yvonne,

Greetings from Syncfusion.

We have created  a react application by rendering the stacking bar series using the dynamically created y values. Unfortunately we are unable to replicate the same. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/react-47fu8q-kbtpvr?file=index.js

Code Snippet:

<SeriesCollectionDirective>

            {data1[0] && Object.keys(data1[0]).filter(key => key.startsWith('y')).map((key, index) => (

              <SeriesDirective

                key={index}

                dataSource={data1}

                xName="x"

                yName={key}

                name={`Series ${index + 1}`}

                columnWidth={0.6}

                border={{ width: 1, color: 'white' }}

                type="StackingBar"

              />

            ))}

          </SeriesCollectionDirective>

 

Screenshot:

If the reported scenario still persists, please modify the above sample to replicate the same. It will be helpful for us to analyze further and assist you better.

Regards,

Swetha