Unplanned
Last Updated: 11 Mar 2015 11:28 by Eirik H
ADMIN
Created by: Danail Vasilev
Comments: 5
Category: HtmlChart
Type: Feature Request
11

			
Completed
Last Updated: 31 Jan 2018 15:18 by Dane
For example by exposing an additional width property.
Completed
Last Updated: 16 Sep 2020 16:55 by ADMIN
Release R3 2020
ADMIN
Created by: Danail Vasilev
Comments: 7
Category: HtmlChart
Type: Feature Request
9
For the time being you can use the following workaround:
		<script>
			function OnLoad(sender, args) {
				var kendoWidget = $find('<%=RadHtmlChart1.ClientID%>').get_kendoWidget();
				kendoWidget.options.legend.reverse = true;
				kendoWidget.redraw();
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<ClientEvents OnLoad="OnLoad" />
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:ColumnSeries Name="Series 2">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="2" />
							<telerik:CategorySeriesItem Y="5" />
							<telerik:CategorySeriesItem Y="7" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:ColumnSeries Name="Series 3">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="9" />
							<telerik:CategorySeriesItem Y="11" />
							<telerik:CategorySeriesItem Y="13" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</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 13:26 by ADMIN
Created by: sairam
Comments: 2
Category: HtmlChart
Type: Feature Request
8
Please provide RadHtmlChart Export features
Declined
Last Updated: 19 Mar 2019 14:14 by ADMIN
Created by: msigman
Comments: 2
Category: HtmlChart
Type: Feature Request
7
When viewing a line chart with multiple series, the RadHtmlChart automatically changes shapes for each series to make it easy to distinguish, however the shapes are not carried over to the legend.  This means a user printing on a black & white printer will have no way to distinguish the different series (since the shapes are not in the legend).
Unplanned
Last Updated: 01 May 2019 13:59 by ADMIN
For the time being the DateTime object can be set to the AxisCrossingPoint on the client. For example:

ASPX:

		<script>
			function OnLoadHandler(sender, args) {
				var kendoChart = sender.get_kendoWidget();
				var opts = kendoChart.options;
				opts.categoryAxis.axisCrossingValues = [0, new Date("2014, 11, 05, 19:15:00")];
				kendoChart.setOptions(opts);
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<ClientEvents OnLoad="OnLoadHandler" />
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="Product 1" DataFieldY="SellQuantity">
					</telerik:LineSeries>
				</Series>
				<XAxis DataLabelsField="SellDate" BaseUnit="Minutes">
					<LabelsAppearance Step="15"></LabelsAppearance>
					<MinorGridLines Visible="false" />
					<AxisCrossingPoints>
						<telerik:AxisCrossingPoint Value="10" />
					</AxisCrossingPoints>
				</XAxis>
				<AdditionalYAxes>
					<telerik:AxisY></telerik:AxisY>
				</AdditionalYAxes>
			</PlotArea>
			<ChartTitle Text="LineSeries"></ChartTitle>
		</telerik:RadHtmlChart>


C#:
	protected void Page_Load(object sender, EventArgs e)
	{
		if (!Page.IsPostBack)
		{
			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(2014, 11, 05, 18, 22, 22));
		dt.Rows.Add(2, 5, new DateTime(2014, 11, 05, 18, 56, 22));
		dt.Rows.Add(3, 6, new DateTime(2014, 11, 05, 19, 14, 22));
		dt.Rows.Add(4, 4, new DateTime(2014, 11, 05, 19, 48, 22));
		dt.Rows.Add(5, 7, new DateTime(2014, 11, 05, 20, 12, 22));

		return dt;
	}
Completed
Last Updated: 17 Jul 2014 10:22 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 6
Category: HtmlChart
Type: Feature Request
7
Similar to the feature in RadChart - http://demos.telerik.com/aspnet-ajax/chart/examples/newfeatures/logarithmicaxis/defaultcs.aspx. 
For the time being the following workaround can be used:
ASPX:
		<script>
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				chart._chartObject.options.valueAxis.type = "log";
				chart.repaint();
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
			<PlotArea>
				<YAxis></YAxis>
				<Series>
					<telerik:ColumnSeries>
					</telerik:ColumnSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
C#:
	protected void Page_Load(object sender, EventArgs e)
	{
		double[] yValues = new double[] { 0.01, 0.05, 0.11, 2, 2.5, 10, 30 };
		for (int i = 0; i < yValues.Length; i++)
		{
			CategorySeriesItem csi1 = new CategorySeriesItem() { Y = (decimal)yValues[i] };
			(RadHtmlChart1.PlotArea.Series[0] as ColumnSeries).SeriesItems.Add(csi1);
		}
	} 
Completed
Last Updated: 05 Mar 2014 13:40 by ADMIN
The property for each series could be RenderInPlotArea=true|false
It will control whether the series will be rendered in the plot area, if set to false the series name will still be present in the legend, but grayed out, as if the end user has clicked it already to hide the series in the browser. This will give the developer programmatic contol over the initial state of the chart that the end user can modify later.
For the time being the following workaround can be used:
JavaScript:
	<script>
		function pageLoad() {
			var chart = $find("<%=RadHtmlChart1.ClientID%>");
			chart._chartObject.options.series[0].visible = false;
			chart.repaint();
		}
	</script>
ASPX:
		<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:ColumnSeries Name="Series 2">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="5" />
							<telerik:CategorySeriesItem Y="12" />
							<telerik:CategorySeriesItem Y="8" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
Completed
Last Updated: 18 Feb 2018 07:18 by Kasim
ADMIN
Created by: Danail Vasilev
Comments: 3
Category: HtmlChart
Type: Feature Request
7
Currently ClientTemplates are exposed only for the Series labels and tooltips. Improving this functionality will let you feed data for the legend from more than one column of the datasource as well as to format numbers and dates in the legend. The benefit will be essential for Pie and Donut series.

For the time being the following workaround can be used:
JavaScript:

    <script>
        function pageLoad() {
            var chart = $find("<%=RadHtmlChart1.ClientID%>");
            chart._chartObject.options.legend.labels.template = "#=kendo.format(\'{0:d}\',dataItem.SellDate)#";
            chart.repaint();
        }
    </script>

ASPX:

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
            <PlotArea>
                <Series>
                    <telerik:PieSeries DataFieldY="SellQuantity" NameField="SellDate">
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
Completed
Last Updated: 31 Mar 2020 12:14 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 2
Category: HtmlChart
Type: Feature Request
7
For the time being you can use a JavaScript function inside the template to cut the labels - http://docs.telerik.com/kendo-ui/dataviz/chart/how-to/shorten-chart-labels
Completed
Last Updated: 23 Oct 2020 09:35 by ADMIN
For the time being the property can be set on the client through the chartObject. For example:
JavaScript:
	<script>
		function pageLoad() {
			var chart = $find("<%=RadHtmlChart1.ClientID%>");
			chart._chartObject.options.series[0].highlight = {
				markers: {
					visible: true
				}
			}
			chart.repaint();
		}
	</script>
ASPX:
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<PlotArea>
				<Series>
					<telerik:LineSeries>
						<MarkersAppearance Visible="false" />
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
							<telerik:CategorySeriesItem Y="15" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
Completed
Last Updated: 04 Dec 2014 06:44 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
6
For the time being series can be stacked through the chartObject. For example:
JavaScript:
	<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
		<script>
			function pageLoad() {
				var chart = $find("<%=AreaChart.ClientID%>");
				chart._chartObject.options.seriesDefaults.stack = true;
				chart.repaint();
			}
		</script>
	</telerik:RadCodeBlock>
ASPX:
	<telerik:RadHtmlChart runat="server" ID="AreaChart" Width="800" Height="500" Transitions="true">
			<PlotArea>
				<Series>
					<telerik:AreaSeries Name="Sales" MissingValues="Gap">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="400" />
							<telerik:CategorySeriesItem Y="500" />
							<telerik:CategorySeriesItem Y="720" />
							<telerik:CategorySeriesItem Y="1300" />
							<telerik:CategorySeriesItem Y="450" />
							<telerik:CategorySeriesItem Y="800" />
							<telerik:CategorySeriesItem Y="900" />
						</SeriesItems>
					</telerik:AreaSeries>
					<telerik:AreaSeries Name="Expenses" MissingValues="Gap">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="700" />
							<telerik:CategorySeriesItem Y="900" />
							<telerik:CategorySeriesItem Y="420" />
							<telerik:CategorySeriesItem Y="1100" />
							<telerik:CategorySeriesItem Y="650" />
							<telerik:CategorySeriesItem Y="600" />
							<telerik:CategorySeriesItem Y="700" />
						</SeriesItems>
					</telerik:AreaSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
Completed
Last Updated: 19 Apr 2022 17:20 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 3
Category: HtmlChart
Type: Feature Request
6
Currently tooltips expose properties for changing the background color, format and visibility. Add more appearance options like color (Color property is already exposed), font, border width, border color and padding. For the time being the following workaround can be used:
	<style type="text/css">
		.k-tooltip
		{
			/*Sets border width and color*/
			border-width: 5px !important;
			border-color: Green !important;
			/*Sets padding*/
			padding-left: 5px !important;
			padding-right: 5px !important;
			/*Sets FontSize, FontFamily and color*/
			font: 15px Arial,Helvetica,sans-serif !important;
			color: Red !important;
		}
	</style>
Completed
Last Updated: 13 Feb 2014 12:21 by Peter
Created by: Andreas
Comments: 1
Category: HtmlChart
Type: Feature Request
6
When making business web applications, it is really useful with Funnel charts.
This type is used a lot when making sales funnels!
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: 19 Jan 2016 12:03 by ADMIN
The property indicates whether the series name will be visible in the legend. For the time being the following workaround can be used:

JavaScript:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script>
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                chart.get_kendoWidget().options.series[0].visibleInLegend = false;
                chart.get_kendoWidget().options.series[1].visibleInLegend = true;
                chart.repaint();
            }
        </script>
    </telerik:RadCodeBlock>

ASPX:

        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Series 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="1" />
                            <telerik:CategorySeriesItem Y="2" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Series 2">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="3" />
                            <telerik:CategorySeriesItem Y="4" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
Unplanned
Last Updated: 21 Jul 2016 15:17 by ADMIN
ADMIN
Created by: Stamo Gochev
Comments: 0
Category: HtmlChart
Type: Feature Request
6
A nice improvement in RadHtmlChart will be the ability to control the speed of chart's transitions.
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
Unplanned
Last Updated: 18 Dec 2017 13:52 by ADMIN
The feature should be like the one in KendoUI' https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.aggregate
For the time being it can be set through the chartObject:
ASPX:
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script type="text/ecmascript">
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				chart._chartObject.options.series[0].aggregate = "sum";
				chart.repaint();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
			<PlotArea>
				<Series>
					<telerik:LineSeries DataFieldY="SellQuantity">
					</telerik:LineSeries>
				</Series>
				<XAxis BaseUnit="months" DataLabelsField="SellDate">
					<LabelsAppearance DataFormatString="d">
					</LabelsAppearance>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
C#:
        using System.Data;
	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(2012, 06, 12));
		dt.Rows.Add(2, 5, new DateTime(2012, 06, 13));
		dt.Rows.Add(3, 6, new DateTime(2012, 06, 17));
		dt.Rows.Add(4, 4, new DateTime(2012, 07, 18));
		dt.Rows.Add(5, 7, new DateTime(2012, 07, 20));

		return dt;
	}
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>