Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
400
How to Show MajorGridline for X axis at the start and end of Xamchart(Line).
posted

Hi,

   I am using the following XAML for XamChart 

<igChart:XamChart x:Name="nodeChart"  Theme ="ThemePark" HorizontalAlignment ="Stretch" 

MaxHeight="100" Background="{x:Null}" BorderBrush="{x:Null}" Margin ="0,3,0,6"> 

<igChart:XamChart.Scene> 

<igChart:Scene MarginType="Percent"> 

<igChart:Scene.GridArea> 

<igChart:GridArea Style="{StaticResource Gridarea}" MarginType="Percent" Margin="4,6,4,15"/> 

</igChart:Scene.GridArea> 

</igChart:Scene>

</igChart:XamChart.Scene> 

<igChart:XamChart.Legend> 

<igChart:Legend Visible="False"/> 

</igChart:XamChart.Legend> 

<igChart:XamChart.Series> 

<igChart:Series ChartType="Area" 

DataMapping="Value = ActiveNode; Label = TimeStamp" 

DataSource="{Binding Path=ChartPointCollection, Mode=OneWay}" 

Stroke="GreenYellow" Fill="GreenYellow" StrokeThickness ="4" Label ="Active Node"/> 

<igChart:Series ChartType="Line" DataMapping="Value = AvailableNode; Label = TimeStamp; ToolTip=AvailableNode" DataSource="{Binding Path=ChartPointCollection, Mode=OneWay}"

StrokeThickness="2" Fill="DarkRed" Stroke=DarkRed" Label="Available Node"/> 

</igChart:XamChart.Series> 

<igChart:XamChart.Axes> 

<igChart:Axis RangeFromZero="True" Stroke="#FFCCCCCC" StrokeThickness="1" Unit="8">

<igChart:Axis.MajorGridline> 

<igChart:Mark Stroke="#4CFFFFFF"/> 

</igChart:Axis.MajorGridline> 

<igChart:Axis.MajorTickMark> 

<igChart:Mark Stroke="#00808080"/>

</igChart:Axis.MajorTickMark> 

<igChart:Axis.Label> 

<igChart:Label Foreground="#FF787878" AutoResize="False" FontFamily="Tahoma" FontSize="9"/> 

</igChart:Axis.> 

</igChart:Axis> 

<igChart:Axis AxisType="PrimaryY" Stroke="#FFCCCCCC" StrokeThickness="1" RangeFromZero

="True">

<igChart:Axis.MajorGridline> 

<igChart:Mark Stroke="#4CFFFFFF"/> 

</igChart:Axis.MajorGridline> 

<igChart:Axis.MajorTickMark> 

<igChart:Mark Stroke="#00808080"/>  

</igChart:Axis.MajorTickMark> 

<igChart:Axis.Label> 

<igChart:Label Visible="False" Foreground="#FF787878" FontFamily="Tahoma" FontSize="9"/> 

</igChart:Axis.Label> 

</igChart:Axis> 

</igChart:XamChart.Axes> 

</igChart:XamChart>

Currently I am showing the MajorGridline after every 8 points added to chart (x axis represent time stamp).Now I am facing a problem to show MajorGridline when the first point is added.

 

 I tried to declear Unit = 0 in Xaml and change it to 8 from code after first point is added but it is removing the First MajorGridline as soon as Unit changes from 0 to 8.

Can u provide any solution to this problem?

Thanks,

Deep

  • 9836
    posted

    Hi Deep,

    I suppose that you need a major grid line on the first datapoint in the chart. One possible implementation is to add e.g. 8 (equals to the Unit) dummy points before your actual points. Here is one example:

    <igChart:Series.DataPoints>
              <igChart:DataPoint Value="0"/>
              <igChart:DataPoint Value="0"/>
                           
            <igChart:DataPoint Value="10"/>
            <igChart:DataPoint Value="20"/>
            <igChart:DataPoint Value="30"/>
            <igChart:DataPoint Value="40"/>
            ....
    </igChart:Series.DataPoints>

    <igChart:Axis.MajorGridline>
          <igChart:Mark Stroke="Red" Unit="2" />
    </igChart:Axis.MajorGridline>

    I hope this would work for your scenario.

    -Vlad