Use 2 chart at the same time

[Ton That Hung]

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.

[Swetha Babu]

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

[Ton That Hung]

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.

[Swetha Babu]

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.

[Ton That Hung]

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.

[Durga Gopalakrishnan]

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.

[Ton That Hung]

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.

[Swetha Babu]

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:

Kindly, revert us if you have any concerns.

[Ton That Hung]

Hi Swetha,

Thanks for your support.

At query 3: Can I config to customize the scrollbar?

I have known how to add scroll bar to the chart, but I want to customize the scrollbar(backgorund-color,...).

How I config to reach the requirement?

Thanks.

[Durga Gopalakrishnan]

Ton,

Most welcome. As of now, we don’t have support to customize the axis scrollbar. We suggest you to use chart loaded event to change the background color of scrollbar. We have attached the modified sample for your reference. Please check with below snippet and screenshot.

function onLoaded(args){

  var scrollEle = document.getElementById("charts_scrollBarThumb_xAxis1");

  if(scrollEle != null)

         scrollEle.setAttribute("fill","green")

}

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

Please let us know if you have any concerns.

[Ton That Hung]

Thanks for your support.

[Durga Gopalakrishnan]

Ton,

Most welcome. Please get back to us if you have any other concerns. We are always happy in assisting you.

[Ton That Hung]

Hi Durga,

At the query 2: Can I show title for each chart.

The title is dynamic data. It can be changed after the state change. 

In your example, seem like the title will not re render after the data changed.

Link: https://stackblitz.com/edit/react-hw6vwe-gp4rru?file=index.js

Steps to reproduced:

1. Click to the button to change the date

Expect: the title re render

Note: I think I  have a idea to solve this problem. I will add the id for content: 

<AnnotationDirective

content={`<div style='font-weight:bold;' id="title">${date}</div>`}

x="47%"

y="10%"

coordinateUnits="Pixel"

verticalAlignment="Top"

></AnnotationDirective>

and every time the data changes, I query the DOM by ID and change the content.

I would like to ask is there a simpler way than that.

Thanks.

[BagavathiPerumal Apranandham]

Hi Ton,

As of now, we don’t have support to update the annotation content using setState method, so we suggest you to change the annotation text using its element ID on button click. We have attached modified sample for your reference. Please check with below snippet and screenshot.

<button onClick={ () =>{ randomDate() }}>Change Date</button>

const randomDate = () => {

document.getElementById('charts_Annotation_0').textContent = date;

};

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

Please revert us if you have any concerns.

[Ton That Hung]

Hi Swetha,

If you don't set name property, seem like when you use tooltip, they don't show the name. 

[Swetha Babu]

Ton,

If the name property is not set in the series, then the tooltip header will not be visible, since the header for the tooltip takes series name value. To make the header visible, we suggest to bind some other values from datasource to header. We have modified the below sample to demonstrate the same. Please find the below stackblitz link for your reference.

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

Code Snippet:

export let data1 = [

  { x: 'D1', y: 35, y1: 35, text: "Germany" }

];

export let data2 = [

  { x: 'D1', y: 35, y1: 35, text: "UK" }

];

 

tooltip={{ enable: true, header: "<b>${point.tooltip}</b>" }}

 

<SeriesDirective

              dataSource={data1}

              xName="x"

              yName="y"

              width={2}             

              tooltipMappingName="text"

              type="Column"

              xAxisName="xAxis2"

              fill="red"

            ></SeriesDirective>

            <SeriesDirective

              dataSource={data2}

              xName="x"

              yName="y"

              width={2}

              tooltipMappingName="text"

              type="Column"

              fill="blue"

              xAxisName="xAxis2"

            ></SeriesDirective>

Screenshot:

Kindly, revert us if you have any concerns.

[Ton That Hung]

It's work for me.
Thanks for your support.

[Swetha Babu]

Ton,

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