Completed
Last Updated: 03 Sep 2015 05:23 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
1

			
Completed
Last Updated: 05 Aug 2015 13:29 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
0
For the time being you can use the following workaround:
1) Either hide the chart with visibility:hidden instead of display:none
2) Or use the following workaround:
		<div id="div1" style="display: none;">
			<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>
		<input type="button" onclick="showChart(); return false;" value="Show Chart" />
		<script>
			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>
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;
    }
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.
Unplanned
Last Updated: 09 Jun 2015 12:44 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>
Unplanned
Last Updated: 08 Jun 2015 12:34 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
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: 05 Jun 2015 08:32 by ADMIN
ADMIN
Created by: Marin Bratanov
Comments: 3
Category: HtmlChart
Type: Bug Report
0

			
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);
Completed
Last Updated: 04 May 2015 08:26 by Elena
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Bug Report
1
For the time being you can workaround this behavior as follows:
  1)Place all of the items within a common series.
  2)Use different colors for items in order to distinguish them from their original series.
  3)Create a custom legend if needed one.
Won't Fix
Last Updated: 30 Apr 2015 12:33 by Elena
For the time being the following workaround can be used:

    <style>
        .k-chart .k-tooltip, .k-sparkline .k-tooltip, .k-stockchart .k-tooltip {
            background-image: url("//:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNJREFUeNpi/P//vwMDFQELEP8beQb+HTWQYgP/DHoD/466cAR4edRAyg38P6hLbIAAAwCnWhhVsxvdCAAAAABJRU5ErkJggg==") !important;
        }
    </style>
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: 21 Apr 2015 13:24 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 2
Category: HtmlChart
Type: Bug Report
1
Issue will be fixed for Q3 2014 release.
For the time being you can manually set color to the selection hint:
CSS:
	<style>
		.k-chart .k-navigator-hint .k-tooltip {
			color: black;
		}
	</style>
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: 19 Mar 2015 12:24 by ADMIN
Issue is reproducible with the following code:
        <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Product 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="10" />
                            <telerik:CategorySeriesItem Y="8" />
                        </SeriesItems>
                        <LabelsAppearance Position="Center"></LabelsAppearance>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
For the time being you can change the labels position from "Center" to "OutsideEnd".
Unplanned
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: 27 Feb 2015 10:14 by ADMIN
Completed
Last Updated: 27 Feb 2015 06:51 by ADMIN
Completed
Last Updated: 26 Feb 2015 18:19 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
0
For the time being the CommonTooltipsAppearance.Shared property must be set to false. For example:

        <telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Layout="Sparkline" Width="100" Height="150">
            <PlotArea>
                <CommonTooltipsAppearance Shared="false"></CommonTooltipsAppearance>
                <Series>
                    <telerik:LineSeries>
                        <TooltipsAppearance>
                            <ClientTemplate>
                                Value: #=value# <br />
                                Category #=category#
                            </ClientTemplate>
                        </TooltipsAppearance>
                        <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>