We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to compare side by side chart

Hi Syncfusion Team,
I'm building a side by side stackingColumn chart(image). The chart includes two list data:

  • The first list:
    [{
    x:"01-01-2023",
    data: 1,
    data2: 2,
    data3: 3,
    data4:4,
    },...]
  • The second list
    [{
    x:"01-02-2023",
    data: 1,
    data2: 2,
    data3: 3,
    data4:4,
    },...]

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:

  • The first list:
    [...,
    {
    x:"02-01-2023",
    data: 1,
    data2: 2,
    data3: 3,
    data4:4,
    }
    ]
  • The second list
    [
    {

    x:"02-01-2023",
    data: 1,
    data2: 2,
    data3: 3,
    data4:4,
    }
    ,...]

Thank you very much.

Best regards.


21 Replies 1 reply marked as answer

SB Swetha Babu Syncfusion Team April 4, 2023 07:27 AM UTC

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



TT Ton That Hung April 5, 2023 02:13 AM UTC

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".





NP Nishanthi Panner Selvam Syncfusion Team April 5, 2023 12:39 PM UTC

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



TT Ton That Hung replied to Nishanthi Panner Selvam April 6, 2023 02:42 AM UTC

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



NP Nishanthi Panner Selvam Syncfusion Team April 6, 2023 06:25 AM UTC

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




TT Ton That Hung April 7, 2023 03:45 AM UTC

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"---------------



NP Nishanthi Panner Selvam Syncfusion Team April 7, 2023 11:52 AM UTC

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



NP Nishanthi Panner Selvam Syncfusion Team April 10, 2023 08:04 AM UTC

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



TT Ton That Hung April 10, 2023 08:07 AM UTC

Thanks for your support.



TT Ton That Hung replied to Nishanthi Panner Selvam April 10, 2023 09:00 AM UTC

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.



SB Swetha Babu Syncfusion Team April 12, 2023 04:00 AM UTC

Ton,


We are validating the reported scenario and will update you with further details within two business days



SB Swetha Babu Syncfusion Team April 12, 2023 12:22 PM UTC

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.



TT Ton That Hung April 17, 2023 01:12 AM UTC

Thanks for your support.



SB Swetha Babu Syncfusion Team April 17, 2023 12:29 PM UTC

Ton,


Most Welcome! Please get back to us if you need any further assistance.



TT Ton That Hung replied to Swetha Babu May 4, 2023 08:18 AM UTC

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.



NP Nishanthi Panner Selvam Syncfusion Team May 5, 2023 10:12 AM UTC

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



TT Ton That Hung replied to Nishanthi Panner Selvam May 5, 2023 10:13 AM UTC

Thanks for your support.



NP Nishanthi Panner Selvam Syncfusion Team May 8, 2023 04:33 AM UTC

Ton,

Most Welcome! Please get back to us if you need further assistance.


Regards,

Nishanthi



NP Nishanthi Panner Selvam Syncfusion Team May 30, 2023 02:27 PM UTC

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.



Marked as answer

TT Ton That Hung May 31, 2023 07:10 AM UTC

Hi Nishanthi,

It's working so good.

Thanks



JS Jayashree Suresh Anand Syncfusion Team May 31, 2023 07:39 AM UTC

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 


Loader.
Up arrow icon