Approved
Last Updated: 23 Nov 2015 10:09 by David
Completed
Last Updated: 21 Apr 2015 10:38 by ADMIN
Reproduction steps - Run the code below and click Show Chart - chart is not displayed.
ASPX:
		<div id="div1" style="visibility: hidden;">
			<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px">
				<PlotArea>
					<Series>
						<telerik:ColumnSeries Name="Product 1">
							<SeriesItems>
								<telerik:CategorySeriesItem Y="1" />
								<telerik:CategorySeriesItem Y="2" />
								<telerik:CategorySeriesItem Y="3" />
							</SeriesItems>
						</telerik:ColumnSeries>
					</Series>
				</PlotArea>
			</telerik:RadHtmlChart>
		</div>
		<div id="chart" style="visibility: hidden;">HtmlChart wrapper</div>
		<input type="button" onclick="showChart(); return false;" value="Show Chart" />
		<script>
			$ = $telerik.$;
			function showChart() {
				$("#div1").attr("style", "visibility:visible");
			}
		</script>
Solution 1:
Use the workaround below:
		<telerik:RadRotator ID="RadRotator1" runat="server" Height="500px" ItemHeight="300px" ItemWidth="300px" Skin="Default" Width="1000px" RotatorType="AutomaticAdvance">
			<Items>
				<telerik:RadRotatorItem>
					<ItemTemplate>
						<telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Height="300px" Skin="Silk" Width="300px" Transitions="False" Visible="true">
							<PlotArea>
								<Series>
									<telerik:PieSeries>
										<SeriesItems>
											<telerik:PieSeriesItem Name="a" Y="12" />
											<telerik:PieSeriesItem Name="b" Y="5" />
										</SeriesItems>
									</telerik:PieSeries>
								</Series>
							</PlotArea>
						</telerik:RadHtmlChart>
					</ItemTemplate>
				</telerik:RadRotatorItem>
			</Items>
			<ItemTemplate>
			</ItemTemplate>
		</telerik:RadRotator>
		<script>
			$ = $telerik.$;
			Telerik.Web.UI.RadHtmlChart.prototype.repaint = function () {
				var that = this;
				if (that._chartObject) {
					if (that._isDataSourceChanged()) {
						that._loadData();
					}
					else {
						that._resetVisibilityOption();
						that._chartObject.redraw();
					}
				}
			};

			Telerik.Web.UI.RadHtmlChart.prototype._resetVisibilityOption = function () {
				var that = this;
				that._chartObject.options.visible = that._options.visible = that.get_visible();
			};

			Telerik.Web.UI.RadHtmlChart.prototype._getMainConfig = function () {
				var that = this;
				//when visible is false - nothing is sent from the server to save transferred data
				//e.g - there are properties set but visible is false - we do not need to send those properties amyway
				//that is why - set visible: false when nothing is sent from the server
				that._options = $telerik._getPropertiesParameter(that, that.constructor);
				that._cleanUpConfigProperties();

				that._options["theme"] = that.get_skin();
				that._options["visible"] = $(that.get_element()).is(':visible');
				that._options["title"] = that._chartTitle ? that._parseObject(that._chartTitle) : { visible: false };
				that._options["legend"] = that._legend ? that._parseObject(that._legend) : { visible: false };

				if (that._chartArea) {
					that._options["chartArea"] = that._parseObject(that._chartArea);
				}

				if (that._isSparklineChart()) {
					that._setMinimumSparklineWidth();
				}

				if (that._plotArea) {
					that._configurePlotArea();
				}

				if (that._series) {
					/*jshint evil: true */
					that._options["series"] = eval(that._series);
					/*jshint evil: false */
				}

				if (that._isStockChart()) {
					that._configureStockChart();
				}
			};
		</script>
Solution 2:
Hide the chart on load event:
		<div id="div1">
			<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px">
				<ClientEvents OnLoad="OnLoad" />
				<PlotArea>
					<Series>
						<telerik:ColumnSeries Name="Product 1">
							<SeriesItems>
								<telerik:CategorySeriesItem Y="1" />
								<telerik:CategorySeriesItem Y="2" />
								<telerik:CategorySeriesItem Y="3" />
							</SeriesItems>
						</telerik:ColumnSeries>
					</Series>
				</PlotArea>
			</telerik:RadHtmlChart>
		</div>
		<div id="chart" style="visibility: hidden;">HtmlChart wrapper</div>
		<input type="button" onclick="showChart(); return false;" value="Show Chart" />
		<script>
			$ = $telerik.$;
			function showChart() {
				$("#div1").attr("style", "visibility:visible");
			}

			function OnLoad() {
				$("#div1").attr("style", "visibility:hidden");
			}

		</script>
Completed
Last Updated: 18 May 2015 12:57 by JAIME
Currently it is not possible to add null-able series items in RadHtmlChart in the markup or programmatically. If a null-able item is added it is omitted and is replaced by the next series item from the current Series. The workaround is to either data bound the chart to a data source or convert the null-able values to zeros:

C#:

        decimal? nullValue = null;
        if (nullValue == null)
        {
            nullValue = 0;
        }

        ColumnSeries colSeries2 = RadHtmlChart1.PlotArea.Series[1] as ColumnSeries;
        colSeries2.SeriesItems.Add(39);
        colSeries2.SeriesItems.Add(nullValue);
        colSeries2.SeriesItems.Add(3);
Won't Fix
Last Updated: 10 Jun 2015 09:21 by ADMIN
Currently the datasource columns which have space in their name cannot be passed to a databound RadHtmlChart. Add the ability to handle the spaces in the names of these columns.
Completed
Last Updated: 27 Apr 2015 12:04 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 3
Category: HtmlChart
Type: Bug Report
3
Currently a long legend in RadHtmlChart overflows the PlotArea under IE, while in the rest browsers it is cut. The workaround is to hide the legend and create a custom one in a styled div (e.g. KendoUI demonstrates such an example here - http://demos.kendoui.com/dataviz/bubble-charts/index.html)
Completed
Last Updated: 28 Jul 2015 08:17 by Rommel
String data source fields in the RadHtmlChart that contain only numeric characters should not be parsed to decimal. Also when such a string starts with the 0 character, it is omitted. For example the "0" item in the legend is not displayed with the example below:
ASPX:

        <telerik:RadHtmlChart runat="server" ID="PieChart1" Width="800" Height="500" Transitions="true">
            <Appearance>
                <FillStyle BackgroundColor="White"></FillStyle>
            </Appearance>
            <ChartTitle Text="Browser Usage for April 2012">
                <Appearance Align="Center" BackgroundColor="White" Position="Top">
                </Appearance>
            </ChartTitle>
            <Legend>
                <Appearance BackgroundColor="White" Position="Right" Visible="true">
                </Appearance>
            </Legend>
            <PlotArea>
                <Appearance>
                    <FillStyle BackgroundColor="White"></FillStyle>
                </Appearance>
                <Series>
                    <telerik:PieSeries StartAngle="90" DataFieldY="code_count" NameField="items_names">
                        <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %">
                        </LabelsAppearance>
                        <TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance>
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>

C#:

using System.Data;

    protected void Page_Load(object sender, EventArgs e)
    {
        PieChart1.DataSource = GetData();
        PieChart1.DataBind();
    }

    protected DataTable GetData()
    {
        DataTable dt = new DataTable();

        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("code_count", typeof(int));
        dt.Columns.Add("items_names", typeof(string));

        dt.Rows.Add(1, 771, "0");
        dt.Rows.Add(2, 187, "1");
        dt.Rows.Add(3, 178, "2");
        dt.Rows.Add(4, 60, "3");

        return dt;
    }
Completed
Last Updated: 06 Jan 2016 12:07 by ADMIN
Approved
Last Updated: 16 Mar 2015 23:18 by Phil
Created by: Phil
Comments: 3
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: 26 Feb 2015 17:18 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
2
For the time begin the event logic can be executed with a small time out:

JavaScript

    <script type="text/javascript">
        var isFirstClick = "1";
        function OnClientSeriesClicked(sender, args) {
            setTimeout(function () {
                alert(isFirstClick);
            }, 0);
        }
    </script>
ASPX:

    <telerik:RadHtmlChart runat="server" Width="900px" Height="700px" ID="RadHtmlChart2"
        OnClientSeriesClicked="OnClientSeriesClicked">
        <PlotArea>
            <Series>
                <telerik:BarSeries>
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="10" />
                    </SeriesItems>
                </telerik:BarSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>

Completed
Last Updated: 07 Jun 2013 05:36 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
2
Currently the Hay skin sets white color for the  title, axes labels and legend in RadHtmlChart.
For the time being the color of the mentioned elements can be changed through the TextStyle property - http://www.telerik.com/help/aspnet-ajax/htmlchart-appearance-labels-titles-font-settings.html.
Completed
Last Updated: 13 Jan 2016 12:43 by ADMIN
The current behavior of the RadHtmlChart preserves only the bound datasource, however it doesn't store programmatically added series items after a postback.

The workaround is instead of creating and adding series items programmatically, create a datatable and pass it as a datasource to the chart. For example:
ASPX:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
</telerik:RadHtmlChart>
C#:
protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.Add("id");
    dt.Columns.Add("xValues");
    dt.Columns.Add("yValues");
    for (int i = 0; i < 5; i++)
    {
        dt.Rows.Add(i, (10 + i).ToString() + " Apr", 20 + i);
    } 
    ScatterLineSeries sls1 = new ScatterLineSeries();
    sls1.LabelsAppearance.DataFormatString = "{0:d}";
    sls1.DataFieldX = "xValues";
    sls1.DataFieldY = "yValues";
  
    RadHtmlChart1.PlotArea.Series.Add(sls1);
    RadHtmlChart1.DataSource = dt;
    RadHtmlChart1.DataBind();
}
Declined
Last Updated: 26 Feb 2015 17:11 by ADMIN
http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/columnchart/defaultcs.aspx
Try it with Stacked mode checked and minvalue set to 5000 on Y settings!
Declined
Last Updated: 21 Mar 2019 05:51 by ADMIN
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: 04 Jul 2014 12:27 by ADMIN
Created by: Paul
Comments: 2
Category: HtmlChart
Type: Bug Report
1
When a pie chart is rendered with large labels they may be clipped because the pie chart is not sized correctly.  When the legend is enabled the pie chart sizes correctly to handle long labels.
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: 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>
Approved
Last Updated: 10 Mar 2016 09:32 by ADMIN
Approved
Last Updated: 11 Apr 2016 07:26 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: 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>
1 2 3 4