Approved
Last Updated: 13 Nov 2019 08:42 by ADMIN
The font size and family set through the RadHtmlChartSkins.js file are not applied to RadHtmlChart. They are overwritten by the default font styles set in the code behind of the chart wrapper.
Approved
Last Updated: 05 Mar 2019 12:36 by ADMIN
The memory usage consumed by RadHtmlChart increase on each AJAX update and is never released.
Video:
Approved
Last Updated: 03 Oct 2016 10:15 by ADMIN
ADMIN
Created by: Slav
Comments: 0
Category: HtmlChart
Type: Bug Report
0
When you configure RadHtmlChart's YAxis with NarrowRange set to true, the setting is not serialized and as a result, not applied.
You can avoid it by setting the narrowRange on the client-side:

		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="250px" Height="300px">
			<ClientEvents OnLoad="chartLoad" />
			...
		</telerik:RadHtmlChart>
		<script>
			function chartLoad(){
				var chart = $telerik.$("#RadHtmlChart1").data("kendoChart");
				chart.options.valueAxis.narrowRange = true;
			}
		</script>
Approved
Last Updated: 06 Jun 2016 11:36 by Doug
Created by: Doug
Comments: 0
Category: HtmlChart
Type: Feature Request
1
It would be helpful to have a way to set the major tick step value via the RadHtmlChart control.  This can be set on the client side, but it seems like a missing feature since I can change the major tick size and label step values via the control axis attributes.  Here's an example with my suggested attribute shown in comments on the xAxis below.

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" DataSourceID="RequestDays">
    <ClientEvents OnLoad="OnLoad" />
    <PlotArea>
		<Series>
            <telerik:AreaSeries Name="Last Year" DataFieldY="Last"></telerik:AreaSeries>
            <telerik:AreaSeries Name="Current Year" DataFieldY="Current"></telerik:AreaSeries>
        </Series>
        <XAxis Name="Days" DataLabelsField="Days" MajorTickSize="5"> <%--MajorTickStep="7"--%>
            <LabelsAppearance Step="14" /> 
		</XAxis>
    </PlotArea>
</telerik:RadHtmlChart>

<script type="text/javascript">
        function OnLoad(chart) {
            var widget = chart.get_kendoWidget();
            widget.options.categoryAxis.majorTicks = { step: 7 };
            widget.redraw();
        }
    </script>
Approved
Last Updated: 11 Apr 2016 07:26 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
1
 Workaround use padding instead of margin:
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"  Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15000" />
							<telerik:CategorySeriesItem Y="-4000" />
							<telerik:CategorySeriesItem Y="10000" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<LabelsAppearance RotationAngle="45">
						<TextStyle Padding="135 0 0 0" />
					</LabelsAppearance>
					<Items>
						<telerik:AxisItem LabelText="item1" />
						<telerik:AxisItem LabelText="item2" />
						<telerik:AxisItem LabelText="item3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
Approved
Last Updated: 10 Mar 2016 09:32 by ADMIN
Approved
Last Updated: 10 Mar 2016 07:04 by ADMIN
The current implementation of RadHtmlChart explicitly specifies font-family and font-size settings on the server-side, which are then serialized and used by the Kendo widget, so the skin-specific settings are ignored.

For example, the Material skin should define a "Roboto" font-family, but this is overriden by "Arial" in the final serialization, so the skin configuration does not have any effect.

The default values of the server-side font settings can be removed in order to allow such customization and can be defined in the skins file instead.
Approved
Last Updated: 10 Mar 2016 09:45 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
0
For the time being the following events can be handled through the chartObject.

Select event is fired when the range of the selector from the navigator pane is changed.

JavaScript:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script>
            function pageLoad() {
                var chart = $find('<%=RadHtmlChart1.ClientID%>');
                chart._chartObject.bind("selectEnd", OnSelectEnd);
            }

            function OnSelectEnd(e) {
                alert("OnSelectEnd triggered: \nFrom: " + e.from + "\n To: " + e.to);
            }

        </script>
    </telerik:RadCodeBlock>
ASPX:

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Layout="Stock" Width="800" Height="400"
            Transitions="true">
            <PlotArea>
                <XAxis Name="mainAxis" DataLabelsField="SellDate" Type="Date">
                </XAxis>
                <Series>
                    <telerik:ColumnSeries DataFieldY="SellQuantity">
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
            <Navigator Visible="true">
                <XAxis Name="navAxis"></XAxis>
                <SelectionHint Visible="true" />
                <Series>
                    <telerik:AreaSeries DataFieldY="SellQuantity">
                    </telerik:AreaSeries>
                </Series>
            </Navigator>
        </telerik:RadHtmlChart>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        RadHtmlChart1.DataSource = GetData();
        RadHtmlChart1.DataBind();
    }

    protected DataTable GetData()
    {
        DataTable dt = new DataTable();

        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("SellQuantity", typeof(int));
        dt.Columns.Add("SellDate", typeof(DateTime));

        dt.Rows.Add(1, 2, new DateTime(2011, 06, 12));
        dt.Rows.Add(1, 5, new DateTime(2011, 12, 12));
        dt.Rows.Add(2, 6, new DateTime(2012, 06, 17));
        dt.Rows.Add(3, 4, new DateTime(2012, 09, 18));
        dt.Rows.Add(4, 7, new DateTime(2013, 03, 18));

        return dt;
    }
Approved
Last Updated: 11 Mar 2016 08:40 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
0

			
Approved
Last Updated: 26 Nov 2015 14:17 by ADMIN
ADMIN
Created by: Vessy
Comments: 0
Category: HtmlChart
Type: Feature Request
1
A good improvement in the RadHtmlChart would be to add MaxSize and MinSize properties for the series, which would allow the control the scaling of the bubble chart item. The property can be set through the chartObject:

        <script>
            function pageLoad() {
                var chart = $find("<%=BubbleChart.ClientID%>");
                chart.get_kendoWidget().options.series[0].minSize = 1;
                chart.get_kendoWidget().options.series[0].maxSize = 10;
                chart.get_kendoWidget().redraw();
            }
        </script>
        ASPX:
        <telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400">
            <PlotArea>
                <Series>
                    <telerik:BubbleSeries>
                        <Appearance FillStyle-BackgroundColor="#6ab2c9">
                        </Appearance>
                        <SeriesItems>
                            <telerik:BubbleSeriesItem Size="1" X="5" Y="5500" />
                            <telerik:BubbleSeriesItem Size="5" X="14" Y="12200" />
                            <telerik:BubbleSeriesItem Size="15" X="20" Y="39000" />
                        </SeriesItems>
                    </telerik:BubbleSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>


More detailed information regarding these properties can be found in the API reference of the Kendo UI Chart here:
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.maxSize
Approved
Last Updated: 23 Nov 2015 10:09 by David
Approved
Last Updated: 05 Jan 2016 13:48 by ADMIN
Approved
Last Updated: 06 Oct 2015 12:44 by druffyw
Created by: druffyw
Comments: 0
Category: HtmlChart
Type: Feature Request
1
When using the RadHtmlChart RadarSeries the axis are default drawn like a spiders web. (see screenshot)

A common request is that axis lines for this type of graph are drawn as circles (represending more a Radar type look).

This can currently be achieved by accessing the Kendo widget like so:

$find('RadarAreaChart').get_kendoWidget().options.valueAxis.majorGridLines.type="arc";
$find('RadarAreaChart').get_kendoWidget().options.valueAxis.minorGridLines.type="arc";
$find('RadarAreaChart').get_kendoWidget().redraw();

But it would be VERY convenient (and probably very easy to implement for you guys :-) if it was a setting on the RadarSeries itself (or perhaps on the axis of the RadarSeries.

E.g. property on RadarSeries called AxisType with values (Spider or Radar).

Best Regards

Thomas
Approved
Last Updated: 02 Jul 2015 07:21 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
1

			
Approved
Last Updated: 11 Jun 2015 06:05 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
1
A possible workaround: 
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			var ExplodeLevel = 0.15;
		</script>
		<telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true">
			<PlotArea>
				<Series>
					<telerik:PieSeries StartAngle="90">
						<LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %" />
						<TooltipsAppearance DataFormatString="{0} %" />
						<SeriesItems>
							<telerik:PieSeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" Y="18.3" />
							<telerik:PieSeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" Y="35.8" />
							<telerik:PieSeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" Y="38.3" />
							<telerik:PieSeriesItem BackgroundColor="Blue" Exploded="true" Name="Safari" Y="4.5" />
							<telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" Y="2.3" />
						</SeriesItems>
					</telerik:PieSeries>
				</Series>
			</PlotArea>
			<ChartTitle Text="Browser Usage for April 2012">
			</ChartTitle>
		</telerik:RadHtmlChart>
		<script>
			var math = Math,
				dataviz = kendo.dataviz,
				Box2D = dataviz.Box2D,
				Point2D = dataviz.Point2D,
				OUTSIDE_END = "outsideEnd",
				RIGHT = "right",
				util = kendo.util,
				valueOrDefault = util.valueOrDefault;

			kendo.dataviz.PieChart.fn.reflow = function (targetBox) {
				var chart = this,
					options = chart.options,
					box = targetBox.clone(),
					space = 5,
					minWidth = math.min(box.width(), box.height()),
					halfMinWidth = minWidth / 2,
					defaultPadding = minWidth - minWidth * 0.85,
					padding = valueOrDefault(options.padding, defaultPadding),
					newBox = Box2D(box.x1, box.y1,
					box.x1 + minWidth, box.y1 + minWidth),
					newBoxCenter = newBox.center(),
					seriesConfigs = chart.seriesConfigs || [],
					boxCenter = box.center(),
					points = chart.points,
					count = points.length,
					seriesCount = options.series.length,
					leftSideLabels = [],
					rightSideLabels = [],
					seriesConfig, seriesIndex, label,
					segment, sector, r, i, c;

				padding = padding > halfMinWidth - space ? halfMinWidth - space : padding;
				newBox.translate(boxCenter.x - newBoxCenter.x, boxCenter.y - newBoxCenter.y);
				r = halfMinWidth - padding;
				c = Point2D(
					r + newBox.x1 + padding,
					r + newBox.y1 + padding
				);

				for (i = 0; i < count; i++) {
					segment = points[i];

					sector = segment.sector;
					sector.r = r;
					sector.c = c;
					seriesIndex = segment.seriesIx;
					if (seriesConfigs.length) {
						seriesConfig = seriesConfigs[seriesIndex];
						sector.ir = seriesConfig.ir;
						sector.r = seriesConfig.r;
					}

					if (seriesIndex == seriesCount - 1 && segment.explode) {
						sector.c = sector.clone().radius(sector.r * ExplodeLevel).point(sector.middle());
					}

					segment.reflow(newBox);

					label = segment.label;
					if (label) {
						if (label.options.position === OUTSIDE_END) {
							if (seriesIndex == seriesCount - 1) {
								if (label.orientation === RIGHT) {
									rightSideLabels.push(label);
								} else {
									leftSideLabels.push(label);
								}
							}
						}
					}
				}

				if (leftSideLabels.length > 0) {
					leftSideLabels.sort(chart.labelComparator(true));
					chart.leftLabelsReflow(leftSideLabels);
				}

				if (rightSideLabels.length > 0) {
					rightSideLabels.sort(chart.labelComparator(false));
					chart.rightLabelsReflow(rightSideLabels);
				}

				chart.box = newBox;
			};
		</script>
	</form>
Approved
Last Updated: 09 Jun 2015 12:44 by ADMIN
For the time being you can use the following workaround:

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <script>
            function pageLoad() {
                var position = 'insideEnd'; // 'center'
                $find("<%=PieChart1.ClientID%>")._chartObject.options.series[0].labels.position = position;
                $find("<%=PieChart1.ClientID%>")._chartObject.options.series[0].labels.distance = -20;
                $find("<%=PieChart1.ClientID%>")._chartObject.redraw();
            }
        </script>
        <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true">
            <PlotArea>
                <Series>
                    <telerik:PieSeries StartAngle="90">
                        <LabelsAppearance DataFormatString="{0} %" />
                        <TooltipsAppearance DataFormatString="{0} %" />
                        <Items>
                            <telerik:SeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" YValue="18.3" />
                            <telerik:SeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" YValue="35.8" />
                            <telerik:SeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" YValue="38.3" />
                            <telerik:SeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" YValue="4.5" />
                            <telerik:SeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" YValue="2.3" />
                        </Items>
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
            <ChartTitle Text="Browser Usage for April 2012">
            </ChartTitle>
        </telerik:RadHtmlChart>
        <script>
            var INSIDE_END = "insideEnd",
                CENTER = "center",
                LEFT = "left",
                RIGHT = "right",
                dataviz = kendo.dataviz,
                Box2D = dataviz.Box2D,
                math = Math;

            kendo.dataviz.PieSegment.fn.reflowLabel = function () {
                var segment = this,
                    sector = segment.sector.clone(),
                    options = segment.options,
                    label = segment.label,
                    labelsOptions = options.labels,
                    labelsDistance = labelsOptions.distance,
                    angle = sector.middle(),
                    lp, x1, labelWidth, labelHeight;

                if (label) {
                    labelHeight = label.box.height();
                    labelWidth = label.box.width();
                    if (labelsOptions.position == CENTER) {
                        sector.r = math.abs((sector.r - labelHeight) / 2) + labelHeight + labelsDistance;
                        lp = sector.point(angle);
                        label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y));
                    } else if (labelsOptions.position == INSIDE_END) {
                        sector.r = sector.r - labelHeight / 2 + labelsDistance;
                        lp = sector.point(angle);
                        label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y));
                    } else {
                        lp = sector.clone().expand(labelsDistance).point(angle);
                        if (lp.x >= sector.c.x) {
                            x1 = lp.x + labelWidth;
                            label.orientation = RIGHT;
                        } else {
                            x1 = lp.x - labelWidth;
                            label.orientation = LEFT;
                        }
                        label.reflow(Box2D(x1, lp.y - labelHeight, lp.x, lp.y));
                    }
                }
            }
        </script>
Approved
Last Updated: 08 Jun 2015 12:34 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
0
For the time being you can resize the chart with set_width/set_height methods. For example:

<head runat="server">
	<title></title>
	<style>
		.RadHtmlChart.k-chart, table {
			width: 100%;
			height: 100%;
		}

		td {
			border: 1px solid green;
			width: 60%;
			height: 60%;
			overflow:hidden;
		}

		html, body, form {
			height: 100%;
			overflow: hidden;
			margin: 0;
		}
	</style>
</head>
<body>
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function resizedw() {
				// Haven't resized in 100ms!
				var donut = $find("<%=DonutChart.ClientID%>");
				var radar = $find("<%=RadarAreaChart.ClientID%>");

				var docDimensions = $telerik.getBounds(document.body);
				resizeChart(donut, docDimensions);
				resizeChart(radar, docDimensions);
			}

			function resizeChart(chart, docDimensions) {
				var chartDimensions = $telerik.getBounds(chart.get_element().parentElement);
				chart.set_width("'" + (chartDimensions.width / docDimensions.width) + "%'");
				chart.set_height(("'" + chartDimensions.height / docDimensions.height) + "'%");
			}

			var doit;
			window.onresize = function () {
				clearTimeout(doit);
				doit = setTimeout(resizedw, 1000);
			};
		</script>
		<table>
			<tr>
				<td>
					<telerik:RadHtmlChart runat="server" ID="DonutChart" Width="100%" Height="100%" Transitions="true">
						<Appearance>
							<FillStyle BackgroundColor="White"></FillStyle>
						</Appearance>
						<ChartTitle Text="OS Usage Statistics for December 2012">
							<Appearance Align="Center" Position="Top"></Appearance>
						</ChartTitle>
						<PlotArea>
							<Series>
								<telerik:DonutSeries>
									<LabelsAppearance Visible="false">
									</LabelsAppearance>
									<TooltipsAppearance DataFormatString="{0}%" BackgroundColor="White"></TooltipsAppearance>
									<SeriesItems>
										<telerik:PieSeriesItem BackgroundColor="#00adcc" Name="Win7"
											Y="55.6"></telerik:PieSeriesItem>
										<telerik:PieSeriesItem BackgroundColor="#cccccc" Name="Win8" Y="2.5"></telerik:PieSeriesItem>
										<telerik:PieSeriesItem BackgroundColor="#999999" Name="Vista" Y="2.8"></telerik:PieSeriesItem>
										<telerik:PieSeriesItem BackgroundColor="#888888" Name="NT" Y="1.8"></telerik:PieSeriesItem>
										<telerik:PieSeriesItem BackgroundColor="#777777" Name="WinXP" Y="21.1"></telerik:PieSeriesItem>
										<telerik:PieSeriesItem BackgroundColor="#666666" Name="Linux" Y="4.7"></telerik:PieSeriesItem>
										<telerik:PieSeriesItem BackgroundColor="#555555" Name="Mac" Y="8.7"></telerik:PieSeriesItem>
										<telerik:PieSeriesItem BackgroundColor="#444444" Name="Mobile" Y="2.2"></telerik:PieSeriesItem>
									</SeriesItems>
								</telerik:DonutSeries>
							</Series>
						</PlotArea>
					</telerik:RadHtmlChart>
				</td>
				<td>
					<telerik:RadHtmlChart runat="server" ID="RadarAreaChart" Width="100%" Height="100%" Transitions="true">
						<PlotArea>
							<Series>
								<telerik:RadarAreaSeries Name="Position" MissingValues="Gap">
									<Appearance>
										<FillStyle BackgroundColor="#00adcc"></FillStyle>
									</Appearance>
									<LineAppearance Width="1" />
									<MarkersAppearance Visible="false" />
									<LabelsAppearance Visible="false"></LabelsAppearance>
									<SeriesItems>
										<telerik:CategorySeriesItem Y="159"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="170"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="100"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="140"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="160"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="103"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="173"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="107"></telerik:CategorySeriesItem>
									</SeriesItems>
								</telerik:RadarAreaSeries>
								<telerik:RadarAreaSeries Name="Person" MissingValues="Gap">
									<Appearance>
										<FillStyle BackgroundColor="red"></FillStyle>
									</Appearance>
									<LabelsAppearance Visible="false">
									</LabelsAppearance>
									<LineAppearance Width="1" />
									<MarkersAppearance Visible="false"></MarkersAppearance>
									<SeriesItems>
										<telerik:CategorySeriesItem Y="130"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="160"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="130"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="168"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="150"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="140"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="109"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="76"></telerik:CategorySeriesItem>
									</SeriesItems>
								</telerik:RadarAreaSeries>
							</Series>
							<XAxis Color="Black" Reversed="false" StartAngle="180">
								<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
								<MinorGridLines Visible="false"></MinorGridLines>
								<Items>
									<telerik:AxisItem LabelText="Soft Skills"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Sector knowledge"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Finance knowledge"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Work experience"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Win7 skills"></telerik:AxisItem>
									<telerik:AxisItem LabelText="MS Office skills"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Programming skills"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Database skills"></telerik:AxisItem>
								</Items>
							</XAxis>
							<YAxis Visible="false">
								<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
								<MinorGridLines Visible="false"></MinorGridLines>
								<LabelsAppearance Step="1"></LabelsAppearance>
							</YAxis>
							<CommonTooltipsAppearance Color="White"></CommonTooltipsAppearance>
						</PlotArea>
						<ChartTitle Text="Position Profile">
							<Appearance Align="Center" BackgroundColor="White" Position="Top">
							</Appearance>
						</ChartTitle>
						<Legend>
							<Appearance BackgroundColor="White" Position="Bottom">
							</Appearance>
						</Legend>
					</telerik:RadHtmlChart>
				</td>
			</tr>
		</table>
	</form>
Approved
Last Updated: 05 May 2015 06:32 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
1
The selection (http://demos.telerik.com/kendo-ui/chart-api/selection) can be configured through the kendo widget:
		<script>
			function pageLoad(args) {
				var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
				kendoWidget.options.categoryAxis.select = { from: 1, to: 2 };
				kendoWidget.bind("selectStart", onSelectStart);
				kendoWidget.bind("select", onSelect);
				kendoWidget.bind("selectEnd", onSelectEnd);

				kendoWidget.redraw();
			}

			function formatRange(e) {
				var categories = e.axis.categories;

				return kendo.format("{0} - {1} ({2} - {3})",
					e.from, e.to,
					categories[e.from],
					// The last category included in the selection is at (to - 1)
					categories[e.to - 1]
				);
			}

			function onSelectStart(e) {
				console.log(kendo.format("Select start :: {0}", formatRange(e)));
			}

			function onSelect(e) {
				console.log(kendo.format("Select :: {0}", formatRange(e)));
			}

			function onSelectEnd(e) {
				console.log(kendo.format("Select end :: {0}", formatRange(e)));
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="1" />
							<telerik:CategorySeriesItem Y="2" />
							<telerik:CategorySeriesItem Y="3" />
							<telerik:CategorySeriesItem Y="4" />
							<telerik:CategorySeriesItem Y="2" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<Items>
						<telerik:AxisItem LabelText="1" />
						<telerik:AxisItem LabelText="2" />
						<telerik:AxisItem LabelText="3" />
						<telerik:AxisItem LabelText="4" />
						<telerik:AxisItem LabelText="5" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
Approved
Last Updated: 03 Aug 2016 12:15 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
2

			
Approved
Last Updated: 23 Mar 2015 11:48 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
1
For the time being the property can be set through the kendo widget:
		<script type="text/javascript">
			function pageLoad() {
				var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
				kendoWidget.options.series[0].color = function (e) {
					if (e.value > 20) {
						return "red";
					}
					else {
						return "green";
					}
				}
				kendoWidget.redraw();
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries>
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
1 2 3 4