How to prepare dual Y-Axis in Chart

Jun 25, 2014 at 12:51 PM
This is Madhan Kumar and just started working on WinRT Toolkit Chart control. I would like to Develop dual Y-Axis in chart control. Could you please share sample code to implement Dual Y-Axis in chart? We are going to give demo to the client and it’s bit urgent for us to develop dual Y-Axis.

<Charting:Chart x:Name="radFlashChart" HorizontalAlignment="Center" VerticalAlignment="Top" Width="1200" Height="400">
                <Charting:ColumnSeries Title="Actuals" Margin="0"  IndependentValuePath="Area" DependentValuePath="Actual"   IsSelectionEnabled="True"/>
                <Charting:ColumnSeries Title="Budget" Margin="0" IndependentValuePath="Area" DependentValuePath="Forecast" IsSelectionEnabled="True"/>
                <Charting:LineSeries Title="Attain" Margin="0" IndependentValuePath="Area" DependentValuePath="AttainForecast"  IsSelectionEnabled="True"/>
                <Charting:LineSeries Title="Target Attain" Margin="0" IndependentValuePath="Area" DependentValuePath="TargetAttain" IsSelectionEnabled="True"/>
            </Charting:Chart>
I am using following code and but here AttainForecast and Target Attain need to point secondary Y-Axis but I am not able to get it.

Please help me out ASAP.

Your help is really appreciate.

Thanks,
Madhan.
Jun 26, 2014 at 10:58 AM
Edited Jun 26, 2014 at 10:58 AM
Hi Madhan,

In the code behind, do the following for your line series (doing it once is enough, like when you are opening the page):
            LinearAxis lineSeriesAxis = new LinearAxis() { Orientation = AxisOrientation.Y, Location = AxisLocation.Right };
            (radFlashChart.Series[2] as LineSeries).DependentRangeAxis = lineSeriesAxis;
            (radFlashChart.Series[3] as LineSeries).DependentRangeAxis = lineSeriesAxis;
The result looks like the following:

Image

Also, to customize the format of the numbers on the axis, copy the following style to your App.xaml:
<Application
    x:Class="GraphAppDualYAxis.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GraphAppDualYAxis"
    xmlns:Charting="using:WinRTXamlToolkit.Controls.DataVisualization.Charting">
    <Application.Resources>
        <Style
        TargetType="Charting:NumericAxisLabel" x:Key="CustomAxisLabelStyle">
            <Setter
            Property="IsTabStop"
            Value="False" />
            <Setter
            Property="StringFormat"
            Value="{}{0:0.##}" /> <!--This is where we'll set the number format-->
            <Setter
            Property="Template">
                <Setter.Value>
                    <ControlTemplate
                    TargetType="Charting:NumericAxisLabel">
                        <TextBlock
                        Text="{TemplateBinding FormattedContent}">
                        </TextBlock>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>
Then change the value at the line I marked with any format specifier, like this:
            <Setter
            Property="StringFormat"
            Value="{}%{0:N}" /> <!--This is where we'll set the number format-->
Which will look like the following:

Image

Hope this helps. :)