Recently Updated
Unplanned
Last Updated:
12 Oct 2021 15:58
by ADMIN
Created by:
Bob
Comments:
0
Category:
HtmlChart
Type:
Bug Report
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
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
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
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
ADMIN
Created by:
Danail Vasilev
Comments:
1
Category:
HtmlChart
Type:
Bug Report
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
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
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'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
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
Created by:
rleast
Comments:
2
Category:
HtmlChart
Type:
Bug Report
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
ADMIN
Created by:
Danail Vasilev
Comments:
3
Category:
HtmlChart
Type:
Bug Report
Declined
Last Updated:
21 Mar 2019 05:51
by ADMIN
Created by:
Eva
Comments:
1
Category:
HtmlChart
Type:
Bug Report
Hi,
MissingValue set to Gap or Zero doesn't work in RadHtmlChart with ScatterLineSeries.
Interpolation is done instead.
<telerik:RadHtmlChart runat="server">
<PlotArea>
<Series>
<telerik:ScatterLineSeries Name="Test" DataFieldX="XValue"
DataFieldY="YValue" MissingValues="Gap">
<SeriesItems>
<telerik:ScatterSeriesItem X="1" Y="8" />
<telerik:ScatterSeriesItem X="2" Y="9" />
<telerik:ScatterSeriesItem X="3" Y="4" />
<telerik:ScatterSeriesItem X="4" Y="6" />
<telerik:ScatterSeriesItem X="5" Y="7" />
<telerik:ScatterSeriesItem X="8" Y="1" />
<telerik:ScatterSeriesItem X="9" Y="5" />
<telerik:ScatterSeriesItem X="10" Y="4" />
</SeriesItems>
</telerik:ScatterLineSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
The workaround described in the following link doesn't work either :
https://feedback.telerik.com/Project/108/Feedback/Details/44399-fix-the-functionality-of-the-missingvalue-property-when-set-to-gap-in-areaserie
Can you please fix this bug ?
Thanks and regards.
Completed
Last Updated:
30 Sep 2018 19:30
by Karen
ADMIN
Created by:
Danail Vasilev
Comments:
4
Category:
HtmlChart
Type:
Bug Report
For the time being the following workaround can be used:
JavaScript:
<script>
function pageLoad() {
var chart = $find("<%=RadHtmlChart1.ClientID%>");
chart._chartObject.options.series[0].missingValues = "Gap";
chart.repaint();
}
</script>
ASPX:
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
<PlotArea>
<Series>
<telerik:LineSeries MissingValues="Gap">
<SeriesItems>
<telerik:CategorySeriesItem Y="30" />
<telerik:CategorySeriesItem Y="10" />
<telerik:CategorySeriesItem />
<telerik:CategorySeriesItem Y="30" />
</SeriesItems>
</telerik:LineSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
Completed
Last Updated:
26 Sep 2018 16:06
by ADMIN
ADMIN
Created by:
Peter Milchev
Comments:
0
Category:
HtmlChart
Type:
Bug Report
Unplanned
Last Updated:
29 Nov 2017 12:39
by ADMIN
ADMIN
Created by:
Peter Milchev
Comments:
0
Category:
HtmlChart
Type:
Bug Report
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
Completed
Last Updated:
21 Jun 2017 10:30
by ADMIN
ADMIN
Created by:
Stamo Gochev
Comments:
1
Category:
HtmlChart
Type:
Bug Report
The workaround is to set <MarkersAppearance Visible="false" />.
Completed
Last Updated:
09 Dec 2016 11:31
by ADMIN
ADMIN
Created by:
Danail Vasilev
Comments:
0
Category:
HtmlChart
Type:
Bug Report
Code that reproduces the issue:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChartColumnGender" Transitions="true" Width="150" Height="300">
<PlotArea>
<Series>
<telerik:ColumnSeries Name="Male" Stacked="true" StackType="Stack100">
<SeriesItems>
<telerik:CategorySeriesItem Y="69" />
</SeriesItems>
</telerik:ColumnSeries>
<telerik:ColumnSeries Name="Female" Stacked="true" StackType="Stack100">
<SeriesItems>
<telerik:CategorySeriesItem Y="3" />
</SeriesItems>
</telerik:ColumnSeries>
</Series>
<YAxis NarrowRange="false"></YAxis>
</PlotArea>
</telerik:RadHtmlChart>
Workaround:
<script>
function pageLoad() {
var kendoChart = $find("RadHtmlChartColumnGender").get_kendoWidget();
var valueAxis = kendoChart.options.valueAxis;
valueAxis.narrowRange = false;
$find("RadHtmlChartColumnGender").setOptions({valueAxis: valueAxis});
}
</script>
Unplanned
Last Updated:
03 Oct 2016 10:15
by ADMIN
ADMIN
Created by:
Slav
Comments:
0
Category:
HtmlChart
Type:
Bug Report
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>
Completed
Last Updated:
26 Sep 2016 12:36
by ADMIN
ADMIN
Created by:
Bozhidar
Comments:
0
Category:
HtmlChart
Type:
Bug Report
<script>
function chartLoad() {
$find("RadHtmlChart2").get_kendoWidget().setOptions({
legend: {
position: "top",
width: 162,
height: 88,
orientation: "vertical"
}
})
}
</script>
<telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Width="350" Height="350">
<ClientEvents OnLoad="chartLoad" />
...
</telerik:RadHtmlChart>
Declined
Last Updated:
05 Aug 2016 12:18
by ADMIN
ADMIN
Created by:
Telerik Admin
Comments:
1
Category:
HtmlChart
Type:
Bug Report
export of the chart to image (or pdf) will show an html code of non-breaking space in chart title and chart legend, but not in a label added to HtmlChartHolder
Unplanned
Last Updated:
29 Jul 2016 13:08
by Phil
Created by:
Phil
Comments:
0
Category:
HtmlChart
Type:
Bug Report
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.