Completed
Last Updated: 20 Feb 2015 17:29 by ADMIN
ADMIN
Created by: Stamo Gochev
Comments: 0
Category: HtmlChart
Type: Feature Request
1
The property will specify the client-side event handler that is executed when the RadHtmlChart is initialized on the client and will be called after chart's transitions' animation.
Completed
Last Updated: 09 Nov 2015 12:52 by Capital
When Series are created programmatically, Axes settings are not preserved after postback. The workaround is to create an empty series in the markup. For example:

        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
...
            <PlotArea>
                <YAxis>...</YAxis>
                <XAxis>...</XAxis>
                <Series>
                    <telerik:ScatterLineSeries Name=" ">
                        <Appearance FillStyle-BackgroundColor="Transparent"></Appearance>
                    </telerik:ScatterLineSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
Completed
Last Updated: 24 Dec 2014 13:22 by Bob
ADMIN
Created by: Stamo Gochev
Comments: 15
Category: HtmlChart
Type: Feature Request
17
Add the ability to click the legend's items in a similar way like the series 'items. For the time being the following workaround can be used:
JavaScript:
	<script>
		function pageLoad() {
			//Attach the legendItemClick event on pageLoad:
			var chart = $find("<%=RadHtmlChart1.ClientID%>")._chartObject.bind("legendItemClick", OnLegendClicked);
		}
                //The following function toggles the visibility of the clicked series from the legend
		function OnLegendClicked(e) {
			//Get a reference to the chart and the target axis
			var chart = e.sender;
			var targetAxisName = e.series.axis;
			var numValueAxes = chart.options.valueAxis.length;
			//Iterate through the y-axes and toggle the visibility of the axis that corresponds to the clicked series from the legend
			for (var i = 0; i < numValueAxes; i++) {
				var currValueAxisName = chart.options.valueAxis[i].name;
				if (currValueAxisName == targetAxisName) {
					chart.options.valueAxis[i].visible = !chart.options.valueAxis[i].visible;
				}
			}
		}
	</script>
ASPX:
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:LineSeries AxisName="axis1" Name="Series1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:LineSeries>
					<telerik:LineSeries AxisName="axis2" Name="Series2">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="3000" />
							<telerik:CategorySeriesItem Y="1000" />
							<telerik:CategorySeriesItem Y="2000" />
						</SeriesItems>
					</telerik:LineSeries>
					<telerik:LineSeries AxisName="axis2" Name="Series3">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="3500" />
							<telerik:CategorySeriesItem Y="1500" />
							<telerik:CategorySeriesItem Y="2500" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
				<YAxis Name="axis1" MinValue="0" MaxValue="30">
				</YAxis>
				<AdditionalYAxes>
					<telerik:AxisY Name="axis2" MinValue="900" MaxValue="3600"></telerik:AxisY>
				</AdditionalYAxes>
			</PlotArea>
		</telerik:RadHtmlChart>
Completed
Last Updated: 08 Apr 2014 16:05 by Saqib
Currently MinValue and MaxValue properties of the Axes accepts only decimal, so that when the axes are of date type, Min and Max dates cannot be set.

The workaround is to obtain the min and max values from the datasource field used for populating XAxis labels and set these values explicitly to the XAxis through the chartObject. For example:
<script type="text/javascript">
    function pageLoad() {
        //Get reference to the chart
        var chart = $find("<%=RadHtmlChart1.ClientID%>");
  
        //Obtain charts datasource
        var currDataSource = eval(chart.get_dataSourceJSON());
  
         //Get minValue for the datasource field used for populating XAxis Labels. In this example the field is named myDataSourceField
        var minValue = currDataSource[0].myDataSourceField;
  
        //Get maxValue for the datasource field used for populating XAxis Labels. In this example the field is named myDataSourceField
        var maxValue = currDataSource[currDataSource.length - 1].myDataSourceField;
  
        //Reference the chartObject's min and max properties
        chart._chartObject.options.xAxis.min = minValue;
        chart._chartObject.options.xAxis.max = maxValue;
  
        //Repaint the chart
        chart.repaint();
    }
</script>
Declined
Last Updated: 11 Jun 2021 10:02 by ADMIN
Created by: Vermaak
Comments: 1
Category: HtmlChart
Type: Feature Request
0
A couple of suggestions in one...

Please add interactivity between RadPivotGrid and HTMLChart similar to pivot charts in MS Excel - making the filters and selections. update both the chart and the pivot table.  It will also be helpful if you can add splicers similar to PowerPivot.

When you click on the chart, it opens a popup menu, relative to that area - where you can select to filter that axis or value in a series, change the aggregate calculation for that value (sum, count, average, etc.), change date ranges on a date axis - like, date range picker, by year, fiscal, quarter, week, etc. 

Thanks,

Vermaak
Completed
Last Updated: 11 Apr 2022 08:08 by ADMIN
Created by: msigman
Comments: 8
Category: HtmlChart
Type: Feature Request
14
When using custom shapes (circles, triangles, etc) in a RadHtmlChart, the custom shape should be displayed in the legend instead of always a square.  This is because when printing with a black & white printer, the colored squares won't help the reader read the chart, however the shapes would.
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: 16 Sep 2020 16:51 by ADMIN
Release R3 2020
ADMIN
Created by: Danail Vasilev
Comments: 4
Category: HtmlChart
Type: Feature Request
12
Currenlty Series like Bubble, Bar, Column, Donut, Pie and Candlestick do not expose any appearance properties for the Series border. Expose appearance border properties like width, dashtype, color and opacity.

Temporary workaround for managing the border appearance:
Javascript:
	<script language="javascript">
		function pageLoad() {
			var chart = $find("RadHtmlChart1");
			chart._chartObject.options.series[0].border = {
				width: 2,
				color: "black",
				dashType: "dash",
				opacity: 0.2
			}
			chart.repaint();
		}
	</script>

ASPX:
	<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>

Completed
Last Updated: 06 Jan 2020 16:53 by ADMIN
Release R1 2020
ADMIN
Created by: Stamo Gochev
Comments: 1
Category: HtmlChart
Type: Feature Request
12
A good improvement in the RadHtmlChart would be to add an Opacity property for the series, which would allow the control of its transparency. The property can be set through the chartObject:
JavaScript:
		<script>
			function pageLoad() {
				var chart = $find("<%=BubbleChart.ClientID%>");
				chart._chartObject.options.series[0].opacity = 0.3;
				chart.repaint();
			}
		</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="3" X="5" Y="5500" />
							<telerik:BubbleSeriesItem Size="12" X="14" Y="12200" />
							<telerik:BubbleSeriesItem Size="33" X="20" Y="39000" />
							<telerik:BubbleSeriesItem Size="10" X="18" Y="24400" />
							<telerik:BubbleSeriesItem Size="42" X="20" Y="32000" />
						</SeriesItems>
					</telerik:BubbleSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
Declined
Last Updated: 16 Jul 2019 12:46 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 12
Category: HtmlChart
Type: Feature Request
21
Similar to the RadChart's http://demos.telerik.com/aspnet-ajax/chart/examples/newfeatures/intelligentlabels/defaultcs.aspx For the time being you can implement a custom logic for offsetting y point positions of labels. For example offset every 2nd item label position:
       <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function pageLoad() {
				offsetItemLabels();
			}
			function offsetItemLabels() {
				//Find all text elements on the page
				var textElements = document.getElementsByTagName("text");
				var numSeriesItemLabels = 0;
				//Iterate through the text elements
				for (var i = 0; i < textElements.length; i++) {
					var currTextEl = textElements[i];
					//Set the desired string/symbol that represents the series labels
					var SeriesLabelSymbol = "@SL";
					if (currTextEl.textContent.indexOf(SeriesLabelSymbol) != -1) {
						numSeriesItemLabels++;
						var currText = currTextEl.textContent.split(SeriesLabelSymbol);
						//Offset y point for every 2nd item label
						currTextEl.textContent = currText[1];
						if ((numSeriesItemLabels) % 2 == 0) {
							currTextEl.attributes.y.textContent = currTextEl.attributes.y.textContent * 1 + 35;
						}
					}
				}
			}
		</script>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
            <ChartTitle Text="Chart title">
            </ChartTitle>
            <PlotArea>
                <Series>
                    <telerik:LineSeries Name="Series 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="18" />
                            <telerik:CategorySeriesItem Y="18" />
                            <telerik:CategorySeriesItem Y="18" />
                            <telerik:CategorySeriesItem Y="18" />
                        </SeriesItems>
                        <LabelsAppearance>
                            <ClientTemplate>
@SLCategory is #=category# Value is: #=value#
                            </ClientTemplate>
                        </LabelsAppearance>
                    </telerik:LineSeries>
                </Series>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="item 1" />
                        <telerik:AxisItem LabelText="item 2" />
                        <telerik:AxisItem LabelText="item 3" />
                        <telerik:AxisItem LabelText="item 4" />
                    </Items>
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>
Completed
Last Updated: 15 Oct 2013 07:20 by Harin Yadav
Stacking of bar and column series should allow grouping. This could be done by making the Stacked property not a boolean, but a string to denote the group name.
Completed
Last Updated: 15 May 2013 09:31 by ADMIN
In a chart that has stacked bar series and a line series the bar series become column series when the chart is data-bound.

The solution is to declare the BarSeries above the LineSeries as follows:
            <%--BarSeries are declared above the LineSeries--%>
            <telerik:BarSeries Name="B1">
                <Items>
                    <telerik:SeriesItem YValue="10" />
                    <telerik:SeriesItem YValue="20" />
                    <telerik:SeriesItem YValue="30" />
                </Items>
            </telerik:BarSeries>
            <%--LineSeries are declared below the BarSeries--%>
            <telerik:LineSeries Name="L1">
                <Items>
                    <telerik:SeriesItem YValue="15" />
                    <telerik:SeriesItem YValue="10" />
                    <telerik:SeriesItem YValue="20" />
                </Items>
            </telerik:LineSeries>
Completed
Last Updated: 22 Dec 2015 17:20 by Ali
This can be done by exposing a spacing property for the particular Series. 

For the time being mentioned properties can be set on the client through the chartObject of the RadHtmlChart:
JavaScript:
	<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
		<script type="text/javascript">
			function ChangeSpace() {
				var chart = $find("<%=ColumnChart.ClientID%>");
				chart._chartObject.options.series[0].spacing = 0.9;
				chart.repaint();
			}

			function ChangeGap() {
				var chart = $find("<%=ColumnChart.ClientID%>");
				chart._chartObject.options.series[0].gap = 10;
				chart.repaint();
			}
		</script>
	</telerik:RadCodeBlock>
ASPX:
		<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="Change Space" OnClientClicked="ChangeSpace" />
		<telerik:RadButton ID="RadButton2" runat="server" AutoPostBack="false" Text="Change Gap" OnClientClicked="ChangeGap" />
		<telerik:RadHtmlChart runat="server" ID="ColumnChart" Transitions="true">
....
		</telerik:RadHtmlChart>
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>
Declined
Last Updated: 28 Jul 2014 12:15 by Phil
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
3
Currently the appearance of the Series border cannot be controlled. Add the ability to change its width, color and dashtype.

Declined with the following reason: Item is duplicate of http://feedback.telerik.com/Project/108/Feedback/Details/50612
Unplanned
Last Updated: 13 Jul 2016 08:28 by John McFadden
Currently the default pivot point for rotating the labels on the XAxis is the center of the label itself. Add the ability to change the pivot point to be the first symbol of the label.
For the time being the property can be set via the kendo object (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.labels.rotation.align):
		<script>
			function load(chart) {
				var align = "end"; //"center"
					chart.get_kendoWidget().setOptions({ categoryAxis: { labels: { rotation: { angle:45, align: align } } } });
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<ClientEvents OnLoad="load" />
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series 1">
						<Appearance></Appearance>
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<LabelsAppearance></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: 22 Feb 2019 15:14 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 6
Category: HtmlChart
Type: Feature Request
22
As of R1 2017 you can use the stackTotal property of the labels:
https://docs.telerik.com/kendo-ui/controls/charts/how-to/various/show-stack-total

---
old information

For the time being this can be achieved by creating an additional bar/column series with the following settings:

-series items are set with insignificantly small values (e.g. 0.001)

-the name property of the series is not specified, so that it is not visible in the legend

-the color of the series matches the color of the plot area, so that the series items and the legend of the series are not visible

-clienttemplates for the labels of this series is used in order to sum up the grand total and display it

An example on the described scenario can be found in the http://www.telerik.com/support/kb/aspnet-ajax/chart-%28html5%29/details/displaying-grand-total-in-stacked-series-labels-and-pie-series-legend KB article
Completed
Last Updated: 01 Sep 2015 11:14 by Eirik H
ADMIN
Created by: Danail Vasilev
Comments: 2
Category: HtmlChart
Type: Feature Request
15
Currently BarSeries/ColumnSeries are rendered like a "glass" gradient and PieSeries/DonutSeries like a "roundedBevel" gradient. Expose an OverlayGradient property that lets you control the gradient (e.g. "glass", "roundedBevel", "sharpBevel", "none"). For the time being the properties can be set through the chartObject:
JavaScript:
	<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
		<script>
			function pageLoad() {
				var chart1 = $find("<%=ColumnChart1.ClientID%>");
				//Set glass gradient to first series
				chart1._chartObject.options.series[0].overlay = { gradient: "glass" };
				//Remove gradient from second series
				chart1._chartObject.options.series[1].overlay = { gradient: "none" };
				chart1.repaint();

				var chart2 = $find("<%=PieChart1.ClientID%>");
				//Set sharpBevel gradient to pie series
				chart2._chartObject.options.series[0].overlay = { gradient: "sharpBevel" };
				chart2.repaint();
			}
		</script>
	</telerik:RadCodeBlock>
ASPX:
		<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Transitions="true">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series with Gradient">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15000" />
							<telerik:CategorySeriesItem Y="23000" />
							<telerik:CategorySeriesItem Y="10000" />
							<telerik:CategorySeriesItem Y="16000" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:ColumnSeries Name="Series with no Gradient">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="35000" />
							<telerik:CategorySeriesItem Y="10000" />
							<telerik:CategorySeriesItem Y="20000" />
							<telerik:CategorySeriesItem Y="17000" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
		<telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="450px" Height="450px">
			<PlotArea>
				<Series>
					<telerik:PieSeries StartAngle="90">
						<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="Pie with Gradient">
			</ChartTitle>
		</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: 07 Jun 2013 05:36 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
2
Currently the Hay skin sets white color for the  title, axes labels and legend in RadHtmlChart.
For the time being the color of the mentioned elements can be changed through the TextStyle property - http://www.telerik.com/help/aspnet-ajax/htmlchart-appearance-labels-titles-font-settings.html.