Hide vertical lines in charts?

5 posts, 1 answers
  1. bdrennen
    bdrennen avatar
    36 posts
    Member since:
    Dec 2009

    Posted 28 Jun Link to this post

    I have a line chart with vertical lines on the ticks on the X-axis. My chart definition looks like this:

    <telerik:RadHtmlChart ID="Chart" runat="server">
        <PlotArea>
            <Series>
                <telerik:LineSeries DataFieldY="Year">
                    <TooltipsAppearance Visible="false"></TooltipsAppearance>
                    <Appearance>
                        <FillStyle BackgroundColor="#5dade2"></FillStyle>
                    </Appearance>
                </telerik:LineSeries>
            </Series>
            <XAxis DataLabelsField="MONTH_NAME" Color="black" MajorTickType="None" MinorTickSize="2" MinorTickType="Outside">
                <MajorGridLines Visible="false" />
                <MinorGridLines Visible="true" />
            </XAxis>
            <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="2" Step="1">
                <MajorGridLines Visible="false" />
                <MinorGridLines Visible="false" />
            </YAxis>
        </PlotArea>
        <ChartTitle Text="By Month - Average"></ChartTitle>
        <Legend>
            <Appearance BackgroundColor="Transparent" Position="Bottom" Visible="True"></Appearance>
        </Legend>
    </telerik:RadHtmlChart>

     

    It results in a chart that looks like the attached picture. Is there a way to turn off the vertical lines like the one I've outlined in red?

  2. Vessy
    Admin
    Vessy avatar
    2009 posts

    Posted 01 Jul Link to this post

    Hi Bryan,

    The undesired lines are the XAxis.MinerGridLines which visibility is set to true in the provided snippet. Changing the value of the highlighted below property to "false" will remove them from the chart:
    <telerik:RadHtmlChart ID="Chart" runat="server">
        <PlotArea>
            <Series>
                <telerik:LineSeries DataFieldY="Year">
                    <TooltipsAppearance Visible="false"></TooltipsAppearance>
                    <Appearance>
                        <FillStyle BackgroundColor="#5dade2"></FillStyle>
                    </Appearance>
                </telerik:LineSeries>
            </Series>
            <XAxis DataLabelsField="MONTH_NAME" Color="black" MajorTickType="None" MinorTickSize="8"
                MinorTickType="Outside">
                <MajorGridLines Visible="false" />
                <MinorGridLines Visible="false" />
            </XAxis>
            <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="" Step="1">
                <MajorGridLines Visible="false" />
                <MinorGridLines Visible="false" />
            </YAxis>
        </PlotArea>
        <ChartTitle Text="By Month - Average"></ChartTitle>
        <Legend>
            <Appearance BackgroundColor="Transparent" Position="Bottom" Visible="True"></Appearance>
        </Legend>
    </telerik:RadHtmlChart>


    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. bdrennen
    bdrennen avatar
    36 posts
    Member since:
    Dec 2009

    Posted 01 Jul in reply to Vessy Link to this post

    Vessy:

    I gave that a try, but it turns off all vertical lines from the X-axis. Turning on the MajorGridLines on that axis puts in lines between the months--almost what I want. Do you know of a way to have grid lines on just the ticks that have labels? I've attached a screenshot that shows what I get when I have MajorGridLines Visible = "true".

    Thank you!

  4. Answer
    Vessy
    Admin
    Vessy avatar
    2009 posts

    Posted 05 Jul Link to this post

    Hi Bryan,

    By default the minorGridLines of category series are shown on every tick, while the majorGridLines are shown between the labels. A possible option to achieve the target layout is to set the step of the minorGridLines to 2, skipping the first one, so the lines will appear over the labels. You can set the categoryAxis.minorGridLines.step and categoryAxis.minorGridLines.skip values of the HtmlChart through its underlying Kendo UI widget like follows:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
        <ClientEvents OnLoad="onLoad" />
        <PlotArea>
            <Series>
                <telerik:LineSeries DataFieldY="Year">
                    <TooltipsAppearance Visible="false"></TooltipsAppearance>
                    <Appearance>
                        <FillStyle BackgroundColor="#5dade2"></FillStyle>
                    </Appearance>
                </telerik:LineSeries>
            </Series>
            <XAxis EnableBaseUnitStepAuto="true" BaseUnitStep="2" DataLabelsField="MONTH_NAME" Color="black"
                MajorTickType="None" MinorTickSize="8" MinorTickType="Outside">
                <MajorGridLines Visible="false" />
                <MinorGridLines Visible="true" />
                <LabelsAppearance Step="1"></LabelsAppearance>
            </XAxis>
            <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="" Step="1">
                <MajorGridLines Visible="false" />
                <MinorGridLines Visible="false" />
            </YAxis>
        </PlotArea>
        <ChartTitle Text="By Month - Average"></ChartTitle>
        <Legend>
            <Appearance BackgroundColor="Transparent" Position="Bottom" Visible="True"></Appearance>
        </Legend>
    </telerik:RadHtmlChart>
     
    <script>
        function onLoad(chart) {
            var widget = chart.get_kendoWidget();
            var options = widget.options;
            options.categoryAxis.minorGridLines.step = 2;
            options.categoryAxis.minorGridLines.skip = 1;
            widget.setOptions(options);
        }
    </script>


    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. bdrennen
    bdrennen avatar
    36 posts
    Member since:
    Dec 2009

    Posted 12 Jul in reply to Vessy Link to this post

    That works perfectly! Thank you very much.
Back to Top