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

Use 2 chart at the same time

Hi Syncfusion Support team,
I'm using Chart component and I want to build a chart, include 2 small chart(image).

They share the same x-axis, y-axis, legend


Is there a way to do this with Syncfusion's components?

Thanks.


17 Replies 1 reply marked as answer

SB Swetha Babu Syncfusion Team March 10, 2023 11:35 AM UTC

Hi Ton,


Greetings from Syncfusion.


We can render the two charts in the same y-axis by setting the width as 50% for the columns usineg the ColumnDirective in x-axis. We can set the multiple axis in the x-axis and render different charts in the x-axis by specifying the xAxisName property in the series if the chart. We have created a simple react application to demonstrate the same. Please find the below stackblitz link for your sample reference and UG link for your reference.


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


UG link: https://ej2.syncfusion.com/react/documentation/chart/multiple-panes#columns


Code Snippet:


<AxesDirective>

        <AxisDirective columnIndex={1} name='xAxis1' opposedPosition={false} valueType='Category' majorGridLines={{ width: 0}} lineStyle={{width: 0}}>

        </AxisDirective>

 

<ColumnsDirective>

        <ColumnDirective width='50%'></ColumnDirective>

        <ColumnDirective width='50%'></ColumnDirective>

      </ColumnsDirective>       

                        <SeriesCollectionDirective>

                            <SeriesDirective dataSource={data1} xName='x' yName='y' width={2} name='Germany' type='Column'>

                            </SeriesDirective>

                            <SeriesDirective dataSource={data2} xName='x' yName='y' width={2} name='Germany' type='Line' xAxisName="xAxis1" marker={{ visible: true, height: 7, width: 7}}>

                            </SeriesDirective>

                        </SeriesCollectionDirective>


Screenshot:



Kindly, revert us if you have any concerns.


Regards,

Swetha


Marked as answer

TT Ton That Hung March 14, 2023 09:19 AM UTC

Hi Swetha,
Thanks for your support. I really appreciate you for the quick support.
I have one more requirement: use the same legend for two chart.
Focus on the example: the chart has Germany, UK, Germany, UK. I want to show Germany, UK.

Link Sample: https://stackblitz.com/edit/react-hw6vwe-7kebsh?file=index.js
Are there any way to reach my requirement?

Best regards.



SB Swetha Babu Syncfusion Team March 15, 2023 12:35 PM UTC

Ton,


When we checked the provided sample, we found that you have set the name property as Germany and UK in the two series. If you do not want to show the legend for particular series, then there is no need to set the name property in the series of the chart. We have modified the provided sample. Please find the below stackblitz link for your reference.


Sample link: https://stackblitz.com/edit/react-hw6vwe-k6jose?file=index.js


Screenshot:




Kindly, revert us if you have any concerns.



TT Ton That Hung March 16, 2023 01:12 AM UTC

Hi Swetha,

Thanks for your support.

Looks like you misunderstood what I meant.

I need to use the legend for 2 chart. That mean, when I click on the legend item, corresponding data columns on both charts must be hidden/shown.

Example: when I click on Germany legend, the Germany column(red) on both charts must be hidden, click again to show back.



DG Durga Gopalakrishnan Syncfusion Team March 16, 2023 02:30 PM UTC

Ton,


We suggest you to use chart legendClick event to show and hide the both series by clicking the single legend. Please check with the below snippet and sample.


function onLegendClick(args) {

    const visibility = args.series.visible;

    for(var i = 0; i< args.chart.series.length; i++){

      if(args.legendText !=  args.chart.series[i].name && args.series.fill == args.chart.series[i].fill)

      args.chart.series[i].visible = visibility? false: true;

    }

}


Sample : https://stackblitz.com/edit/react-hw6vwe-euyppf


Please let us know if you have any concerns.



TT Ton That Hung March 17, 2023 08:15 AM UTC

Hi Durga,

Thanks for your support.

Your example work ok for me.

Beside that, I have some questions about multiple panes chart.

  1. Can I config to add a border between two chart?(image)
  2. Can I config to show the title of each chart(2 title) at the top. Note: x-axis is still kept on the bottom.(image). I already config to show the title of each chart(use title prop of AxisDirective), but I can't config to show they on the top.
  3. Can I config to customize the scrollbar?. I think I can custom by CSS. but if there is somewhere to configure it would be better.


Thank you very much for your support.

Best regards.


SB Swetha Babu Syncfusion Team March 21, 2023 07:43 AM UTC

Ton,


Please find the below response for your queries.


Query 1: Can I add border between two charts.


We can add border to the chart area by using the width property of the border in chartArea and to add the border between two charts, we suggest you use the width property in the border of the ColumnDirective. We have created a react application to demonstrate the same. Please find the below stackblitz link for your reference.


Sample link: https://stackblitz.com/edit/react-hw6vwe-t9bvt9?file=index.js


Code Snippet:


<ChartComponent

          id="charts"

          chartArea={{ border: { width: 1 } }}

        >

          <ColumnsDirective>

            <ColumnDirective width="50%"></ColumnDirective>

            <ColumnDirective width="50%" border={{ width: 2, color: "black" }}></ColumnDirective>

          </ColumnsDirective>

        </ChartComponent>


Screenshot:



Query 2: Can I show title for each chart.


We can add the title for each chart by using the content property in the AnnotationDirective in the chart. We have created a react application to demonstrate the same. Please find the below stackblitz link for your reference.


Sample link: https://stackblitz.com/edit/react-hw6vwe-t9bvt9?file=index.js


Code Snippet:


<AnnotationsDirective>

            <AnnotationDirective content="<div style='font-weight:bold;'>10/05/2021</div>" x='47%' y='10%' coordinateUnits='Pixel' verticalAlignment='Top'>

            </AnnotationDirective>

            <AnnotationDirective content="<div style='font-weight:bold;'>10/05/2021</div>" x='95%' y='10%' coordinateUnits='Pixel' verticalAlignment='Top'>

            </AnnotationDirective>

          </AnnotationsDirective>


Screenshot:



Query 3: Can I add scroll bar to the chart


We can add the scroll bar initially to the chart by using the enable property in the scrollbarSettings in the primary x axis of the chart. We have created a react application to demonstrate the same. Please find the below stackblitz link for your reference.


Sample link: https://stackblitz.com/edit/react-hw6vwe-7ujgab?file=index.js


Code Snippet:


primaryXAxis={{

            valueType: 'Category',

            interval: 1,           

            majorGridLines: { width: 0 },

            majorTickLines: { width: 0 },

            minorTickLines: { width: 0 },

             scrollbarSettings:{

                enable:true

            }

          }}


Screenshot: