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

Completed
Last Updated: 09 Dec 2016 11:31 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
1
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>
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: 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>
Completed
Last Updated: 26 Sep 2016 12:36 by ADMIN
               <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>
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>
Completed
Last Updated: 11 Feb 2016 12:48 by ADMIN
For the time being you can use the following JavaScript workaround:

		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300">
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="series 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="25" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
				<XAxis MinValue="1">
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
		<script>

                       //JavaScript workaround

			function isNumber(val) {
				return typeof val === "number" && !isNaN(val);
			}


			var dataviz = kendo.dataviz,
				inArray = dataviz.inArray,
				deepExtend = kendo.deepExtend,
				math = Math,
				AREA = "area",
				VERTICAL_AREA = "verticalArea",
				VERTICAL_LINE = "verticalLine",
				LINE = "line";

			kendo.dataviz.CategoricalPlotArea.fn.filterSeries = function (currentSeries, categoryAxis) {
				var range = categoryAxis.totalRangeIndices();
				var justified = categoryAxis.options.justified;
				var outOfRangePoints = inArray(currentSeries.type, [LINE, VERTICAL_LINE, AREA, VERTICAL_AREA]);
				var categoryIx;

				range.min = isNumber(categoryAxis.options.min) ? math.floor(range.min) : 0;
				range.max = isNumber(categoryAxis.options.max) ? (justified ? math.floor(range.max) + 1 : math.ceil(range.max)) : currentSeries.data.length;

				currentSeries = deepExtend({}, currentSeries);

				if (outOfRangePoints) {
					var minCategory = range.min - 1;
					var srcCategories = categoryAxis.options.srcCategories || [];
					if (minCategory >= 0 && minCategory < currentSeries.data.length) {
						categoryIx = minCategory;
						currentSeries._outOfRangeMinPoint = {
							item: currentSeries.data[categoryIx],
							category: srcCategories[categoryIx],
							categoryIx: -1
						};
					}

					if (range.max < currentSeries.data.length) {
						categoryIx = range.max;
						currentSeries._outOfRangeMaxPoint = {
							item: currentSeries.data[categoryIx],
							category: srcCategories[categoryIx],
							categoryIx: range.max - range.min
						};
					}
				}

				categoryAxis._seriesMax = math.max(categoryAxis._seriesMax || 0, currentSeries.data.length);

				currentSeries.data = (currentSeries.data || []).slice(range.min, range.max);

				return currentSeries;
			}
		</script>
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: 20 Jun 2022 14:56 by ADMIN
Completed
Last Updated: 19 Jan 2016 14:20 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
0
For the time being the reversed properties can be set through the kendo widget:
		<script>
			function pageLoad(sender, args) {

				var radarChart = $find('<%=RadarLineChart.ClientID%>').get_kendoWidget();
				var polarChart = $find('<%=PolarAreaChart.ClientID%>').get_kendoWidget();


				radarChart.options.valueAxis.reverse = true;
				polarChart.options.yAxis.reverse = true;


				radarChart.options.categoryAxis.reverse = true;
				polarChart.options.xAxis.reverse = true;

				radarChart.redraw();
				polarChart.redraw();
			}
		</script>

		<telerik:RadHtmlChart runat="server" ID="RadarLineChart" Width="345" Height="345">
			<PlotArea>
				<XAxis Reversed="true">
					<Items>
						<telerik:AxisItem LabelText="January"></telerik:AxisItem>
						<telerik:AxisItem LabelText="February"></telerik:AxisItem>
						<telerik:AxisItem LabelText="March"></telerik:AxisItem>
						<telerik:AxisItem LabelText="April"></telerik:AxisItem>
						<telerik:AxisItem LabelText="May"></telerik:AxisItem>
					</Items>
				</XAxis>
				<YAxis Reversed="true">
				</YAxis>
				<Series>
					<telerik:RadarLineSeries Name="Avg Low" MissingValues="Gap">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="1000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="8000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="11000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="13000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="12000"></telerik:CategorySeriesItem>
						</SeriesItems>
					</telerik:RadarLineSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>

		<telerik:RadHtmlChart runat="server" ID="PolarAreaChart" Width="345" Height="345">
			<PlotArea>
				<XAxis Reversed="true">
				</XAxis>
				<YAxis Reversed="true">
				</YAxis>
				<Series>
					<telerik:PolarAreaSeries Name=">12.3 knots">
						<SeriesItems>
							<telerik:PolarSeriesItem Angle="125" Radius="2.4"></telerik:PolarSeriesItem>
							<telerik:PolarSeriesItem Angle="138" Radius="7.5"></telerik:PolarSeriesItem>
							<telerik:PolarSeriesItem Angle="152" Radius="8.3"></telerik:PolarSeriesItem>
							<telerik:PolarSeriesItem Angle="166" Radius="4.3"></telerik:PolarSeriesItem>
						</SeriesItems>
					</telerik:PolarAreaSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
Completed
Last Updated: 28 Oct 2015 06:39 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
0

			
Completed
Last Updated: 27 Jan 2016 11:24 by Mike
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Bug Report
1

			
Completed
Last Updated: 27 Jan 2016 11:25 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
0

			
Completed
Last Updated: 29 Jan 2020 15:02 by ADMIN
Completed
Last Updated: 27 Jun 2016 08:10 by ADMIN
JavaScript workaround:
		<telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true">
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="Week 15" ZIndex="0">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15" />
							<telerik:CategorySeriesItem />
							<telerik:CategorySeriesItem Y="71" />
							<telerik:CategorySeriesItem Y="93" />
							<telerik:CategorySeriesItem Y="43" />
							<telerik:CategorySeriesItem Y="23" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
		<script>
			kendo.dataviz.LineChart.fn.animationPoints = function () {
				var series = this.seriesOptions;
				var points = [];
				var seriesPoints;
				var pointsIdx, idx;
				for (idx = 0; idx < series.length; idx++) {
					if (series[idx].markers.visible) {
						seriesPoints = this.seriesPoints[idx];
						for (pointsIdx = 0; pointsIdx < seriesPoints.length; pointsIdx++) {
							if (seriesPoints[pointsIdx] != null) {
								points.push(seriesPoints[pointsIdx].marker);
							}
						}
					}
				}
				return points.concat(this._segments);
			}
		</script>
Completed
Last Updated: 27 Jan 2016 11:24 by ADMIN
The workaround is to convert the color names to HEX, for example through the following HexConverter() method:
ASPX:

        <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
        </telerik:RadClientExportManager>
        <telerik:RadButton ID="RadButton1" runat="server" OnClientClicked="exportRadHtmlChart" Text="Export RadHtmlChart to PDF" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Series 1" DataFieldY="myValues" ColorField="Color">
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
        <script>
            var $ = $telerik.$;
            function exportRadHtmlChart() {
                $find('<%=RadClientExportManager1.ClientID%>').exportPDF($(".RadHtmlChart"));
            }
        </script>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = GetData();

        for (int i = 0; i < dt.Rows.Count; i++)
        {
            //Not all Color Names can be exported
            // dt.Rows[i]["Color"] = ColorTranslator.ToHtml(GetColor(i));

            //Convert colors to HEX works properly
            dt.Rows[i]["Color"] = HexConverter(GetColor(i));
        }
        RadHtmlChart1.DataSource = dt;
        RadHtmlChart1.DataBind();
    }

    public static DataTable GetData()
    {
        DataTable dt = new DataTable("ChargeData");
        dt.Columns.Add("myValues", typeof(int));
        dt.Columns.Add("Color", typeof(string));


        dt.Rows.Add(11, "");
        dt.Rows.Add(12, "");
        dt.Rows.Add(13, "");
        dt.Rows.Add(14, "");
        dt.Rows.Add(15, "");
        dt.Rows.Add(16, "");
        dt.Rows.Add(17, "");
        dt.Rows.Add(18, "");
        dt.Rows.Add(19, "");
        dt.Rows.Add(20, "");
        return dt;
    }

    public static String HexConverter(System.Drawing.Color c)
    {
        return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");
    }

    public static Color GetColor(int index)
    {
        return colors[index % colors.Length];
    }

    public static readonly Color[] colors =
    {
        Color.Orange,
        Color.Violet,
        Color.MediumSeaGreen,
        Color.HotPink,
        Color.Black,
        Color.DarkGoldenrod,
        Color.DarkMagenta,
        Color.Chocolate,
        Color.DarkOliveGreen,
        Color.DarkTurquoise
    };
1 2 3