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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Secondary Axis linked to Primary Axis

Thread ID:

Created:

Updated:

Platform:

Replies:

147739 Sep 23,2019 03:02 AM UTC Sep 23,2019 12:25 PM UTC WPF 1
loading
Tags: Chart
Mark Tannehill
Asked On September 23, 2019 03:02 AM UTC

I'm trying to recreate this visual.



The Y1 Axis is Directly Linked to the Y2 axis... In this case 25 skills = 18 months, 100 skills = 48 months, these will vary but this is the general goal I'm going with.

All the examples show 2x axis on the left side, but I need them to be like shown here.

Thanks


Geetha Rajendran [Syncfusion]
Replied On September 23, 2019 12:25 PM UTC

Hi Mark, 
  
We have achieved your requirement by using the ActualRangeChanged event and LabelCreated event. In LabelCreated event, you can able to change the text based on condition. Please refer the below code. 
  
Code snippet[XAML]: 
<!--Initialize the vertical axis for SfChart--> 
<syncfusion:SfChart.SecondaryAxis> 
    <syncfusion:NumericalAxis x:Name="secondaryAxis" Header="Developmental Age" OpposedPosition="True" Interval="25" LabelCreated="NumericalAxis_LabelCreated" MajorTickLineStyle="{StaticResource lineStyle}" /> 
</syncfusion:SfChart.SecondaryAxis> 
  
<!--Initialize the series for SfChart--> 
<syncfusion:LineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" BorderBrush="DarkBlue" > 
    <syncfusion:LineSeries.YAxis> 
        <syncfusion:NumericalAxis x:Name="yAxis" Minimum="0" ShowGridLines="False" Interval="25" ActualRangeChanged="YAxis_ActualRangeChanged" Header="Skills Mastered" MajorTickLineStyle="{StaticResource lineStyle}" > 
        </syncfusion:NumericalAxis> 
    </syncfusion:LineSeries.YAxis> 
</syncfusion:LineSeries> 
  
  
Code snippet[C#]: 
private void NumericalAxis_LabelCreated(object sender, LabelCreatedEventArgs e) 
{ 
    var label = Convert.ToDouble(e.AxisLabel.LabelContent); 
    if(label == 0) 
    { 
        e.AxisLabel.LabelContent = "0 months"; // change your label content here 
    } 
} 
  
private void YAxis_ActualRangeChanged(object sender, ActualRangeChangedEventArgs e) 
{ 
    secondaryAxis.Minimum = (double)e.ActualMinimum; 
    secondaryAxis.Maximum = (double)e.ActualMaximum; 
} 
  
  
Screenshot: 
 
  
  
Thanks, 
Geetha R. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon