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

Hide vertical lines in charts?

4 Answers 557 Views

Chart (HTML5)

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

bdrennen asked on 28 Jun 2019, 11:02 PM

hide_tick.gif

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?

4 Answers, 1 is accepted

answered on 01 Jul 2019, 02:36 PM

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.

answered on 01 Jul 2019, 03:23 PM

major_only.gif

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!

Accepted

answered on 05 Jul 2019, 08:07 AM

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.