Hi Syncfusion Team,
I'm building a side by side stackingColumn chart(image). The chart includes two list data:
My requirement: Compare the elements in list 1 with the corresponding element in list 2.(The first item in list 1 vs the first item in list 2, the second item vs the second item,....). Example: focus on the image, I'm comparing 01-09 vs 02-09, 01-10-vs 02-10, 01-11 vs 02-11,....
Are there any way to reach my requirement?
Note: Some of items in the first list maybe appear on the second list. Example:
Thank you very much.
Best regards.
Hi Ton,
Greetings from Syncfusion.
Can you please let us know the purpose of comparing the chart. Based on your scenario, we will be comparing the datapoints of series. So, can you please let us know your exact requirement. It will be helpful for us to analyze the reported scenario further and assist you better.
Regards,
Swetha
Hi Swetha,
Thanks for your support.
I have 2 list data:
The first list include 3 items:
[{
x:"01-01",
data: 1,
data2: 2,
},
{
x:"02-01",
data: 4,
data2: 3,
},
{
x:"03-01",
data: 3,
data2: 6,
}
]
The 2nd list include 3 items:
[{
x:"01-02",
data: 4,
data2: 0,
},
{
x:"02-02",
data: 1,
data2: 8,
},
{
x:"03-02",
data: 2,
data2: 9,
}
]
I need to compare data by rendering each data pair of list 1 vs list 2: "01-01" vs "01-02", "02-01" vs "02-02", "03-01" vs "03-02".
Ton,
To compare data , we suggest you to use different axis for each series. Here for 2nd list we used column series with different axis that bound to the series using XAxisName property.
Please check with the below codesnippet, screenshot and sample.
<ChartComponent> <AxesDirective> <AxisDirective xName="x" yName="y" valueType="Category" name="xAxis1" ></AxisDirective> </AxesDirective> <SeriesCollectionDirective> <SeriesDirective> xName="x" yName="y" type="Column" xAxisName="xAxis1" </SeriesDirective> </SeriesCollectionDirective> </ChartComponent> |
Sample: https://stackblitz.com/edit/react-gxzvxe?file=index.js,index.html
Please let us know if the above sample meets your requirement. If not, let us know your exact requirement. It will be helpful for us to analyze further and assist you better.
Regards,
Nishanthi
Hi Nishanthi,
Thanks for your support.
In your example, you use type "Column". But my requirement is using type "StackingColumn". Let see the image.
T
Ton,
We suggest you to use series type as ‘StackingColumn’ to meet your requirement.
Please check with below snippet and sample.
<ChartComponent> <SeriesCollectionDirective> <SeriesDirective> type=’StackingColumn’ </SeriesDirective> </SeriesCollectionDirective> </ChartComponent>
|
Sample: https://stackblitz.com/edit/react-gxzvxe-rmvbhm?file=index.js,index.html
Please revert us if you have any concerns.
Regards,
Nishanthi
Hi Nishanthi,
Looks like you misunderstood me.
I need to render two stacking column close to each other.
That mean, x-axis will be rendered like:
------StackingColumn of "01-01"---StackingColumn of "01-02"-------------------------StackingColumn of "02-01"---StackingColumn of "02-02"-------------------------StackingColumn of "03-01"---StackingColumn of "03-03"---------------
Ton,
We are analyzing your reported scenario. We will update the status within one business day(10th April 2023). We appreciate your patience until then.
Regards,
Nishanthi
Ton,
We suggest you to use stackingGroup property to group stacking column as per your requirement. We have created a react application to demonstrate the same.
Please find the below stackblitz link , screenshot and code snippet for your reference.
<SeriesCollectionDirective> <SeriesDirective stackingGroup="01-01" type="StackingColumn" ></SeriesDirective> |
Sample: https://stackblitz.com/edit/react-gxzvxe-qkc2wk?file=index.js,index.html
Please let us know if the above sample meets your requirement. If not, share the screenshot for the requirement. It will be helpful for us to analyze further and assist you better.
Regards,
Nishanthi
Thanks for your support.
Hi Nishanthi,
If I use zoom and scrollbar, is there a way that when I move one scrollbar, the other scrollbar moves with it?
Link sample: https://stackblitz.com/edit/react-gxzvxe-ygduup?file=index.js,index.html
Thanks.
Ton,
We are validating the reported scenario and will update you with further details within two business days
Ton,
We do not have support to move the scrollbar based on other scroll bar. Instead to make the series zoom uniformly, we have hidden the scroll for secondary axis by using the enableScrollbarOnZooming property in the AxisDirective and we can change the zoom factor and zoom position of the primary axis by using the zoomFactor and zoomPosition argument in the scrollEnd event of the chart. We have modified the provided sample based on your requirement. Please find the below stackblitz link for your reference.
Sample link: https://stackblitz.com/edit/react-gxzvxe-um532w?file=index.js
Code Snippet:
<AxisDirective majorGridLines={{ width: 0 }} rowIndex={0} opposedPosition={false} lineStyle={{ width: 0 }} xName="x" yName="y" enableScrollbarOnZooming={false} valueType="Category" majorTickLines={{ width: 0 }} name="xAxis1" labelFormat="{value}" ></AxisDirective>
function onScroll(args) { var chart = document.getElementById('charts').ej2_instances[0]; chart.axes[0].zoomFactor = args.zoomFactor; chart.axes[0].zoomPosition = args.zoomPosition; } |
Screenshot:
Kindly, revert us if you have any concerns.
Thanks for your support.
Ton,
Most Welcome! Please get back to us if you need any further assistance.
Hi Swetha,
I need to show the percentage of each item on the tooltip. By default, the tooltip will show the percentage of items: percentage value = value of item/total (including both stacking groups).
Percentage of Stacking 3 on image = 8/(3+4+8+1) = 50%.
My requirement: percentage value = value of item/total (include only one stacking group)
Example: Percentage of Stacking 3 on image = 8/(8+1) = 88.89%.
How can I config to reach the requirement?
Link sample: https://stackblitz.com/edit/react-gxzvxe-ivbxka?file=index.js
Thanks.
Hi Ton,
We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our weekly patch release which is scheduled to be rolled out on May 30, 2023. We appreciate your patience until then. You can keep track of the bug from the below feedback link.
Feedback Link: https://www.syncfusion.com/feedback/43418/need-to-show-percentage-of-each-stacking-group-in-tooltip
If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.
Regards,
Nishanthi
Thanks for your support.
Ton,
Most Welcome! Please get back to us if you need further assistance.
Regards,
Nishanthi
Ton,
Thank you for your patience
We have included the fix for the reported scenario in our weekly patch release (v 21.2.8) . You can download the latest package from the below link
https://www.npmjs.com/~syncfusionorg
You can upgrade your package to the latest version to resolve the reported scenario.
Please get back to us, if you need any further assistance.
Hi Nishanthi,
It's working so good.
Thanks
Hi Ton,
We are glad that the provided patch works on your end. Please get back to us if you need any further assistance. We will be happy to help you.
Regards,
Jayashree