# Grid Lines for multiple y-axis

19 posts, 0 answers
1. ##### Supriya
13 posts
Member since:
Mar 2013

Posted 21 Mar 2013 Link to this post

I require grid lines on my graph. My graph contains multiple y-axis and single x-axis.
I am getting vertical grid lines on my graph but unable to get grid lines horizontally for mapping vertical axis.
Can u help me to get that  grid lines vertically? please provide an example.
2. ##### Evgenia
1437 posts

Posted 27 Mar 2013 Link to this post

Hi Supriya,

Unfortunately additional axes of RadChartView cannot have gridlines by default. However you may achieve this with Custom Gridlines and more specially CartesianGridline annotations.

Greetings,
Evgenia
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

3. ##### Supriya
13 posts
Member since:
Mar 2013

Posted 31 Mar 2013 Link to this post

can u explain cartesian chart annotation with an example so that i can generate lies dynamically.
4. ##### Evgenia
1437 posts

Posted 04 Apr 2013 Link to this post

Hi Supriya,

You can get to know the Cartesian Annotations from the help topic provided in my previous post as well as this online demo. You can dynamically create annotations by adding them to RadCartesianChart.Annotations collection.

Kind regards,
Evgenia
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

5. ##### Supriya
13 posts
Member since:
Mar 2013

Posted 06 Apr 2013 Link to this post

thanks
6. ##### Supriya
13 posts
Member since:
Mar 2013

Posted 04 Jul 2013 Link to this post

hi,
i have got a graph with multiple y-axis which are created dynamically and the points are added dynamically to it. I need to show both horizontal and vertical grid lines for the multiple y-axis graph. The y-axis minimum and maximum values are decided dynamically and each y-axis is having maximum 10 ticks. We want to show the grid lines on button command.How can we show the grid lines both horizontally and vertically on the graph depending only on the first y-axis irrespective of multiple y-axis? And does telerik provides open source code which we can modify according to our requirement?

Below is the code and  the image attached of the graph.

<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="boolToVisible"/>

<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<Border BorderThickness="10" x:Name="Border"  >
<StackPanel ClipToBounds="True" Orientation="Vertical"
IsItemsHost="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="#5082a4" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Setter Property="Background"
Value="#0f3c5a"></Setter>
<Setter Property="Foreground"
Value="White"></Setter>
<Style.Triggers>
<Trigger Property="IsHighlighted"
Value="True">
<Setter Property="Background"
Value="Black"></Setter>
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Foreground"
Value="LightGray"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>

<Grid Height="auto">
<Canvas x:Name="dragSelectionCanvas"
Visibility="Collapsed" VerticalAlignment="Center" HorizontalAlignment="Center">
<!--<Border x:Name="dragSelectionBorder" BorderBrush="Blue" BorderThickness="1" Background="LightBlue" CornerRadius="1" Opacity="0.5" Width="100" Height="100" />-->
<Rectangle x:Name="selectionBox" StrokeDashArray="0.5 1.0 0.3" Stroke="Black" StrokeThickness="2" RadiusX="10" RadiusY="10"  Visibility="Collapsed"/>
</Canvas>

<telerik:ChartPanAndZoomBehavior PanMode="Both" ZoomMode="Both" />

<Style TargetType="Polyline" >
<Setter Property="Visibility" Value="Visible"  />
</Style>

<Style TargetType="telerik:TrackBallInfoControl">
<Setter Property="DataPointInfoTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Background="Lavender" Orientation="Horizontal" >
<TextBlock Text="{Binding Path=DisplayHeader}" Margin="6" FontFamily="Segoe UI" Foreground="DarkBlue" />
<TextBlock Text=":" Margin="6" Foreground="Brown" />
<TextBlock Text="{Binding Path=DataPoint.Value}" Margin="6" FontFamily="Segoe UI" Foreground="DarkBlue" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter.Value>
<DataTemplate>
<StackPanel Background="Lavender" Orientation="Horizontal">
<TextBlock Text="{Binding}"  FontFamily="Segoe UI" Foreground="DarkBlue"  />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>

<telerik:CartesianChartGrid>
<telerik:CartesianChartGrid.Style>
<Style TargetType="telerik:CartesianChartGrid">
<Setter Property="MajorXLineDashArray" Value="10,5"/>
<Setter Property="MajorYLineDashArray" Value="10,5"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=DisplayGridLines}" Value="True">
<Setter Property="MajorLinesVisibility" Value="XY"/>
</DataTrigger>
</Style.Triggers>
</Style>
</telerik:CartesianChartGrid.Style>

<telerik:CartesianChartGrid.MajorXLineStyle>
<Style TargetType="Line">
<Setter Property="Stroke" Value="DarkGray"/>
</Style>

</telerik:CartesianChartGrid.MajorXLineStyle>

<telerik:CartesianChartGrid.MajorYLineStyle>
<Style TargetType="Line">
<Setter Property="Stroke" Value="DarkGray"/>
</Style>
</telerik:CartesianChartGrid.MajorYLineStyle>
</telerik:CartesianChartGrid>

<telerik:LinearAxis x:Name="verticalAxis"/>

<!--<telerik:CategoricalAxis Title="Time" Foreground="Black" MajorTickInterval="500"/>-->
<!--<telerik:CategoricalAxis Title="Time" Foreground="Black" MajorTickInterval="5"/>-->
<telerik:CategoricalAxis x:Name="horizontalAxis"/>

</Grid>

</UserControl>

7. ##### Evgenia
1437 posts

Posted 09 Jul 2013 Link to this post

Hi Supriya,

By default Cartesian Gridlines are drawn for the default (the first) Vertical Axis of your chart. So it won't be difficult to you to turn on the major lines visibility on Button click. All you have to do is to set the MajorLinesVisibility enum to XY. You can read more about CartesianChartGrid Striplines and Gridlines in our documentation here.

Regards,
Evgenia
Telerik

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
8. ##### Ashok
1 posts
Member since:
Nov 2013

Posted 17 Nov 2013 Link to this post

how to draw dash line graph
9. ##### Evgenia
1437 posts

Posted 20 Nov 2013 Link to this post

Hi Ashok,

You can use Custom line annotation to achieve that. Besides the HorizontalFrom/To and VerticalFrom/To properties that are used for defining the line, the CartesianCustomLineAnnotation exposes DashArray property that is a collection of System.Double values that indicate the pattern of dashes and gaps that is used to outline the border of the marked zone. For example:

`<``telerik:CartesianCustomLineAnnotation ``HorizontalFrom``=``"0.0" ``VerticalFrom``=``"2.25"`
`                                       ``HorizontalTo``=``"3.75" ``VerticalTo``=``"2.25"`
`                                       ``Stroke``=``"CornflowerBlue"`
`                                       ``StrokeThickness``=``"3"`
`                                       ``DashArray``=``"8 4 2 3"``/>`

Regards,
Evgenia
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
10. ##### Richard
11 posts
Member since:
Jul 2014

Posted 28 Oct 2014 in reply to Evgenia Link to this post

This link is broken!
11. ##### Martin Ivanov
1384 posts

Posted 29 Oct 2014 Link to this post

Hello Richard,

Thank you for the report.

You can find the GridLine Annotations article on the following link.

Regards,
Martin
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

12. ##### sai
43 posts
Member since:
Feb 2015

Posted 27 May 2015 in reply to Martin Ivanov Link to this post

Hi,

I am uisng cartesian chart.

please find the attached screenshot.

i wan tto add always one additional y axis point in my graph.

like 0,50,100,150,200  ..i want to add one more 250.

13. ##### Martin Ivanov
1384 posts

Posted 28 May 2015 Link to this post

Hi Sai,

You can control the range of the chart's LinearAxis (the vertical axis in your case) by using its Minimum, Maximum and MajorStep properties. To add label on 250 you can set the Maximum to 250. However, keep in mind that the chart will distribute its labels evenly. If you want to have a label that is positioned on a value which is not multiple of the MajorStep you can use a custom annotation instead.

Regards,
Martin
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
14. ##### sai
43 posts
Member since:
Feb 2015

Posted 28 May 2015 in reply to Martin Ivanov Link to this post

I am creating the chart dynamically.

i this case howw i can control setting minimum and maximum.?

15. ##### sai
43 posts
Member since:
Feb 2015

Posted 28 May 2015 in reply to Martin Ivanov Link to this post

please let me know how to raduce the space between the graph and label.

please check attached screenshot

16. ##### Martin Ivanov
1384 posts

Posted 28 May 2015 Link to this post

Hi Sai,

If you have any questions that are not related to the original question in this forum thread (Grid Lines for multiple y-axis) I would ask you to open a new forum and ask it there. Also, if you have several questions that are not related to one another I recommend you to open new forums for each one. This way our community will be organized better and the search in the forums will be easier.

• I am creating the chart dynamically. In this case howw i can control setting minimum and maximum.?
You can set the Maximum property in code in the following manner:
`var verticalAxis = ``new ``LinearAxis();`
`// code for defining the axis and setting it on the chart`
`verticalAxis.Maximum = 250;`
• please let me know how to raduce the space between the graph and label.
The space between the data point (the bar in this case) and its label is determined by the Margin of the series' label definition. To reduce the space you will need to define a LabelDefinition for the series and set its Margin to the desired value. For example:
`var definition = ``new ``ChartSeriesLabelDefinition() { Margin = ``new ``Thickness(0, 0, 0, 5) };`
`series.LabelDefinitions.Add(definition);`

Regards,
Martin
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
17. ##### sai
43 posts
Member since:
Feb 2015

Posted 28 May 2015 in reply to Martin Ivanov Link to this post

Hi Martin,

i will follow as per your work nature.

Tanx for your quick responce.

the space issue is fixed with your solution.thanks alot

but the other issue.providing additioanl level of y axis.your solution didnt help me more.

please find the attached screen shots.

i ma creating charts dynamically in code behind.using radcartesian chart.

i cant fix the maximum .

but always i need one additional y axis level in the charts.

18. ##### Martin Ivanov
1384 posts

Posted 02 Jun 2015 Link to this post

Hello Sai,

I am afraid that without setting the Maximum of the axis you won't be able to extend it ("include additional level"). If you want to achieve this because the series' labels are clipped, you can consider setting the ClipToPlotArea property of the series to False. This way the labels won't be clipped when they reach the end of the plot area.
`<``telerik:BarSeries ``ClipToPlotArea``=``"False" ``/>`
Another approach that you can use is to apply a smart labels strategy.

Regards,
Martin
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
19. ##### sai
43 posts
Member since:
Feb 2015

Posted 04 Jun 2015 in reply to Martin Ivanov Link to this post

Thank you.

Its worked fine