Completed
Last Updated: 31 Aug 2016 13:03 by Joel
ADMIN
Created by: Vessy
Comments: 1
Category: HtmlChart
Type: Feature Request
2

			
Completed
Last Updated: 24 Aug 2016 12:46 by ADMIN
For the time being you can choose either approach:

1) Set the min and max dates on the kendo widget:
ASPX:
		<script>
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				chart._chartObject.options.xAxis.min = new Date(2013, 04, 01);
				chart._chartObject.options.xAxis.max = new Date(2013, 05, 01);
				chart.repaint();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
			<PlotArea>
				<Series>
					<telerik:ScatterLineSeries DataFieldY="SellQuantity" DataFieldX="SellDate">
						<LabelsAppearance DataFormatString="{1} cars sold on {0:m}">
						</LabelsAppearance>
						<TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" />
					</telerik:ScatterLineSeries>
				</Series>
				<XAxis BaseUnit="Days">
					<TitleAppearance Text="Sell Date">
					</TitleAppearance>
					<LabelsAppearance DataFormatString="d" RotationAngle="45">
					</LabelsAppearance>
					<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
					<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
				</XAxis>
				<YAxis>
					<TitleAppearance Text="Quantity">
					</TitleAppearance>
					<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
					<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
				</YAxis>
			</PlotArea>
			<ChartTitle Text="Sold Cars per Date">
			</ChartTitle>
		</telerik:RadHtmlChart>
C#:
	protected void Page_Load(object sender, EventArgs e)
	{
		RadHtmlChart1.DataSource = GetData();
		RadHtmlChart1.DataBind();
	}

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

		dt.Columns.Add("ID", typeof(int));
		dt.Columns.Add("SellQuantity", typeof(int));
		dt.Columns.Add("SellDate", typeof(DateTime));

		dt.Rows.Add(1, 2, new DateTime(2013, 05, 12));
		dt.Rows.Add(2, 5, new DateTime(2013, 05, 13));
		dt.Rows.Add(3, 6, new DateTime(2013, 05, 17));
		dt.Rows.Add(4, 4, new DateTime(2013, 05, 18));
		dt.Rows.Add(5, 7, new DateTime(2013, 05, 22));

		return dt;
	}

2) Set the JavaScript equivalent of min and max dates in the code behind like follows:
C#:
	protected void Page_Load(object sender, EventArgs e)
	{
		//Set min and max date for a datetime x-axis type
		RadHtmlChart1.PlotArea.XAxis.MinValue = ConvertToJavaScriptDateTime(new DateTime(2014, 02, 19));
		RadHtmlChart1.PlotArea.XAxis.MaxValue = ConvertToJavaScriptDateTime(new DateTime(2014, 04, 05));

		//Instantiate ScatterSeriesItem objects
		ScatterSeriesItem ssi1 = new ScatterSeriesItem();
		ScatterSeriesItem ssi2 = new ScatterSeriesItem();
		ScatterSeriesItem ssi3 = new ScatterSeriesItem();
		ScatterSeriesItem ssi4 = new ScatterSeriesItem();
		//Instantiate DateTime objects
		DateTime date1 = (new DateTime(2014, 03, 03, 0, 0, 0));
		DateTime date2 = (new DateTime(2014, 03, 10, 0, 0, 0));
		DateTime date3 = (new DateTime(2014, 03, 17, 0, 0, 0));
		DateTime date4 = (new DateTime(2014, 03, 24, 0, 0, 0));
		//Set the converted x values to the ScatterSeriesItem objects
		ssi1.X = ConvertToJavaScriptDateTime(date1);
		ssi2.X = ConvertToJavaScriptDateTime(date2);
		ssi3.X = ConvertToJavaScriptDateTime(date3);
		ssi4.X = ConvertToJavaScriptDateTime(date4);
		//Set the y values to the ScatterSeriesItem objects
		ssi1.Y = 3;
		ssi2.Y = 6;
		ssi3.Y = 5;
		ssi4.Y = 9;
		//Add the ScatterSeriesItem objects to the ScatterLineSeries
		(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi1);
		(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi2);
		(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi3);
		(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi4);
	}

	//A method that converts the .NET DateTime object to its JavaScript Date object representation
	protected decimal ConvertToJavaScriptDateTime(DateTime fromDate)
	{
		return (decimal)fromDate.Subtract(new DateTime(1970, 1, 1)).TotalMilliseconds;
	}
ASPX:
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
			<PlotArea>
				<Series>
					<telerik:ScatterLineSeries Name="Stock A">
						<LabelsAppearance>
							<ClientTemplate>
                        #= kendo.format(\'{0:d/MM/yyyy}\', new Date(value.x)) #,  #=kendo.format(\'{0:C0}\',value.y)#
							</ClientTemplate>
						</LabelsAppearance>
						<TooltipsAppearance Color="White">
							<ClientTemplate>
                        #= kendo.format(\'{0:d/MM/yyyy}\', new Date(value.x)) #,  #=kendo.format(\'{0:C0}\',value.y)#
							</ClientTemplate>
						</TooltipsAppearance>
					</telerik:ScatterLineSeries>
				</Series>
				<YAxis>
					<LabelsAppearance DataFormatString="C0"></LabelsAppearance>
					<TitleAppearance Text="Price"></TitleAppearance>
				</YAxis>
				<XAxis Type="Date" BaseUnit="Days">
					<TitleAppearance Text="Closing Date">
					</TitleAppearance>
					<LabelsAppearance DataFormatString="d">
					</LabelsAppearance>
				</XAxis>
			</PlotArea>
			<ChartTitle Text="Closing Stock Prices">
			</ChartTitle>
		</telerik:RadHtmlChart>
Completed
Last Updated: 10 Aug 2016 10:17 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
0
For the time being you can manually fetch the data and pass it to the chart:
		<script>
			function pageLoad() {
				var dataSource = $find('<%= RadClientDataSource1.ClientID %>');
				dataSource.fetch(function (args) {
					var data = args.get_data(),
						chart = $find('<%=RadHtmlChart1.ClientID%>');
					//workaround
					chart.set_dataSource(data);
					chart.repaint();
				});
			}
		</script>
		<telerik:RadClientDataSource ID="RadClientDataSource1" runat="server">
			<DataSource>
				<WebServiceDataSourceSettings>
					<Select Url="spain-electricity.json" DataType="JSON" />
				</WebServiceDataSourceSettings>
			</DataSource>
			<Schema>
				<Model>
					<telerik:ClientDataSourceModelField FieldName="year" DataType="String" />
					<telerik:ClientDataSourceModelField FieldName="solar" DataType="Number" />
				</Model>
			</Schema>
		</telerik:RadClientDataSource>

		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" ClientDataSourceID="RadClientDataSource1">
			<PlotArea>
				<Series>
					<telerik:LineSeries DataFieldY="year" Name="year">
					</telerik:LineSeries>
				</Series>
				<XAxis DataLabelsField="year"></XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
Completed
Last Updated: 05 Aug 2016 13:29 by ADMIN
Created by: Lee
Comments: 1
Category: HtmlChart
Type: Feature Request
1
Would be nice to be able to supply an image for the series background on bar and column charts, this would enable infographic style option to charts, i.e. displaying data for countries the bar series can be repeating national flags.

Completed
Last Updated: 03 Aug 2016 14:36 by ADMIN
ADMIN
Created by: Telerik Admin
Comments: 1
Category: HtmlChart
Type: Feature Request
0
allow for the chart plot area to be fixed width not counting the axis text. the issue I have is the legend on right side of chart changes the widths of chart when the text is long.
Completed
Last Updated: 01 Aug 2016 10:24 by ADMIN
ADMIN
Created by: Telerik Admin
Comments: 2
Category: HtmlChart
Type: Feature Request
1
We are trying to convert a websites 11 year old controls from a different vendor to telerik.  All of the controls have been replaced except for the RadHtmlChart, which has limited customization of the legend.  Specifically we have the following issues:

1) The legend color squares are too small.  You can see the difference in the attachment "competitor" vs "telerik".  REQUEST: Set the size of the color squares.
2) The legend spacing between items is not customizable and is too compressed for our liking.  See "competitor" vs "telerik" to see the difference.  REQUEST: Allow padding or margin between legend items.
3) The legend size cannot be set to a fixed width.  For a left aligned legend, this results in multiple charts having inconsistent alignment.  Setting a different margin for each chart individually does not fix the problem.  Depending on the data fed to the charts, their position changes.  See the "multiple-charts" attachment for an example. REQUEST: Allow a fixed legend size so multiple charts can be aligned.
4) For left-aligned charts, the legend cannot be set to the top.  REQUEST: Allow TopLeft, TopRight options for legend alignment.

Thank you,
David A.
Completed
Last Updated: 28 Jul 2016 12:51 by ADMIN
Created by: Michael
Comments: 1
Category: HtmlChart
Type: Feature Request
2
Axes themselves do not have tooltips, only series do. Thus, tooltips cannot be added to the y-axis.
Add
Completed
Last Updated: 28 Jul 2016 11:18 by ADMIN
The lines can be similar to the ones in the box plot chart type - http://www.telerik.com/help/aspnet-ajax/htmlchart-types-box-plot-chart.html .

For the time being you can use transparent box plot series in order to simulate this. For example:

ASPX:

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function pageLoad() {
				//Attach the legendItemClick event on pageLoad:
				var chart = $find("<%=RadHtmlChart1.ClientID%>")._chartObject.bind("legendItemClick", OnLegendClicked);
			}
			function OnLegendClicked(e) {
				if (e.seriesIndex >= 3) {
					var meanSeriesVisible = e.sender.options.series[3].visible;
					var medianSeriesVisible = e.sender.options.series[4].visible;

					if (meanSeriesVisible == medianSeriesVisible) {
						if (e.series.visible == false) {
							e.sender.options.series[5].visible = false;
						}
					}
					else {
						if (e.series.visible == false) {
							e.preventDefault();
							e.sender.options.series[3].visible = false;
							e.sender.options.series[4].visible = false;
							e.sender.options.series[5].visible = true;
							e.sender.options.transitions = false;
							e.sender.redraw();
						}
					}
				}
			}
		</script>
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="1000" Height="500">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Germany Gold" GroupName="Germany" Gap="1">
                        <Appearance>
                            <FillStyle BackgroundColor="#DDD9C3" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="13" />
                            <telerik:CategorySeriesItem Y="12" />
                            <telerik:CategorySeriesItem Y="16" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Germany Silver" GroupName="Germany">
                        <Appearance>
                            <FillStyle BackgroundColor="#C4BD97" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="17" />
                            <telerik:CategorySeriesItem Y="16" />
                            <telerik:CategorySeriesItem Y="10" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Germany Bronze" GroupName="Germany">
                        <Appearance>
                            <FillStyle BackgroundColor="#948A54" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="26" />
                            <telerik:CategorySeriesItem Y="20" />
                            <telerik:CategorySeriesItem Y="15" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" Color="White" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:BoxPlotSeries Name="Mean" Visible="true">
                        <Appearance>
                            <FillStyle BackgroundColor="Transparent" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:BoxPlotSeriesItem Mean="11" Median="0" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="15" Median="0" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="14" Median="0" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                        </SeriesItems>
                    </telerik:BoxPlotSeries>
                    <telerik:BoxPlotSeries Name="Median" Visible="false">
                        <Appearance>
                            <FillStyle BackgroundColor="Transparent" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:BoxPlotSeriesItem Mean="0" Median="12" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="0" Median="10" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="0" Median="13" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                        </SeriesItems>
                    </telerik:BoxPlotSeries>
                    <telerik:BoxPlotSeries Name="Mean and Median" Visible="false">
                        <Appearance>
                            <FillStyle BackgroundColor="Transparent" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:BoxPlotSeriesItem Mean="11" Median="12" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="15" Median="10" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="14" Median="13" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                        </SeriesItems>
                    </telerik:BoxPlotSeries>
                </Series>
                <YAxis>
                    <TitleAppearance Text="Number of Medals" />
                </YAxis>
                <XAxis>
                    <LabelsAppearance DataFormatString="Year {0}" />
                    <Items>
                        <telerik:AxisItem LabelText="2000" />
                        <telerik:AxisItem LabelText="2004" />
                        <telerik:AxisItem LabelText="2008" />
                    </Items>
                </XAxis>
            </PlotArea>
            <ChartTitle Text="Olympic Medals Per Country Over the Years">
            </ChartTitle>
            <Legend>
                <Appearance Position="Right" />
            </Legend>
        </telerik:RadHtmlChart>
Completed
Last Updated: 28 Jul 2016 08:53 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
3
For the time being you can do that manually with an initially hidden panel that stores the text/image and display it only when there is no data in the chart. This can be done on the server-side as well as on the client-side. For example:

Server-side code:

ASPX:

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Skin="Black" Width="400px" Height="200px">
        </telerik:RadHtmlChart>
        <asp:Panel runat="server" Visible="false" ID="panelImage" Width="200" Height="200">
            <asp:Label ID="Label1" Text="There is not data in the chart" runat="server" />
            <asp:Image ID="image1" runat="server" ImageUrl="telerik_new-logo.png" Width="200" />
        </asp:Panel>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        BarSeries bar = new BarSeries();
        //CategorySeriesItem csi = new CategorySeriesItem() { Y = 10 };
        //bar.SeriesItems.Add(csi);

        RadHtmlChart1.PlotArea.Series.Add(bar);
        //If there isn't any items in the first series hide the chart and display the panel
        if ((RadHtmlChart1.PlotArea.Series[0] as BarSeries).SeriesItems.Count == 0)
        {
            RadHtmlChart1.Visible = false;
            panelImage.Visible = true;
        }
    }

Client-side code:

ASPX:

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Skin="Black" Width="400px" Height="200px">
        </telerik:RadHtmlChart>
        <asp:Panel runat="server" ID="panelImage" Width="200" Height="200" Style="display: none;">
            <asp:Label ID="Label1" Text="There is not data in the chart" runat="server" />
            <asp:Image ID="image1" runat="server" ImageUrl="telerik_new-logo.png" Width="200" />
        </asp:Panel>
        <script type="text/javascript">
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                //Hide the chart and display the panel when there is no data in the first series
                if (chart._chartObject.options.series[0].data.length == 0) {
                    chart.get_element().style.display = "none";
                    $get("<%=panelImage.ClientID%>").style.display = "block";
                }
            }
        </script>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        BarSeries bar = new BarSeries();
        //CategorySeriesItem csi = new CategorySeriesItem() { Y = 10 };
        //bar.SeriesItems.Add(csi);
        RadHtmlChart1.PlotArea.Series.Add(bar);
    }
Completed
Last Updated: 27 Jul 2016 11:51 by ADMIN
The CSS styles of the selection hint of the navigator in HtmlChart are not applied correctly in a data navigation scenario.

The workaround is to override the styles that you need like this:
        .k-navigator-hint .k-tooltip {
            border: 2px solid red !important;
            color: #000 !important;
        }
Completed
Last Updated: 20 Jul 2016 13:40 by ADMIN
Created by: Michael
Comments: 1
Category: HtmlChart
Type: Feature Request
3
I would like the ability to set a gradient for the plot area of the RadHtmlChart control, instead of just being able to set a solid color.  Thanks!
Completed
Last Updated: 20 Jul 2016 12:58 by ADMIN
Created by: Imported User
Comments: 1
Category: HtmlChart
Type: Bug Report
0
Hover over first legend item highlights all chart sections for donut chat type.
Hover over the rest of the legend items doesn't highlight the corresponding section of the donut chart.
Completed
Last Updated: 30 Jun 2016 15:38 by ADMIN
Currently LineSeries, ScatterSeries and ScatterLineSeries expose MarkersType property that gets only three values - Circle, Square and Triangle. Add the ability to set  custom images as markers as well. 
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: 22 Jun 2016 11:41 by ADMIN
ADMIN
Created by: Marin Bratanov
Comments: 2
Category: HtmlChart
Type: Feature Request
1
The axis is numerical, but it could have a DataLabelsField property like the x-axis so text for each label is taken from the datasource (a label per datasource row). Then the numerical values (YValue) of each item can be rounded to the nearest integer and if that matches an axis item's index the series item will correspond to this axis item.
Completed
Last Updated: 07 Apr 2016 18:45 by Anil
Created by: Tom
Comments: 2
Category: HtmlChart
Type: Feature Request
4
The options for positioning a legend in a RadHtmlChart are somewhat limited. Useful extensions:

1. Support Left/Center/Right options for legends positioned at top and bottom; support Top/Middle/Bottom options for legends positioned at left and right.

2. Support positioning legends within the plot area.

For the time being the following workaround can be used:
		<script>
			function pageLoad() {
				var kendoWidget1 = $find("<%=PieChart1.ClientID%>").get_kendoWidget();
				kendoWidget1.options.legend.position = "custom";
				kendoWidget1.options.legend.offsetX = 300;
				kendoWidget1.options.legend.offsetY = 80;
				kendoWidget1.redraw();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true">
			<PlotArea>
				<Series>
					<telerik:PieSeries StartAngle="90">
						<LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %" />
						<TooltipsAppearance DataFormatString="{0} %" />
						<SeriesItems>
							<telerik:PieSeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" Y="18.3" />
							<telerik:PieSeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" Y="35.8" />
							<telerik:PieSeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" Y="38.3" />
							<telerik:PieSeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" Y="4.5" />
							<telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" Y="2.3" />
						</SeriesItems>
					</telerik:PieSeries>
				</Series>
			</PlotArea>
			<ChartTitle Text="Browser Usage for April 2012">
			</ChartTitle>
		</telerik:RadHtmlChart>
Completed
Last Updated: 17 Feb 2016 07:34 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
1
For the time being the following workaround can be used:    

Category Axis:

JavaScript:

  <script>
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                chart._chartObject.options.categoryAxis.labels.template = "Item: #=value#";
                chart.repaint();
            }
        </script>

ASPX:

       <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="series 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="30" />
                            <telerik:CategorySeriesItem Y="10" />
                            <telerik:CategorySeriesItem Y="25" />
                            <telerik:CategorySeriesItem Y="20" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="1" />
                        <telerik:AxisItem LabelText="2" />
                        <telerik:AxisItem LabelText="3" />
                        <telerik:AxisItem LabelText="4" />
                    </Items>
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>

Numeric Axis:
        <script>
            function changeValues(value) {
                var newValue;
                switch (value) {
                    case 1:
                        newValue = "AA";
                        break;
                    case 2:
                        newValue = "BB";
                        break;
                    case 3:
                        newValue = "CC";
                        break;
                    case 4:
                        newValue = "DD";
                        break;
                    default:
                        newValue = value;
                }
                return newValue;
            }
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                chart._chartObject.options.xAxis.labels.template = "#=changeValues(value)#";
                chart.repaint();
            }
        </script>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300">
            <PlotArea>
                <Series>
                    <telerik:ScatterLineSeries Name="series 1">
                        <SeriesItems>
                            <telerik:ScatterSeriesItem Y="30" X="1" />
                            <telerik:ScatterSeriesItem Y="10" X="2" />
                            <telerik:ScatterSeriesItem Y="25" X="3" />
                            <telerik:ScatterSeriesItem Y="20" X="4" />
                        </SeriesItems>
                    </telerik:ScatterLineSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
Completed
Last Updated: 17 Feb 2016 07:34 by Doug
ADMIN
Created by: Danail Vasilev
Comments: 2
Category: HtmlChart
Type: Feature Request
3
For the time being the following workaround can be used:

JavaScript:

    <script>
        function pageLoad() {
            var chart = $find("<%=RadHtmlChart1.ClientID%>");
            chart.get_kendoWidget().options.valueAxis.labels.template = "#if(value > 20) {# Value #=value# is a good option#} else {# value below 20 is a bad option #}#";
            chart.repaint();
        }
    </script>

ASPX:


        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="series 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="30" />
                            <telerik:CategorySeriesItem Y="10" />
                            <telerik:CategorySeriesItem Y="25" />
                            <telerik:CategorySeriesItem Y="20" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
                <YAxis>
                    <LabelsAppearance DataFormatString="dd{0}">
                    </LabelsAppearance>
                </YAxis>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="item 1" />
                        <telerik:AxisItem LabelText="item 2" />
                        <telerik:AxisItem LabelText="item 3" />
                        <telerik:AxisItem LabelText="item 4" />
                    </Items>
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>

Completed
Last Updated: 12 Feb 2016 14:41 by abigail
Created by: abigail
Comments: 2
Category: HtmlChart
Type: Feature Request
1
Hi! I don't know if could be a other type for the html chart control. I want a donut with only 2 series like a points in a exam for example 100/120 and the points 100 shows in the center of the donut, maybe I would like to change the 100 points with a image 
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>