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

2 Y axis with common x-axis (date)

Hi Team
My requirement is like this: I would like to display 2 kinds of data on the Y-axis, the only difference in the data is the values. one set of values cover 500 to 13000 and the 2nd set of values upto 2 million. What happens is the 1set data series is shown almost like a straight line. My interest is in showing the correlation between the set1 and set2


I have looked at the forum and KB articles. They show 2 charts in the same chart area but with range in different values. Like below


1. Is it possible to show both the set1 and set2 in the same graph area?

2. If it is not possible to do that, is there any other way to achieve the result?

9 Replies

MK Muneesh Kumar G Syncfusion Team January 8, 2019 09:35 AM UTC

Hi Senthil, 
Greetings from Syncfusion, 
We have analyzed your query. Please find the below response for your queries. 
Query 1:  Is it possible to show both the set1 and set2 in the same graph area? 
We are having the multiple axis support to plot multiple series in single graph. As per your requirement, you have prepared a sample with multiple axis chart.  
For more information about multiple axis, kindly find the below code snippet, 
Please find the below code snippet to achieve this requirement, 
//Create multiple axis here. 
ChartAxis axis = this.chart.PrimaryYAxis; 
ChartAxis axis1 = new ChartAxis(ChartOrientation.Vertical);            
ChartAxisLayout layout1 = new ChartAxisLayout(); 
ChartAxisLayout layout2 = new ChartAxisLayout(); 
// Binding series to axis here 
ChartSeries Series1 = new ChartSeries("Series1", ChartSeriesType.Line); 
Series1.Points.Add(0, 500); 
.. .. 
.. .. 
Series1.YAxis = axis; 
ChartSeries Series2 = new ChartSeries("Series2 ", ChartSeriesType.Line); 
Series2.Points.Add(0, 7000000); 
.. .. 
.. .. 
Series2.YAxis = axis1; 
Sample for your reference, can be found from below link, 
Query 2: If it is not possible to do that, is there any other way to achieve the result? 
And, we are having scale breaks supports in Chart. This support helps you, if you add points with large difference in values. To enable breaks, you need to set the ChartAxis.MakeBreaks property to true and set the break mode.  
For more information on chart breaks, kindly find the below documentation link, 
Please find the below code snippet to achieve this chart breaks, 
ChartSeries series = new ChartSeries("series1", ChartSeriesType.Line); 
series.Points.Add(1, 1330); 
series.Points.Add(2, 1148); 
series.Points.Add(3, 303); 
series.Points.Add(4, 237); 
ChartSeries series1 = new ChartSeries("series2", ChartSeriesType.Line); 
series1.Text = series1.Name; 
series1.Points.Add(1, 133000); 
series1.Points.Add(2, 114800); 
series1.Points.Add(3, 310300); 
series1.Points.Add(4, 213700); 
// Enable the break mode  
this.chart.PrimaryYAxis.BreakRanges.BreaksMode = ChartBreaksMode.Auto; 
this.chart.PrimaryYAxis.BreakInfo.LineType = ChartBreakLineType.Straight;  
Sample for your difference, can be found from below link, 
Hope it helps you.  
Muneesh Kumar G.   

SK senthil kumar January 8, 2019 11:17 AM UTC

Dear Mr Muneesh Kumar

You have been of great help. Thanks.


MK Muneesh Kumar G Syncfusion Team January 8, 2019 11:49 AM UTC

Hi Senthil,  
Thanks for the update. 
We are glad to know that the given solution works. Please let us know if you need any further assistance. 
Muneesh Kumar G.   

SK senthil kumar January 9, 2019 09:56 AM UTC

Dear Mr Muneesh

 Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        'TODO: This line of code loads data into the 'DsIdxFII.vwTbl_IDX_Nifty50' table. You can move, or remove it, as needed.
        GetMinDate() ' function to get min date of the table
        GetMaxDate() 'function to get the max date of the table
        Me.Chart1.PrimaryXAxis.DateTimeRange = New ChartDateTimeRange(minDate, maxDate, 5, ChartDateTimeIntervalType.Auto) ' min & max dates used here
        Me.Chart1.PrimaryYAxis.ForceZero = False
        Me.Chart1.PrimaryYAxis.BreakRanges.BreaksMode = ChartBreaksMode.Auto
        Me.Chart1.PrimaryYAxis.BreakInfo.LineType = ChartBreakLineType.Straight
        Chart1.Series(0).Style.DisplayShadow = False
        Chart1.Series(1).Style.DisplayShadow = False
        Chart1.Series(2).Style.DisplayShadow = False
    End Sub

This code worked yesterday in my test project but fails to work in a new project today. The dataset comes from a SQL table via data designer and the chart also comes via the Wizard designer. Unfortunately I deleted the test project but can assure that it worked correctly. The low range series were within 600 to 13000 and the higher series range was 50,000 to 200,000 but today I am not seeing the same.

Is there anything more I should look.



MK Muneesh Kumar G Syncfusion Team January 9, 2019 11:56 AM UTC

Hi Senthil, 

Thanks for the update. We have analyzed your query and we would like to inform you that automatic range breaks in axis feature depends upon the BreakAmount property of range breaks. Default value of this property is 0.2 (20% of total range). 

For example, if axis range is from 0 to 200000, then 20 percentage of the total range is 40000. Here, the maximum value of point in low range series is 13000 and minimum value of point in high range series is 50000 and the difference between two data sets value is 37000 which is less than the 20 percentage of total range (200000). 

So, range break will not be applied in this scenario by default. We can achieve the desired result by changing the default value of BreakAmount property. 

Based on this scenario, we have prepared a simple sample with BreakAmount property set to 0.15 (15% of total range). The sample can be downloaded from the following link 

Please refer the following code snippet to achieve this 

            //Set break amount to 15% of total range 
            this.chart.PrimaryYAxis.BreakRanges.BreakAmount = 0.15; 
            //Break axis range automatically 
            this.chart.PrimaryYAxis.BreakRanges.BreaksMode = ChartBreaksMode.Auto; 

[Chart with range breaks applied for 15% break amount] 

Please let us know if you have any concern. 

Muneesh Kumar G. 

SK senthil kumar January 9, 2019 12:33 PM UTC

Thanks Mr Muneesh for your quick reply. I calculated my range and applied the value but got a chart like this

The Y-axis suddenly has -ve values! 

I tried changing the value from 0.05 to 0.2 but there is no change. The correct range value is 0.08.

SK senthil kumar January 9, 2019 03:54 PM UTC


I have prepared a test solution using Access database. I have not used the min and max date due to errors in converting the sqlconnection to oledbconnection.

Please see if you can make the break to work on the Y-axis. The code is in vb.net.

Thanks and regards


Attachment: TestSeries_cd03ae72.rar

SK senthil kumar January 10, 2019 07:06 AM UTC

Looks like the BreakAmount should be calculated correctly. A value of 0.04 gave the required break correctly.

thanks for the help.

MK Muneesh Kumar G Syncfusion Team January 10, 2019 08:36 AM UTC

Hi Senthil, 
Glad that the issue has been resolved and please get back to us if you need any other assistance.  
Muneesh Kumar G.    

Live Chat Icon For mobile
Up arrow icon