Completed
Last Updated: 22 Jun 2016 11:41 by ADMIN
ADMIN
Created by: Marin Bratanov
Comments: 2
Category: HtmlChart
Type: Feature Request
1
The axis is numerical, but it could have a DataLabelsField property like the x-axis so text for each label is taken from the datasource (a label per datasource row). Then the numerical values (YValue) of each item can be rounded to the nearest integer and if that matches an axis item's index the series item will correspond to this axis item.
Completed
Last Updated: 04 Dec 2014 06:44 by Aurelien
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
1
For the time being the series can be stacked through the chartObject. For example:
	<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
		<script>
			function pageLoad() {
				var chart = $find("<%=LineChart.ClientID%>");
				chart._chartObject.options.seriesDefaults.stack = true;
				chart.repaint();
			}
		</script>
	</telerik:RadCodeBlock>
<telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true">
			<PlotArea>
				<Series>
					<telerik:LineSeries 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:LineSeries>
					<telerik:LineSeries 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:LineSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
Completed
Last Updated: 12 Feb 2016 14:41 by abigail
Created by: abigail
Comments: 2
Category: HtmlChart
Type: Feature Request
1
Hi! I don't know if could be a other type for the html chart control. I want a donut with only 2 series like a points in a exam for example 100/120 and the points 100 shows in the center of the donut, maybe I would like to change the 100 points with a image 
Completed
Last Updated: 26 Jul 2023 13:46 by ADMIN
Release R3 2023
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
Completed
Last Updated: 02 Mar 2022 13:27 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
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>
Completed
Last Updated: 10 Jun 2021 18:30 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
1
The chart's labels also look misaligned in rtl direction, so you can change only chart's direction to ltr with CSS:
	<style>
		.RadHtmlChart {
			direction: ltr;
		}
	</style>

		<div dir="rtl">
			some text
		<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>
				</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>
		</div>
Completed
Last Updated: 14 Jun 2021 10:36 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 2
Category: HtmlChart
Type: Feature Request
1
A visual example - http://i.stack.imgur.com/zRwlo.jpg

The feature will be useful for projects that need 508 compliance.

A boolean properties will also be useful: "EnabledTexturedFill", "EnableColorAndTexturedFill"
Completed
Last Updated: 15 Jun 2021 14:11 by ADMIN
Created by: Kasper
Comments: 1
Category: HtmlChart
Type: Feature Request
1
I would like to suggest ability to display data series in doughnut and pie charts, see attached example from Excel.

And thanks for a great Telerik experience, you make my development work very easy.
Completed
Last Updated: 05 Aug 2016 13:29 by ADMIN
Created by: Lee
Comments: 1
Category: HtmlChart
Type: Feature Request
1
Would be nice to be able to supply an image for the series background on bar and column charts, this would enable infographic style option to charts, i.e. displaying data for countries the bar series can be repeating national flags.

Completed
Last Updated: 12 Mar 2014 16:26 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
1
Similar to the SplineArea in RadChart: 
http://www.telerik.com/help/aspnet-ajax/chart-types-spline-area.html
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: 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: 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: 26 Feb 2015 17:28 by Fabian Raul Jofre
Created by: Fabian Raul Jofre
Comments: 0
Category: HtmlChart
Type: Feature Request
1
I know that does not support RADHTMLCHART Marked Zone. But somehow I need to make a mark, for example in the SeriesLine that Saturdays and Sundays this line with another color.
I leave a picture so you can understand.
I need the part or series values Y  Vier and Sab will be anothe color. for examples both series at orange color.

I thank you for the attention.
regards
Completed
Last Updated: 15 Feb 2014 10:19 by ADMIN
Currently BaseUnit property for DateAxes in RadHtmlChart accepts the following values - year, months, days, hours and minutes. Improve this property by adding seconds, weeks and auto.
Completed
Last Updated: 20 Feb 2015 17:30 by Prashant Nandha
ADMIN
Created by: Stamo Gochev
Comments: 1
Category: HtmlChart
Type: Feature Request
1
A good improvement in RadHtmlChart would be the introduction of Waterfall series.
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: 26 Feb 2015 17:30 by ADMIN
When an item's value is equal to zero in a Bar or Column series,, its labels is not shown.
Completed
Last Updated: 02 Mar 2022 12:11 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
1
For the time being the following workaround can be used:
JavaScript:
	<script>
		function pageLoad() {
			var pieChart = $find('<%=PieChart1.ClientID%>');
			pieChart._chartObject.options.seriesDefaults.labels.distance = 10;
			pieChart.repaint();
		}
	</script>
ASPX:
		<telerik:RadHtmlChart runat="server" ID="PieChart1" Width="300" Height="300">
			<PlotArea>
				<Series>
					<telerik:PieSeries>
						<SeriesItems>
							<telerik:PieSeriesItem Name="Item 1" Y="18.3"></telerik:PieSeriesItem>
							<telerik:PieSeriesItem Name="Item 2" Y="35.8"></telerik:PieSeriesItem>
							<telerik:PieSeriesItem Name="Item 3" Y="38.3"></telerik:PieSeriesItem>
						</SeriesItems>
					</telerik:PieSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
Completed
Last Updated: 17 Feb 2016 07:34 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
1
For the time being the following workaround can be used:    

Category Axis:

JavaScript:

  <script>
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                chart._chartObject.options.categoryAxis.labels.template = "Item: #=value#";
                chart.repaint();
            }
        </script>

ASPX:

       <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="series 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="30" />
                            <telerik:CategorySeriesItem Y="10" />
                            <telerik:CategorySeriesItem Y="25" />
                            <telerik:CategorySeriesItem Y="20" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="1" />
                        <telerik:AxisItem LabelText="2" />
                        <telerik:AxisItem LabelText="3" />
                        <telerik:AxisItem LabelText="4" />
                    </Items>
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>

Numeric Axis:
        <script>
            function changeValues(value) {
                var newValue;
                switch (value) {
                    case 1:
                        newValue = "AA";
                        break;
                    case 2:
                        newValue = "BB";
                        break;
                    case 3:
                        newValue = "CC";
                        break;
                    case 4:
                        newValue = "DD";
                        break;
                    default:
                        newValue = value;
                }
                return newValue;
            }
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                chart._chartObject.options.xAxis.labels.template = "#=changeValues(value)#";
                chart.repaint();
            }
        </script>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300">
            <PlotArea>
                <Series>
                    <telerik:ScatterLineSeries Name="series 1">
                        <SeriesItems>
                            <telerik:ScatterSeriesItem Y="30" X="1" />
                            <telerik:ScatterSeriesItem Y="10" X="2" />
                            <telerik:ScatterSeriesItem Y="25" X="3" />
                            <telerik:ScatterSeriesItem Y="20" X="4" />
                        </SeriesItems>
                    </telerik:ScatterLineSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>