Completed
Last Updated: 27 Feb 2024 11:47 by Atanas2
Release R3 2023
The contrast between the colors for the background and the text in the Tooltip of the Chart series is very low (dark background and black text). https://www.screencast.com/t/fhx6937j

The problem is most obvious in the Outlook, Simple, Web20 and Sunset skins. 

Workaround would be  setting the Color property for the ToolTipAppearance to White

Declined
Last Updated: 31 Aug 2022 12:33 by ADMIN

Test Environment:

OS: Windows_11
Version: 21H2
OS Build: 22000.795

Browser: Version 103.0.1264.71 (Official Build) (64-bit)

Voice access: Voice Access

Repro Steps:

1. Open URL: https://docs.telerik.com/devtools/aspnet-ajax/controls/chart/understanding-radchart-types/bar-charts page in Edge Browser.

2. Navigate the Graph under the Bar chart section.

3. Observe that Voice Access Numbers are not showing for bar graphs in reports.

Actual Results:

Voice Access Numbers are not showing for bar graphs.

Expected Results:

Voice Access Numbers should be showing for bar graphs.

Declined
Last Updated: 22 Jun 2022 11:53 by ADMIN
Created by: Phil
Comments: 1
Category: HtmlChart
Type: Bug Report
0
Under the standard definition of data format strings, range scaling can be applied (i.e. divide by 1000) using , prefixing the implied or explicit decimal place.
e.g. DataFormatString="{0:#,#,}" will display 3000000 as 3,000

This works on RadPivotGrid correctly, but RadHTMLChart does not work either on data labels, axis labels, or pretty much anywhere else. Apparently a problem with kendo.format(), which does not do this as per documentation for DataFormatString

N.B. This is commonly used in finance presentations to globally present in $thousands.
Completed
Last Updated: 22 Jun 2022 11:10 by ADMIN
ADMIN
Created by: Slav
Comments: 0
Category: HtmlChart
Type: Bug Report
0
When you configure RadHtmlChart's YAxis with NarrowRange set to true, the setting is not serialized and as a result, not applied.
You can avoid it by setting the narrowRange on the client-side:

		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="250px" Height="300px">
			<ClientEvents OnLoad="chartLoad" />
			...
		</telerik:RadHtmlChart>
		<script>
			function chartLoad(){
				var chart = $telerik.$("#RadHtmlChart1").data("kendoChart");
				chart.options.valueAxis.narrowRange = true;
			}
		</script>
Declined
Last Updated: 22 Jun 2022 10:51 by ADMIN
Completed
Last Updated: 22 Jun 2022 10:50 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
0

			
Completed
Last Updated: 22 Jun 2022 10:19 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
1
 Workaround use padding instead of margin:
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"  Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15000" />
							<telerik:CategorySeriesItem Y="-4000" />
							<telerik:CategorySeriesItem Y="10000" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<LabelsAppearance RotationAngle="45">
						<TextStyle Padding="135 0 0 0" />
					</LabelsAppearance>
					<Items>
						<telerik:AxisItem LabelText="item1" />
						<telerik:AxisItem LabelText="item2" />
						<telerik:AxisItem LabelText="item3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
Declined
Last Updated: 22 Jun 2022 09:48 by ADMIN
Completed
Last Updated: 20 Jun 2022 14:56 by ADMIN
Completed
Last Updated: 22 Feb 2022 14:46 by ADMIN
Unplanned
Last Updated: 12 Oct 2021 15:58 by ADMIN
Created by: Bob
Comments: 0
Category: HtmlChart
Type: Bug Report
1

The charts starts to perform zooming when the user pans with one finger in touch devices.

Steps to reproduce:

1. Open the following demo in a touch device (or Chrome simulator)

    https://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/pan-zoom/defaultcs.aspx

2. Start panning until the zooming issue occurs

 

Video: http://somup.com/cr6lo73b73 

Completed
Last Updated: 14 Sep 2021 10:17 by ADMIN
Release Q1 2015
Created by: Sean
Comments: 0
Category: HtmlChart
Type: Bug Report
0
I have a stacked bar RadHtmlChart that is created programmatically in the code behind.
When I create the chart, and set the width to Unit.Pixel(1500), it works fine, as shown in Working.png. However, when I change the value to Unit.Percentage(90), the chart is not rendered properly at all.

Any fixes/workarounds for this?

Seán


For the time being you must set percentage to the chart's wrapper. For example:
CSS:
	<style type="text/css">
		html, body, form {
			padding: 0;
			margin: 0;
			height: 100%;
			overflow: hidden;
		}

		.myChart {
			width: 100% !important;
			height: 100% !important;
		}
	</style>
ASPX:
		<div style="width: 30%; height: 40%; border: 1px solid green;">
			<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" CssClass="myChart" Width="600px" Height="400px">
				<PlotArea>
					<Series>
						<telerik:ColumnSeries Name="Product 1">
							<SeriesItems>
								<telerik:CategorySeriesItem Y="15000" />
								<telerik:CategorySeriesItem Y="23000" />
								<telerik:CategorySeriesItem Y="10000" />
							</SeriesItems>
						</telerik:ColumnSeries>
					</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>
		</div>
Completed
Last Updated: 13 Sep 2021 17:04 by ADMIN
Created by: A
Comments: 1
Category: HtmlChart
Type: Bug Report
1

Problem appers with x-axis if you try to zoom. 

Chart without zoom: https://drive.google.com/file/d/1Nem_NctJN5WtzypS8JgZTtIuAARGFQbd/view?usp=sharing

Chart with some zoom: https://drive.google.com/file/d/1TRJZX3FI52YXyuWgB_kpkMTWWXKecVC_/view?usp=sharing

Project included.

Completed
Last Updated: 10 Aug 2021 15:24 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Bug Report
0
For the time being you can resize the chart with set_width/set_height methods. For example:

<head runat="server">
	<title></title>
	<style>
		.RadHtmlChart.k-chart, table {
			width: 100%;
			height: 100%;
		}

		td {
			border: 1px solid green;
			width: 60%;
			height: 60%;
			overflow:hidden;
		}

		html, body, form {
			height: 100%;
			overflow: hidden;
			margin: 0;
		}
	</style>
</head>
<body>
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function resizedw() {
				// Haven't resized in 100ms!
				var donut = $find("<%=DonutChart.ClientID%>");
				var radar = $find("<%=RadarAreaChart.ClientID%>");

				var docDimensions = $telerik.getBounds(document.body);
				resizeChart(donut, docDimensions);
				resizeChart(radar, docDimensions);
			}

			function resizeChart(chart, docDimensions) {
				var chartDimensions = $telerik.getBounds(chart.get_element().parentElement);
				chart.set_width("'" + (chartDimensions.width / docDimensions.width) + "%'");
				chart.set_height(("'" + chartDimensions.height / docDimensions.height) + "'%");
			}

			var doit;
			window.onresize = function () {
				clearTimeout(doit);
				doit = setTimeout(resizedw, 1000);
			};
		</script>
		<table>
			<tr>
				<td>
					<telerik:RadHtmlChart runat="server" ID="DonutChart" Width="100%" Height="100%" 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>
				</td>
				<td>
					<telerik:RadHtmlChart runat="server" ID="RadarAreaChart" Width="100%" Height="100%" Transitions="true">
						<PlotArea>
							<Series>
								<telerik:RadarAreaSeries Name="Position" MissingValues="Gap">
									<Appearance>
										<FillStyle BackgroundColor="#00adcc"></FillStyle>
									</Appearance>
									<LineAppearance Width="1" />
									<MarkersAppearance Visible="false" />
									<LabelsAppearance Visible="false"></LabelsAppearance>
									<SeriesItems>
										<telerik:CategorySeriesItem Y="159"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="170"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="100"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="140"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="160"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="103"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="173"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="107"></telerik:CategorySeriesItem>
									</SeriesItems>
								</telerik:RadarAreaSeries>
								<telerik:RadarAreaSeries Name="Person" MissingValues="Gap">
									<Appearance>
										<FillStyle BackgroundColor="red"></FillStyle>
									</Appearance>
									<LabelsAppearance Visible="false">
									</LabelsAppearance>
									<LineAppearance Width="1" />
									<MarkersAppearance Visible="false"></MarkersAppearance>
									<SeriesItems>
										<telerik:CategorySeriesItem Y="130"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="160"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="130"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="168"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="150"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="140"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="109"></telerik:CategorySeriesItem>
										<telerik:CategorySeriesItem Y="76"></telerik:CategorySeriesItem>
									</SeriesItems>
								</telerik:RadarAreaSeries>
							</Series>
							<XAxis Color="Black" Reversed="false" StartAngle="180">
								<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
								<MinorGridLines Visible="false"></MinorGridLines>
								<Items>
									<telerik:AxisItem LabelText="Soft Skills"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Sector knowledge"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Finance knowledge"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Work experience"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Win7 skills"></telerik:AxisItem>
									<telerik:AxisItem LabelText="MS Office skills"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Programming skills"></telerik:AxisItem>
									<telerik:AxisItem LabelText="Database skills"></telerik:AxisItem>
								</Items>
							</XAxis>
							<YAxis Visible="false">
								<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
								<MinorGridLines Visible="false"></MinorGridLines>
								<LabelsAppearance Step="1"></LabelsAppearance>
							</YAxis>
							<CommonTooltipsAppearance Color="White"></CommonTooltipsAppearance>
						</PlotArea>
						<ChartTitle Text="Position Profile">
							<Appearance Align="Center" BackgroundColor="White" Position="Top">
							</Appearance>
						</ChartTitle>
						<Legend>
							<Appearance BackgroundColor="White" Position="Bottom">
							</Appearance>
						</Legend>
					</telerik:RadHtmlChart>
				</td>
			</tr>
		</table>
	</form>
Completed
Last Updated: 10 Aug 2021 15:24 by ADMIN
For the time being you can use the following workaround:

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <script>
            function pageLoad() {
                var position = 'insideEnd'; // 'center'
                $find("<%=PieChart1.ClientID%>")._chartObject.options.series[0].labels.position = position;
                $find("<%=PieChart1.ClientID%>")._chartObject.options.series[0].labels.distance = -20;
                $find("<%=PieChart1.ClientID%>")._chartObject.redraw();
            }
        </script>
        <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true">
            <PlotArea>
                <Series>
                    <telerik:PieSeries StartAngle="90">
                        <LabelsAppearance DataFormatString="{0} %" />
                        <TooltipsAppearance DataFormatString="{0} %" />
                        <Items>
                            <telerik:SeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" YValue="18.3" />
                            <telerik:SeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" YValue="35.8" />
                            <telerik:SeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" YValue="38.3" />
                            <telerik:SeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" YValue="4.5" />
                            <telerik:SeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" YValue="2.3" />
                        </Items>
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
            <ChartTitle Text="Browser Usage for April 2012">
            </ChartTitle>
        </telerik:RadHtmlChart>
        <script>
            var INSIDE_END = "insideEnd",
                CENTER = "center",
                LEFT = "left",
                RIGHT = "right",
                dataviz = kendo.dataviz,
                Box2D = dataviz.Box2D,
                math = Math;

            kendo.dataviz.PieSegment.fn.reflowLabel = function () {
                var segment = this,
                    sector = segment.sector.clone(),
                    options = segment.options,
                    label = segment.label,
                    labelsOptions = options.labels,
                    labelsDistance = labelsOptions.distance,
                    angle = sector.middle(),
                    lp, x1, labelWidth, labelHeight;

                if (label) {
                    labelHeight = label.box.height();
                    labelWidth = label.box.width();
                    if (labelsOptions.position == CENTER) {
                        sector.r = math.abs((sector.r - labelHeight) / 2) + labelHeight + labelsDistance;
                        lp = sector.point(angle);
                        label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y));
                    } else if (labelsOptions.position == INSIDE_END) {
                        sector.r = sector.r - labelHeight / 2 + labelsDistance;
                        lp = sector.point(angle);
                        label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y));
                    } else {
                        lp = sector.clone().expand(labelsDistance).point(angle);
                        if (lp.x >= sector.c.x) {
                            x1 = lp.x + labelWidth;
                            label.orientation = RIGHT;
                        } else {
                            x1 = lp.x - labelWidth;
                            label.orientation = LEFT;
                        }
                        label.reflow(Box2D(x1, lp.y - labelHeight, lp.x, lp.y));
                    }
                }
            }
        </script>
Completed
Last Updated: 11 Jun 2021 12:01 by ADMIN
Created by: Phil
Comments: 4
Category: HtmlChart
Type: Bug Report
2
When you do a stacked HTMLChart (e.g. columns), the legend appears in the opposite order to the data series being stacked, which looks very unprofessional.
Completed
Last Updated: 30 Nov 2020 15:07 by ADMIN
Created by: Société CompuGROUP Medical Solutions
Comments: 1
Category: HtmlChart
Type: Bug Report
0
If you set in code behind CharTitle with simple Quote like 
RadChart1.ChartTitle.Text = "Présences sur l'année sélectionnée";
you obtain a blank space chart (nothing display)

you have to set for running
RadChart1.ChartTitle.Text = "Présences sur l&#039;année sélectionnée";
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>
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>
Completed
Last Updated: 29 Jan 2020 15:02 by ADMIN
1 2 3 4