This project has moved and is read-only. For the latest updates, please go here.

Multiple series on same chart with different Y Axis - Range

Nov 18, 2016 at 8:27 PM
Hi,

I want to create a single chart which has two line series which are populated via MVVM binding both are coming fine. However both has different Y-axis value range.

1st line chart maximum is only till 100 whereas 2nd line chart maximum goes to 10000. Now due to this when actual graph is displayed, i cant event see 1st line since its almost touching to bottom axis.

Is there any way to have different axis for each series within chart. So that both graph can even different scale so it becomes easy to relate data.
Developer
Nov 22, 2016 at 9:13 PM
Hi,

The Chart control is part of the Toolkit Plus edition.

This is not possible, but if you want to tweek it, here's a potential solution :

Starting at v3.0, the axis will have a new property "IntersectMinValue" which can be set to true or false. For example the Y Axis :
-IntersectMinValue == true means it will intersect the X Axis at the X Axis minimum Value.
-IntersectMinValue == false means it will intersect the X Axis at the X Axis maximum Value.

You will have to create two charts of exactly the same size and position them one over the other with proper offset.

Ex :
<Grid>
      <xctk:Chart ShowLegend="False"
                  Width="800"
                  Height="600"
                  HorizontalAlignment="Left">
        <xctk:Chart.Areas>
            <xctk:Area>
              <xctk:Area.XAxis>
                  <xctk:Axis ShowArrow="False"
                            ShowAxisLabel="False"
                            ShowTickLabels="False"
                            ScaleMode="Manual"
                            CustomRangeStart="0"
                            CustomRangeEnd="26"
                            TicksCount="13" />
              </xctk:Area.XAxis>
              <xctk:Area.YAxis>
                  <xctk:Axis ShowArrow="False"
                            ScaleMode="Manual"
                            CustomRangeStart="-20"
                            CustomRangeEnd="15"
                            TicksCount="7"
                            ShowGridLines="False"
                            Title="Value Y1"/>
              </xctk:Area.YAxis>
              <xctk:Area.Series>
                  <xctk:Series x:Name="_series"
                              DefaultInterior="Blue">
                    <xctk:Series.Layout>
                        <xctk:LineLayout />
                    </xctk:Series.Layout>
                  </xctk:Series>
              </xctk:Area.Series>
            </xctk:Area>
        </xctk:Chart.Areas>
      </xctk:Chart>

      <xctk:Chart ShowLegend="False"
                  Margin="64,0,0,0"
                  Width="800"
                  Height="600"
                  HorizontalAlignment="Left">
        <xctk:Chart.Areas>
            <xctk:Area>
              <xctk:Area.XAxis>
                  <xctk:Axis ShowArrow="False"
                            ShowAxis="False"
                            ShowTicks="False"
                            ScaleMode="Manual"
                            CustomRangeStart="0"
                            CustomRangeEnd="26"
                            TicksCount="13"
                            Title="Value X"/>
              </xctk:Area.XAxis>
              <xctk:Area.YAxis>
                  <xctk:Axis IntersectMinValue="False"
                            ShowArrow="False"
                            ScaleMode="Manual"
                            CustomRangeStart="0"
                            CustomRangeEnd="300"
                            TicksCount="6"
                            ShowGridLines="False"
                            Title="Value Y2" />
              </xctk:Area.YAxis>
              <xctk:Area.Series>
                  <xctk:Series x:Name="_series2"
                              DefaultInterior="Red">
                    <xctk:Series.Layout>
                        <xctk:LineLayout />
                    </xctk:Series.Layout>
                  </xctk:Series>
              </xctk:Area.Series>
            </xctk:Area>
        </xctk:Chart.Areas>
      </xctk:Chart>
  </Grid> 
――――
Get more controls, features, updates and technical support with Xceed Toolkit Plus for WPF
Nov 23, 2016 at 1:47 PM
Hi Boucher,

Thanks for looking into my problem.

So based on your answer there is no way to achieve what I am looking for using Extended WPF Toolkit. unfortunately I cant go on the your solution due to licensing cost.

Can you suggest any other workaround?
Developer
Nov 25, 2016 at 3:15 PM
Hi,

No, the toolkit only contains 1 control of type "Chart". No other control in the Toolkit can help you. Sorry.

――――
Get more controls, features, updates and technical support with Xceed Toolkit Plus for WPF