This is a migrated thread and some comments may be shown as answers.

Control Major/Minor Grid Line Intervals

1 Answer 275 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Ashley
Top achievements
Rank 1
Ashley asked on 02 Jul 2013, 07:38 PM
I'm using a line chart to plot data for every M-F in a date range. I'm binding this to a datatable, and because there are a lot of dates, I'm only displaying the dates on Mondays. 

Right now the separation between every day is a major grid line and I've hidden the minor grid lines because they're irrelevant - a fraction of a day.

Is there any way to set the interval for the major/minor grid lines? Say every 5 columns is a major and every 1 day is minor?

My x axis is a collection of dates, the datetime axis didn't seem to give me enough flexibility on this so I did it manually. This means I can't use the datetime intervals. 

Here is my markup:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="900px" Height="400px" Skin="Metro" Transitions="true" >
                <ChartTitle Text="">               
                    <Appearance Visible="false">
                        <TextStyle Margin="0" Padding="0" FontSize="1" />
                    </Appearance>
                </ChartTitle>
                <PlotArea>                                                
                    <XAxis MajorTickType="Outside" MinorTickType="None">
                        <TitleAppearance Visible="false">
                        </TitleAppearance>
                        <LabelsAppearance RotationAngle="45">
                        </LabelsAppearance>
                        <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                        <MinorGridLines Color="#F7F7F7" Width="1" Visible="false"></MinorGridLines>
                    </XAxis>
                    <YAxis>
                        <TitleAppearance Text="Price" Visible="false">
                        </TitleAppearance>
                        <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                        <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                    </YAxis>
                    <Series>
                        <rad:LineSeries MissingValues="Gap"  ColorField="Color" DataFieldY="Price">
                            <LineAppearance Width="1" />
                            <LabelsAppearance Visible="false"></LabelsAppearance>
                            <TooltipsAppearance ClientTemplate="#=dataItem.ToolTip#" />
                            <SeriesItems>
                            </SeriesItems>                           
                        </rad:LineSeries>
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>


1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 03 Jul 2013, 04:27 PM
Hello Ashley,

The Major Unit (interval between major divisions) for Categorical Axes(Line, Bar, etc) cannot be modified. The Major Unit for Numerical Axes(YAxis), however, can be controlled through the Step property of the Axis. This property changes the Major Unit and the labels of the YAxis simultaneously.

We have, however, an idea to implement an additional Step property for the LabelsAppearance element of the Series, which controls only the intervals of labels for both Numerical and Categorical Axes. This feature has already been logged as a PITS item here, so that you can monitor, comment and vote on it. For the time being axis labels can be added only for each n-th label and for the rest an empty string can be set.

If you are using, however, dateaxis (XAxis Type="Date") than you can use the baseUnit property which controls the base time interval for the DateAxis labels. More information about it is available in Date Axis help article.


Regards,
Danail Vasilev
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Chart (HTML5)
Asked by
Ashley
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or