ComponentOne Xamarin Edition
Multiple Y Axes
Controls > FlexChart > Features > Multiple Y Axes

You can add multiple axes to the FlexChart control and customize its properties. This feature allows you to add two series in a single FlexChart instance with same X axis but different Y axis. In order to further customize the appearance, users can choose to differentiate the two series by selecting different chart types.

The image below shows a FlexChart control with a common X axis that displays months, and left and right Y axes that displays two different series for Temperature and Precipitation, respectively.

Multiple y axis

The following steps demonstrate how to add multiple Y axes in the FlexChart control.

  1. Create a new Cross Platform App and open the MainPage.xaml page.
  2. In the MainPage.xaml page, replace the existing code with the following to create a FlexChart control that displays two series elements, namely Precipitation and Temperature.
    Copy Code
    <ContentPage xmlns=""
      <c1:FlexChart x:Name="flexChart" BindingX="MonthName">
          <c1:ChartSeries Binding="Precipitation" SeriesName="Precip"/>
          <c1:ChartSeries Binding="Temp" ChartType="SplineSymbols" SeriesName="Avg. Temp">
              <c1:ChartAxis Position="Right" Min="0" Max="80" MajorUnit="10" 
    Title="Avg.Temperature (F)" AxisLine="False" MajorGrid="False">
                  <c1:ChartStyle Stroke="#fbb258" FontSize="20"/>
          <c1:ChartAxis Min="4" Max="20" MajorUnit="2" MajorGrid="True" 
    Title="Precipitation (in)" AxisLine="False">
              <c1:ChartStyle Stroke="#88bde6" FontSize="20"/>
  3. In the Solution Explorer, open MultipleYAxes.xaml.cs file. Add the following code to it that adds data to be displayed in the FlexChart control at run time.
    Copy Code
     public partial class MultipleYAxes : ContentPage
            public MultipleYAxes()
                this.flexChart.ItemsSource = GetWeatherData();
                this.flexChart.LegendPosition = ChartPositionType.None;
            public IEnumerable<WeatherData> GetWeatherData()
                List<WeatherData> weatherData = new List<WeatherData>();
                string[] monthNames = new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
                //double[] tempData = new double[] { 24, 30, 45, 58, 68, 75, 83, 80, 72, 62, 47, 32 };
                Random random = new Random();
                for (int i = 0; i < monthNames.Length; i++)
                    WeatherData wd = new WeatherData();
                    wd.MonthName = monthNames[i];
                    wd.Precipitation = random.Next(8, 18) + random.NextDouble();
                    wd.Temp = Math.Tan(i * i) + 70;
                return weatherData;
        public class WeatherData
            public string MonthName { get; set; }
            public double Temp { get; set; }
            public double Precipitation { get; set; }
  4. Press F5 to run the project and view two Y axes against a common X axis.