Completed
Last Updated: 20 Jun 2020 17:08 by ADMIN
Created by: Doug
Comments: 1
Category: HtmlChart
Type: Bug Report
1
The XAxis.MajorGridLines of the chart YAxis are always visible as of 2020.1.114
 
Code to reproduce the issue:
<telerik:RadHtmlChart ID="RequestsMonthChart" runat="server" Height="500">
    <ClientEvents OnLoad="chartLoad" />
    <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 Name="Year" DataLabelsField="Month">
            <LabelsAppearance RotationAngle="-35" />
            <MajorGridLines Visible="false" />
            <MinorGridLines Visible="false" />
            <Items>
                <telerik:AxisItem LabelText="Item 1" />
                <telerik:AxisItem LabelText="Item 2" />
                <telerik:AxisItem LabelText="Item 3" />
            </Items>
        </XAxis>
        <YAxis>
            <MajorGridLines Visible="false" />
            <MinorGridLines Visible="false" />
        </YAxis>
    </PlotArea>
    <Legend>
        <Appearance Visible="true" Position="Bottom" Width="500" />
    </Legend>
    <ChartTitle Text="Requests Received by Month" />
</telerik:RadHtmlChart>
Unplanned
Last Updated: 04 Jun 2020 07:57 by ADMIN
Created by: Anil
Comments: 3
Category: HtmlChart
Type: Feature Request
4
Right now we do not have a way to show some tooltips over Axis Labels
This is useful when we have big names for Axis Labels, we can put some short cut names be default and then show full name over tool tip.

We can use Series tooltip, but it looks ugly for stacked series when you have 4 to 5 series
Under Review
Last Updated: 29 May 2020 14:51 by ADMIN
Created by: Scott
Comments: 1
Category: HtmlChart
Type: Feature Request
1

Label position dynamic. I'm currently using "InsideBase", but if those values are so small it's not very visible, so i'd like place those on the outside end.

Planned
Last Updated: 30 Apr 2020 08:22 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>
Planned
Last Updated: 30 Apr 2020 08:21 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
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>
Planned
Last Updated: 30 Apr 2020 08:20 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 6
Category: HtmlChart
Type: Feature Request
8
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>
Planned
Last Updated: 30 Apr 2020 08:17 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 3
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>

Planned
Last Updated: 30 Apr 2020 08:15 by ADMIN
Currently the available appearance options of the line in Area, Line and ScatterLine Series are width and background color. Expose additional option for changing the dash type(e.g. dash, dashDot, Dot, etc). For the time being the following workaround can be used:
		<script>
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				//DashType: dash, dashDot, dot, longDash, longDashDot, longDashDotDot, solid
				chart._chartObject.options.series[0].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: 15 Apr 2020 08:45 by ADMIN
Release R1 2020 SP1
Some HtmlChart appearance properties are not fully applied in R1 2020 (e.g. XAxis.MajorGridlines="false", ChartTitle.Appearance.TextStyle.Font, etc.)
 
Temporary workaround:
        <script>
            var datavizThemes = kendo.dataviz.ui.themes || {};
            Telerik.Web.UI.RadHtmlChart.prototype.applyTheme = function () {
                var that = this,
                 kendoWidget = that.get_kendoWidget(),
                 themeName = kendoWidget.options.theme,
                 theme = datavizThemes[themeName];
                if (theme && theme.chart) {
                    kendoWidget.setOptions(that._getTheme());
                }
            }
        </script>
Unplanned
Last Updated: 08 Apr 2020 15:28 by ADMIN

Hello, 

 

I would like to highlight a GridLine based on a Labelled item when I have implemented skip in the HTML Chart. 

 

Essentially, I have a series of days and would like to step the labels on a weekly basis. At each step I would like to highlight the GridLine associated with the label.

Unplanned
Last Updated: 31 Mar 2020 13:35 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 3
Category: HtmlChart
Type: Feature Request
11
Similar to the Scale Breaks functionality in RadChart - http://docs.telerik.com/devtools/aspnet-ajax/controls/chart/features/scale-breaks

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
Unplanned
Last Updated: 30 Jan 2020 13:35 by ADMIN
Created by: Fredrik
Comments: 0
Category: HtmlChart
Type: Feature Request
1
Add all ClientSettings to the values saved in the HtmlChart's ViewState.
Completed
Last Updated: 29 Jan 2020 15:02 by ADMIN
Unplanned
Last Updated: 28 Jan 2020 15:20 by ADMIN

We want the Kendo chart widget (RadHtmlChart actually) to blend in with the webpage we use it in. In this page, we use font-weight 300. Since there is no way to specify the font-weight in the chart, we have had to use a hack to specify it:

 

            function chartLoad(chart, args) {
                chart.get_kendoWidget().setOptions({ title: { font: "20px sans-serif; font-weight: 300" }});
            }

 

This is not only a clumpsy hack, but it also make use of a custom skin impossible (for setting the font).

Declined
Last Updated: 22 Jan 2020 16:31 by ADMIN
Created by: Satish
Comments: 1
Category: HtmlChart
Type: Feature Request
2
In RadHtmlChart there is no property to specify Width for Bar/Column series. It automatically calculates series width based on chart width, number of series, number of items within series, gap and spacing, etc.,
If there is more than one bar/column chart in single page, there is no way to show Bar/Column series of exact width in all chart to make page consistent.
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>
Unplanned
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.
Declined
Last Updated: 12 Aug 2019 12:16 by ADMIN
ADMIN
Created by: Stamo Gochev
Comments: 5
Category: HtmlChart
Type: Feature Request
5
Adding a control from the JDash suite to the page breaks 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>
1 2 3 4 5 6