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 put two column series on the same opposite axis ?


I'm trying to put two column series on the same opposite axis, but I'm stuck.

Here an example of the desired render :
On the left axis, there are 3 lines series and on the right axis there are two column series.

What I tried :
      <chart:ColumnSeries Label="Quantité théorique" ItemsSource="{Binding QuantitesTheorique}" Color="Blue" >
          <chart:NumericalAxis Name="Quantite" OpposedPosition="True" ShowMajorGridLines="False" >
              <chart:ChartAxisTitle Text="Quantité en g"/>

      <chart:ColumnSeries Label="Quantité distribuée" ItemsSource="{Binding QuantitesDistribuee}" Color="Yellow" >
          <chart:NumericalAxis Name="Quantite" OpposedPosition="True" ShowMajorGridLines="False" />
Its result :

By the way, I tried to change the spacing property to change the width of my column series, but it won't change anything. How can I increase their width ?

Thanks in advance for your assistance,

5 Replies

JC Jaikrishna Chandrasekar Syncfusion Team August 8, 2016 12:12 PM UTC

Hi Maxime,   
Thanks for contacting syncfusion support.   
Query 1:  Trying to put two column series on the same opposite axis   
We have prepared a sample based on the provided image and it can be downloaded from the below location.   
Query2:  I tried to change the spacing property to change the width of my column series, but it won't change anything. How can I increase their width?   
Column width can be changed by using the property “Width” which is in the column series   
Jaikrishna C   

ML Maxime LELIEVRE August 10, 2016 08:57 AM UTC

Thank you !

I managed to put my two column series on the same axis. But I still have some issue with the column size : when there is few data, columns have a good width, but when there is more data, columns are very thin.

Screenshots :
Columns with good width

Columns with too small width

How can I fix this ?

JC Jaikrishna Chandrasekar Syncfusion Team August 11, 2016 12:26 PM UTC

Hi Maxime,   
We are unable to reproduce the issue at our end. We have attached the sample and screenshots for your reference.   
Screenshot of Android:  
Screenshot of iOS:  
Could you please check with the sample from the given location? please revert us by modifying the sample based on your application along with replication procedure. This would be helpful for us to serve you better.  
Jaikrishna C  

FF Fabrizio Frigerio April 4, 2017 01:11 PM UTC

Hi, sorry to use this thread instead of creating a new one. 
I've used the last sample to replicate the issue I'm facing with Y-Axis in opposite position, this axis seems not to update when some property is changed during the application lifetime (ie visibility and axis range) is this a bug or am I using in the wrong way?
On the sample I've just added a couple of button calling the following two procedure added to ViewModel:

        public void SwitchVisibleRight()
            OppAxis.IsVisible = !OppAxis.IsVisible;

        public void SwitchRange()
            OppAxis.Minimum = 0;
            if (OppAxis.Maximum == 5)
                OppAxis.Maximum = 10;
            else if (OppAxis.Maximum == 10)
                OppAxis.Maximum = 20;
                OppAxis.Maximum = 5;

The axis on the right does not change in any case, the same changes applied to the axis on the left are working properly.

I've the same issue in my application where I need to show/hide the opposite axis (changing also the range) and the related series only in some case, no problem with show/hide the series but the axis doesn't change, is there a way to force redrawing the axis or the whole chart?

Thanks for any hint


SP Saravana Pandian Murugan Syncfusion Team April 13, 2017 04:34 PM UTC

Hi Maxime,

We have created a new incident 177300 under your account to track the status of this query. Please log on to our support website to check for further updates.

Link: https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents  

Please let us know, if you have any query.

Saravana Pandian M. 

Live Chat Icon For mobile
Up arrow icon