Hi,
I am trying various methods for adjusting the minor grid line step value and each one fails. What is the current JS that I could use to change the minorgridline step value?
Sample code that I have been trying is shown below.
Regards
Jon
var
kendoWidget = $find(
"<%=uxRadHtmlChart.ClientID%>"
).get_kendoWidget();
kendoWidget._plotArea.valueAxis.options.minorGridLines.step = 10;
kendoWidget._plotArea.valueAxis.options.minorUnit = 10;
kendoWidget.redraw();
7 Answers, 1 is accepted
You can use options instead of _plotArea. For example
chart.get_kendoWidget().options.yAxis.majorGridLines.step
More information is available in this feedback item - http://feedback.telerik.com/Project/108/Feedback/Details/127441
Regards,
Danail Vasilev
Telerik
See What's Next in App Development. Register for TelerikNEXT.

Hi Danail,
I've tried the one you suggest as well as using the _chartObject bypassing the get kendo object stage (as seen in that link). Neither method works for me.
Full js being used is shown below. Hope you have a suggestion !
function
pageLoad() {
if
($find(
"uxRadHtmlChart"
) !==
null
) {
//try {
var
kendoWidget = $find(
"<%=uxRadHtmlChart.ClientID%>"
).get_kendoWidget();
kendoWidget.options.series[0].color =
function
(e) {
if
(e.value < e.dataItem.RedValue) {
return
"red"
;
}
else
{
if
(e.value >= e.dataItem.GreenValue) {
return
"green"
;
}
else
{
return
"orange"
;
}
}
}
kendoWidget.redraw();
//} catch (err) {
// // do nothing
//}
var
chart = $find(
"<%=uxRadHtmlChart.ClientID%>"
);
chart._chartObject.options.yAxis.majorGridLines.step = 5;
chart.repaint();
}
WindowResize();
};
Could you please paste below the chart markup+JavaScript, so that I can run it and investigate it? You can place some dummy data to the chart to make it runnable. Can you also tell us which version of Telerik UI controls you are using?
Regards,
Danail Vasilev
Telerik
See What's Next in App Development. Register for TelerikNEXT.

Hi Danail
I've created a stand alone project for this and the issue still appears. Code is pasted below.
The version of the Web.UI being used is 2015.1.401.45
Fingers crossed you can duplicate the issue.
Regards
Jon
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
>Main Dashboard Page</
title
>
<
script
type
=
"text/javascript"
>
function pageLoad() {
var chart = $find("uxRadHtmlChart");
//chart._chartObject.options.yAxis.majorGridLines.step = 5;
chart.get_kendoWidget().options.yAxis.minorGridLines.step = 5;
chart.get_kendoWidget().options.yAxis.majorGridLines.step = 10;
chart.repaint();
};
</
script
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
></
telerik:RadScriptManager
>
<
telerik:RadStyleSheetManager
ID
=
"uxRadStyleSheetManager"
Runat
=
"server"
></
telerik:RadStyleSheetManager
>
<
telerik:RadHtmlChart
ID
=
"uxRadHtmlChart"
runat
=
"server"
Height
=
"30%"
>
<
PlotArea
>
<
Series
>
<
telerik:ColumnSeries
>
<
Items
>
<
telerik:SeriesItem
Name
=
"a"
YValue
=
"90"
/>
<
telerik:SeriesItem
Name
=
"b"
YValue
=
"91"
/>
<
telerik:SeriesItem
Name
=
"c"
YValue
=
"93"
/>
<
telerik:SeriesItem
Name
=
"d"
YValue
=
"98"
/>
<
telerik:SeriesItem
Name
=
"e"
YValue
=
"80"
/>
</
Items
>
</
telerik:ColumnSeries
>
</
Series
>
<
XAxis
Name
=
"category"
></
XAxis
>
<
YAxis
Name
=
"value"
MinValue
=
"0"
MaxValue
=
"100"
></
YAxis
>
</
PlotArea
>
</
telerik:RadHtmlChart
>
</
form
>
</
body
>
</
html
>
Thank you for providing us a runnable sample that reproduces the issue.
You can use valueAxis for category series like Column series and yAxis for numeric series like bubble and scatter, in order to access the y-axis. For example:
<script type=
"text/javascript"
>
function
pageLoad() {
var
chart = $find(
"uxRadHtmlChart"
);
chart.get_kendoWidget().options.valueAxis.minorGridLines.step = 2;
chart.get_kendoWidget().options.valueAxis.majorGridLines.step = 2;
chart.repaint();
};
</script>
Regards,
Danail Vasilev
Telerik
See What's Next in App Development. Register for TelerikNEXT.

Hi Danail
Sorry that doesn't work either. That said it does affect the chart though. As soon as I use that all horizontal grid lines are removed on the chart...
Regards
Jon
If you want to change the step of the y-axis you can use the YAxis.Step property. If you want to change the step through which major/grid lines render you should use the code I have provided in my previous post, which works properly on my side. Note that if you set a higher value for the grid lines step it is normal for them to no appear because there may not be such slots.
You can make a test with the code below, where is illustrated how to set the step of the yaxis and major/minor grid lines. For your convenience I have also created a snapshot with short description to get a better understanding - http://screencast.com/t/qOavfgziio
ASPX:
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
id
=
"Head1"
runat
=
"server"
>
<
title
>Main Dashboard Page</
title
>
<
script
type
=
"text/javascript"
>
function pageLoad() {
var chart = $find("uxRadHtmlChart");
chart.get_kendoWidget().options.valueAxis.minorGridLines.step = 2;
chart.get_kendoWidget().options.valueAxis.majorGridLines.step = 2;
chart.repaint();
};
</
script
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
></
telerik:RadScriptManager
>
<
telerik:RadStyleSheetManager
ID
=
"uxRadStyleSheetManager"
runat
=
"server"
></
telerik:RadStyleSheetManager
>
<
telerik:RadHtmlChart
ID
=
"uxRadHtmlChart"
runat
=
"server"
Height
=
"30%"
>
<
PlotArea
>
<
Series
>
<
telerik:ColumnSeries
>
<
Items
>
<
telerik:SeriesItem
Name
=
"a"
YValue
=
"90"
/>
<
telerik:SeriesItem
Name
=
"b"
YValue
=
"91"
/>
<
telerik:SeriesItem
Name
=
"c"
YValue
=
"93"
/>
<
telerik:SeriesItem
Name
=
"d"
YValue
=
"98"
/>
<
telerik:SeriesItem
Name
=
"e"
YValue
=
"80"
/>
</
Items
>
</
telerik:ColumnSeries
>
</
Series
>
<
XAxis
Name
=
"category"
></
XAxis
>
<
YAxis
Name
=
"value"
MinValue
=
"0"
MaxValue
=
"100"
Step
=
"25"
></
YAxis
>
</
PlotArea
>
</
telerik:RadHtmlChart
>
</
form
>
</
body
>
</
html
>
http://screencast.com/t/qOavfgziio
Regards,
Danail Vasilev
Telerik
See What's Next in App Development. Register for TelerikNEXT.