When 'maxOfYVal' is exposed in VerticalStackedBarChart, prop provides expected behaviour but typecheck fails.

[v-sakshigarg]

In Vertical Stacked Bar Chart of Fluent UI library, the ticks on the Y-axis are calculated in such a way that it exceeds 100 (lets say 105) though sum of data remains maximum to 100. An example demonstrating this can be found in the attached CodePen link https://codepen.io/Sakshi_-Garg/pen/JjqrEzM

As per my project requirement , I am trying to restrict maximum tick value to 100 through props in vertical stacked bar chart.

Even after setting yMaxValue={100}, the maximum tick value on the Y-axis remains 105. Upon debugging, it was discovered that the maxOfYVal property can be used to enforce the maximum Y-axis value. This is possible because the Cartesian chart component within the Vertical Stacked Bar Chart accepts maxOfYVal.

However, maxOfYVal is not exposed in IVerticalStackedBarChartProps because it extends ICartesianChartProps. On the other hand, maxOfYVal is part of IModifiedCartesianChartProps (the interface defined for the Cartesian chart component), which extends ICartesianChartProps.

When passing props maxOfYVal in VerticalStackedBarChart, prop value is accepted but typecheck is failing. Kindly suggestions on this?

[AtishayMsft]

I am able to set the maxOfYVal property to 100 in the codepen example that you have shared. https://codepen.io/atisjaiMsft/pen/jOoaXPO

[v-sakshigarg]

@AtishayMsft on adding maxOfYVal props in Vertical Stacked Bar Chart shows expected behaviour but typecheck fails. Getting below error:

Reason : maxOfYVal is not part of interface IVerticalStackedBarChartProps

[AtishayMsft]

The issue here is that the sum of plotted rectangles is going past 100. Even though the sum of y values is still < 100. Once this is fixed, you should not need to explicitly pas the maxOfYVal prop.

[SridharatSage]

Hi @AtishayMsft I am having the same kind of scenario where the single vertical bar stack has 10000+ data to adapt how to handle it do we have any property

[SridharatSage]

@AtishayMsft you can see the feb-24 data is not showing the value, I tried increasing the ymaxvalue to the max but this is not adapting

[AtishayMsft]

@SridharatSage Could you share the repro in codepen or codesandbox.

[SridharatSage]

I am using the code below for vertical bar chart in the data field I have 10000+ records, and due to this the single stack is not adapting to the UI

<VerticalStackedBarChart theme={theme} className={this.props.isDarkTheme ? overflowSetStyles : ''} chartTitle={title} data={data} yAxisTickCount={10} yMaxValue={1000000} styles={{ root: { height: height, width: width, }, }} isCalloutForStack={true} calloutProps={{ directionalHint: DirectionalHint.topAutoEdge }} yAxisTickFormat={(x: number | string) => $${x}} margins={{ bottom: 50, top: 40, left: 40, right: 20 }} onRenderCalloutPerDataPoint={this.onRenderCalloutPerDataPoint} enableReflow={true} />

[SridharatSage]

image for ref I am using 10000 for max value but still it's not adapting because of more data in the single stack

[AtishayMsft]

This could be because 10000 records in the data. Try to keep the number of record less than 100. You can aggregate very small records into a common "Others" category.

[SridharatSage]

We have the use case to adapt whatever the data comes in, do we have any solution to resolve this if so, please point me the direction.

[AtishayMsft]

You can try adjustingthe barMinimumHeight property.

[SridharatSage]

@AtishayMsft can we have a scroll for the stack if it reaches the maximum threshold value for the stack, If this is possible/available can you tell us what we need to use to add a scroll?

[SridharatSage]

You can try adjustingthe barMinimumHeight property. @AtishayMsft I am not assigning any value for barMinimumHeight, so it is taking the default value 0 but still the issue persist

[AtishayMsft]

You can try adjustingthe barMinimumHeight property. @AtishayMsft I am not assigning any value for barMinimumHeight, so it is taking the default value 0 but still the issue persist

You can try using version 5.17.12 where bar minimum height of 1% for vertical stacked bar chart is not applicable.

[SridharatSage]

@AtishayMsft Tried updating the version and tested passing barMinimumHeight as 1 gives the same above result, the total is not visible because of overlapping passing default/0 to the barMinimumHeight, shows the total but not the bar

[SridharatSage]

@AtishayMsft Any update on how to fix this issue?

[AtishayMsft]

@SridharatSage we cannot help here until you are able to provide a codepen/codesandbox repro link.