Completed
Last Updated: 26 Aug 2022 10:59 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
0
For the time being the function can be set through the kendoWidget:
ASPX:
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				chart._chartObject.options.series[0].markers.type = function (point) {
					if (point.value > 2) {
						return "triangle";
					}
					else {
						return "circle";
					}
				};
				chart.repaint();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="1" />
							<telerik:CategorySeriesItem Y="2" />
							<telerik:CategorySeriesItem Y="3" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
				<XAxis>
					<Items>
						<telerik:AxisItem LabelText="1" />
						<telerik:AxisItem LabelText="2" />
						<telerik:AxisItem LabelText="3" />
					</Items>
				</XAxis>
			</PlotArea>
			<ChartTitle Text="Product sales for 2011">
			</ChartTitle>
			<Legend>
				<Appearance Position="Bottom" />
			</Legend>
		</telerik:RadHtmlChart>
Completed
Last Updated: 16 Aug 2023 06:41 by ADMIN
Release R3 2023
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
1
For the time being you can set the types through the kendoWidget:
		<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
			<script>
				function pageLoad() {
					var chart = $find('<%=RadHtmlChart1.ClientID%>');
					chart._chartObject.options.series[0].type = "verticalLine";
					chart.repaint();
				}
			</script>
		</telerik:RadCodeBlock>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15000" />
							<telerik:CategorySeriesItem Y="23000" />
							<telerik:CategorySeriesItem Y="10000" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
				<XAxis>
					<Items>
						<telerik:AxisItem LabelText="1" />
						<telerik:AxisItem LabelText="2" />
						<telerik:AxisItem LabelText="3" />
					</Items>
				</XAxis>
			</PlotArea>
			<ChartTitle Text="Product sales for 2011">
			</ChartTitle>
			<Legend>
				<Appearance Position="Bottom" />
			</Legend>
		</telerik:RadHtmlChart>
Completed
Last Updated: 31 Aug 2016 14:27 by Imported User
ADMIN
Created by: Stamo Gochev
Comments: 2
Category: HtmlChart
Type: Feature Request
3
For the time being you can utilize the Kendo UI charting scripts (http://demos.telerik.com/kendo-ui/bullet-charts/index) and API that RadHtmlChart use, in order to render a bullet chart:
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function createChart() {
				$telerik.$("#chart").kendoChart({
					legend: {
						visible: false
					},
					series: [{
						type: "bullet",
						data: [[750, 762.5]]
					}],
					chartArea: {
						margin: {
							left: 0
						}
					},
					categoryAxis: {
						majorGridLines: {
							visible: false
						},
						majorTicks: {
							visible: false
						}
					},
					valueAxis: [{
						plotBands: [{
							from: 715, to: 752, color: "#ccc", opacity: .6
						}, {
							from: 752, to: 772, color: "#ccc", opacity: .3
						}],
						majorGridLines: {
							visible: false
						},
						min: 715,
						max: 795,
						minorTicks: {
							visible: true
						}
					}],
					tooltip: {
						visible: true,
						template: "Maximum: #= value.target # <br /> Average: #= value.current #"
					}
				});
			}
			function pageLoad() {
				createChart();
			}
		</script>
		<div id="chart"></div>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" style="display:none;"></telerik:RadHtmlChart>
	</form>
Completed
Last Updated: 28 Jul 2016 11:18 by ADMIN
The lines can be similar to the ones in the box plot chart type - http://www.telerik.com/help/aspnet-ajax/htmlchart-types-box-plot-chart.html .

For the time being you can use transparent box plot series in order to simulate this. For example:

ASPX:

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function pageLoad() {
				//Attach the legendItemClick event on pageLoad:
				var chart = $find("<%=RadHtmlChart1.ClientID%>")._chartObject.bind("legendItemClick", OnLegendClicked);
			}
			function OnLegendClicked(e) {
				if (e.seriesIndex >= 3) {
					var meanSeriesVisible = e.sender.options.series[3].visible;
					var medianSeriesVisible = e.sender.options.series[4].visible;

					if (meanSeriesVisible == medianSeriesVisible) {
						if (e.series.visible == false) {
							e.sender.options.series[5].visible = false;
						}
					}
					else {
						if (e.series.visible == false) {
							e.preventDefault();
							e.sender.options.series[3].visible = false;
							e.sender.options.series[4].visible = false;
							e.sender.options.series[5].visible = true;
							e.sender.options.transitions = false;
							e.sender.redraw();
						}
					}
				}
			}
		</script>
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="1000" Height="500">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Germany Gold" GroupName="Germany" Gap="1">
                        <Appearance>
                            <FillStyle BackgroundColor="#DDD9C3" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="13" />
                            <telerik:CategorySeriesItem Y="12" />
                            <telerik:CategorySeriesItem Y="16" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Germany Silver" GroupName="Germany">
                        <Appearance>
                            <FillStyle BackgroundColor="#C4BD97" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="17" />
                            <telerik:CategorySeriesItem Y="16" />
                            <telerik:CategorySeriesItem Y="10" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Germany Bronze" GroupName="Germany">
                        <Appearance>
                            <FillStyle BackgroundColor="#948A54" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="26" />
                            <telerik:CategorySeriesItem Y="20" />
                            <telerik:CategorySeriesItem Y="15" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" Color="White" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:BoxPlotSeries Name="Mean" Visible="true">
                        <Appearance>
                            <FillStyle BackgroundColor="Transparent" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:BoxPlotSeriesItem Mean="11" Median="0" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="15" Median="0" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="14" Median="0" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                        </SeriesItems>
                    </telerik:BoxPlotSeries>
                    <telerik:BoxPlotSeries Name="Median" Visible="false">
                        <Appearance>
                            <FillStyle BackgroundColor="Transparent" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:BoxPlotSeriesItem Mean="0" Median="12" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="0" Median="10" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="0" Median="13" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                        </SeriesItems>
                    </telerik:BoxPlotSeries>
                    <telerik:BoxPlotSeries Name="Mean and Median" Visible="false">
                        <Appearance>
                            <FillStyle BackgroundColor="Transparent" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:BoxPlotSeriesItem Mean="11" Median="12" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="15" Median="10" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="14" Median="13" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                        </SeriesItems>
                    </telerik:BoxPlotSeries>
                </Series>
                <YAxis>
                    <TitleAppearance Text="Number of Medals" />
                </YAxis>
                <XAxis>
                    <LabelsAppearance DataFormatString="Year {0}" />
                    <Items>
                        <telerik:AxisItem LabelText="2000" />
                        <telerik:AxisItem LabelText="2004" />
                        <telerik:AxisItem LabelText="2008" />
                    </Items>
                </XAxis>
            </PlotArea>
            <ChartTitle Text="Olympic Medals Per Country Over the Years">
            </ChartTitle>
            <Legend>
                <Appearance Position="Right" />
            </Legend>
        </telerik:RadHtmlChart>
Completed
Last Updated: 16 Sep 2020 16:53 by ADMIN
Release R3 2020
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
1
For the time being the property can be set through the chartObject. For example:
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
		</telerik:RadScriptManager>
		<script>
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				//DashType: dash, dashDot, dot, longDash, longDashDot, longDashDotDot, solid
				chart._chartObject.options.categoryAxis.majorGridLines.dashType = "dot";
				chart._chartObject.options.categoryAxis.minorGridLines.dashType = "dot";
				chart._chartObject.options.valueAxis.majorGridLines.dashType = "dot";
				chart._chartObject.options.valueAxis.minorGridLines.dashType = "dot";
				chart.repaint();
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="Series 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
				<XAxis>
					<Items>
						<telerik:AxisItem LabelText="item 1" />
						<telerik:AxisItem LabelText="item 2" />
						<telerik:AxisItem LabelText="item 3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
Completed
Last Updated: 05 Aug 2015 14:48 by Leandro Mussi Silva
ADMIN
Created by: Danail Vasilev
Comments: 3
Category: HtmlChart
Type: Feature Request
5
The property will be like similar to http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-categoryAxis.autoBaseUnitSteps.
For the time being the property can be set through the kendo widget:
ASPX:
		<script type="text/javascript">
			function pageLoad() {
				var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
				kendoWidget.options.categoryAxis.baseUnitStep = "auto";
				kendoWidget.options.categoryAxis.autoBaseUnitSteps = { months: [4] };
				kendoWidget.redraw();
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries DataFieldY="SellQuantity">
					</telerik:ColumnSeries>
				</Series>
				<XAxis DataLabelsField="SellDate" >
					<LabelsAppearance DataFormatString="MM/yyyy" RotationAngle="45"></LabelsAppearance>
				</XAxis>
			</PlotArea>
		</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, 01, 01));
		dt.Rows.Add(1, 2, new DateTime(2011, 06, 01));
		dt.Rows.Add(2, 5, new DateTime(2011, 12, 01));
		dt.Rows.Add(3, 6, new DateTime(2012, 06, 01));
		dt.Rows.Add(4, 4, new DateTime(2012, 09, 01));
		dt.Rows.Add(5, 7, new DateTime(2013, 03, 01));

		return dt;
	}
Completed
Last Updated: 28 Jul 2016 08:53 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
4
For the time being you can do that manually with an initially hidden panel that stores the text/image and display it only when there is no data in the chart. This can be done on the server-side as well as on the client-side. For example:

Server-side code:

ASPX:

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Skin="Black" Width="400px" Height="200px">
        </telerik:RadHtmlChart>
        <asp:Panel runat="server" Visible="false" ID="panelImage" Width="200" Height="200">
            <asp:Label ID="Label1" Text="There is not data in the chart" runat="server" />
            <asp:Image ID="image1" runat="server" ImageUrl="telerik_new-logo.png" Width="200" />
        </asp:Panel>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        BarSeries bar = new BarSeries();
        //CategorySeriesItem csi = new CategorySeriesItem() { Y = 10 };
        //bar.SeriesItems.Add(csi);

        RadHtmlChart1.PlotArea.Series.Add(bar);
        //If there isn't any items in the first series hide the chart and display the panel
        if ((RadHtmlChart1.PlotArea.Series[0] as BarSeries).SeriesItems.Count == 0)
        {
            RadHtmlChart1.Visible = false;
            panelImage.Visible = true;
        }
    }

Client-side code:

ASPX:

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Skin="Black" Width="400px" Height="200px">
        </telerik:RadHtmlChart>
        <asp:Panel runat="server" ID="panelImage" Width="200" Height="200" Style="display: none;">
            <asp:Label ID="Label1" Text="There is not data in the chart" runat="server" />
            <asp:Image ID="image1" runat="server" ImageUrl="telerik_new-logo.png" Width="200" />
        </asp:Panel>
        <script type="text/javascript">
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                //Hide the chart and display the panel when there is no data in the first series
                if (chart._chartObject.options.series[0].data.length == 0) {
                    chart.get_element().style.display = "none";
                    $get("<%=panelImage.ClientID%>").style.display = "block";
                }
            }
        </script>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        BarSeries bar = new BarSeries();
        //CategorySeriesItem csi = new CategorySeriesItem() { Y = 10 };
        //bar.SeriesItems.Add(csi);
        RadHtmlChart1.PlotArea.Series.Add(bar);
    }
Completed
Last Updated: 11 Aug 2023 09:08 by ADMIN
Release R3 2023
ADMIN
Created by: Danail Vasilev
Comments: 2
Category: HtmlChart
Type: Feature Request
5
For the time being the property can be set through the underlying Kendo Chart widget. For example:

		<script>
			function OnLoad(chart) {
				var widget = chart.get_kendoWidget();
				//also applies for the minor grid lines - replace majorGridLines with minorGridLines
				//Numeric series
				widget.options.xAxis.majorGridLines.step = 5;
				widget.options.yAxis.majorGridLines.step = 5;
				//Category series
				//widget.options.categoryAxis.majorGridLines.step = 5;
				//widget.options.valueAxis.majorGridLines.step = 5;
				widget.redraw();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400">
			<ClientEvents OnLoad="OnLoad" />
			<ChartTitle Text="Market Share Study">
			</ChartTitle>
			<PlotArea>
				<Appearance>
					<FillStyle BackgroundColor="White"></FillStyle>
				</Appearance>
				<XAxis MinValue="0" MaxValue="100" Step="10">
					<MinorGridLines Visible="false" />
				</XAxis>
				<YAxis MinValue="0" MaxValue="100" Step="10">
					<MinorGridLines Visible="false" />
				</YAxis>
				<Series>
					<telerik:BubbleSeries>
						<Appearance FillStyle-BackgroundColor="#6ab2c9">
						</Appearance>
						<TooltipsAppearance DataFormatString="Percentage of Market Share: {2}%<br /> Number of products: {0}<br /> Sales: ${1}" />
						<SeriesItems>
							<telerik:BubbleSeriesItem Size="3" X="5" Y="55" />
							<telerik:BubbleSeriesItem Size="12" X="14" Y="80" />
							<telerik:BubbleSeriesItem Size="33" X="20" Y="60" />
							<telerik:BubbleSeriesItem Size="10" X="18" Y="24" />
							<telerik:BubbleSeriesItem Size="42" X="22" Y="32" />
						</SeriesItems>
					</telerik:BubbleSeries>
				</Series>
			</PlotArea>
			<Legend>
				<Appearance Position="Right"></Appearance>
			</Legend>
		</telerik:RadHtmlChart>
Completed
Last Updated: 20 Apr 2022 16:11 by ADMIN
Width and height properties for the legend that will provide firm dimensions in pixels, so regardless of the series names' length, it will always have constant size.
You can set width and height through the kendo widget:
		<script>
			function pageLoad() {
				var chart = $find("<%=DonutChart.ClientID%>").get_kendoWidget();
				chart.options.legend.height = 80;
				chart.redraw();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="DonutChart" Width="500" Height="500" 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>
Completed
Last Updated: 28 Jul 2016 12:51 by ADMIN
Created by: Michael
Comments: 1
Category: HtmlChart
Type: Feature Request
2
Axes themselves do not have tooltips, only series do. Thus, tooltips cannot be added to the y-axis.
Add
Completed
Last Updated: 29 Apr 2022 14:24 by ADMIN
Release R2 2022
ADMIN
Created by: Danail Vasilev
Comments: 4
Category: HtmlChart
Type: Feature Request
6
The functionality is similar to the one in Kendo UI Chart (http://demos.telerik.com/kendo-ui/dataviz/line-charts/notes.html) :
http://dojo.telerik.com/OZuNU

For the time being you can try to utilize the kendo.drawing API in order to place the text on a particular position.  This forum may be helpful on the matter - http://www.telerik.com/forums/custom-drawing#sOkmYWbfrUW404Rr13eLDQ
Completed
Last Updated: 01 Aug 2016 10:24 by ADMIN
ADMIN
Created by: Telerik Admin
Comments: 2
Category: HtmlChart
Type: Feature Request
1
We are trying to convert a websites 11 year old controls from a different vendor to telerik.  All of the controls have been replaced except for the RadHtmlChart, which has limited customization of the legend.  Specifically we have the following issues:

1) The legend color squares are too small.  You can see the difference in the attachment "competitor" vs "telerik".  REQUEST: Set the size of the color squares.
2) The legend spacing between items is not customizable and is too compressed for our liking.  See "competitor" vs "telerik" to see the difference.  REQUEST: Allow padding or margin between legend items.
3) The legend size cannot be set to a fixed width.  For a left aligned legend, this results in multiple charts having inconsistent alignment.  Setting a different margin for each chart individually does not fix the problem.  Depending on the data fed to the charts, their position changes.  See the "multiple-charts" attachment for an example. REQUEST: Allow a fixed legend size so multiple charts can be aligned.
4) For left-aligned charts, the legend cannot be set to the top.  REQUEST: Allow TopLeft, TopRight options for legend alignment.

Thank you,
David A.
Completed
Last Updated: 15 Dec 2018 13:47 by ADMIN
There are two workarounds you can use in the meantime

- Use string representations of the dates instead of actual dates. In this manner you can bind the chart to strings and use a "regular" categorical axis and then the plot bands will work based on the index of the item. In such a case you will need to aggregate the data yourself before passing it to the chart.
- Using the Kendo Chart widget directly, and here is an example of using date objects and adding plot bands dynamically: https://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/dynamic-plot-bands

Here is also a basic example of fetching the Kendo Chart scripts through a hidden RadHtmlChart so that you can easily use the Kendo Chart widget

<script>
    var myData = [{
        "day": new Date("2014/01/01")
    }, {
        "day": new Date("2014/01/02")
    }, {
        "day": new Date("2014/01/31")
    }];
 
 
    function addPlotBand() {
        $ = $telerik.$;
 
        var start = new Date(2014, 0, 1 + Math.floor(Math.random() * 30));
        var end = new Date(start.getTime() + 1000 * 3600 * 24); // 24 hours after start
 
        var options = {};
 
        options["categoryAxis"] = {
            plotBands: [{
                from: start,
                to: end,
                color: "green"
            }]
        };
 
        $("#chart2").data("kendoChart").setOptions(options);
    }
 
    function pageLoad() {
        $ = $telerik.$;
        $("#chart2").kendoChart({
            dataSource: {
                data: myData
            },
            categoryAxis: {
                type: "date",
                field: "day"
            }
        });
    }
</script>
<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="addPlotBand" Text="add plotband" />
<div id="chart2"></div>
<telerik:RadHtmlChart runat="server" ID="chart" Style="visibility: hidden;">
    <PlotArea>
        <XAxis DataLabelsField="day">
        </XAxis>
    </PlotArea>
</telerik:RadHtmlChart>
Completed
Last Updated: 26 Feb 2015 17:01 by ADMIN
Created by: sairam
Comments: 2
Category: HtmlChart
Type: Feature Request
4
inkspace not suitable for radhtmlchart exporting.   Because inkspace does not work in windows server 2008 R2. So please provide direct exporting feature for radhtmlcharts.
Completed
Last Updated: 26 Feb 2015 13:26 by ADMIN
Created by: sairam
Comments: 2
Category: HtmlChart
Type: Feature Request
8
Please provide RadHtmlChart Export features
Completed
Last Updated: 19 Apr 2022 17:58 by ADMIN
Completed
Last Updated: 02 Mar 2022 13:29 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 3
Category: HtmlChart
Type: Feature Request
1
For the time being the property (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-legend.border) can be set through the chartObject. For example:
JavaScript:
	<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
		<script>
			function pageLoad() {
				var chart = $find("<%=PieChart1.ClientID%>");
				chart._chartObject.options.legend.border = { width: 2, color: "green", dashType: "longDashDotDot" }
				chart.repaint();
			}
		</script>
	</telerik:RadCodeBlock>
ASPX:
		<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="false" 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>
Completed
Last Updated: 16 Dec 2018 17:18 by ADMIN
So cool RadHtmlChart navigator should be able to be attached to non-stock layout charts, support multiple databound series and y-axis items other than financial data
Completed
Last Updated: 16 Sep 2020 16:40 by ADMIN
Release R3 2020
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
6
The functionality is currently exposed only by the x-axis of the sparkliens. It would be a good idea to be exposed by the other series types as well.

For the time being you can configure the cross hair through the kendo widget:
<script>
			function pageLoad() {
				$find('RadHtmlChart1').get_kendoWidget().setOptions({categoryAxis:{crosshair:{ color: "green", width: 2, visible: true}}});
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:LineSeries Name="Series 2">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="39" />
							<telerik:CategorySeriesItem Y="19" />
							<telerik:CategorySeriesItem Y="29" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
				<XAxis>
					<LabelsAppearance RotationAngle="33"></LabelsAppearance>
					<Items>
						<telerik:AxisItem LabelText="Item 1" />
						<telerik:AxisItem LabelText="Item 2" />
						<telerik:AxisItem LabelText="Item 3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
Completed
Last Updated: 26 Feb 2015 17:17 by Michael