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>
Unplanned
Last Updated: 25 Feb 2019 13:53 by ADMIN
The feature will be similar to Plot Bands (see http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/plot-bands/defaultcs.aspx demo), however, the width of lines will not be dependent on the y-axis scale.
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: 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: 14 Nov 2018 15:28 by Priyanka
Currently there is some space between the PlotArea and the starting/ending points of the LineSeries in RadHtmlChart.
To changethat behavior, so that it is similar to the one in AreaSeries  the justified property (https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.justified) can be set through the underlying Kendo Chart widget:

        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script>
                function onLoad(sender) {
                    var chart = sender.get_kendoWidget();
                    var opts = chart.options;
                    opts.categoryAxis.justified = true;
                    chart.setOptions(opts);
                    chart.redraw();
                }
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true">
            <ClientEvents OnLoad="onLoad" />
            <PlotArea>
                <Series>
                    <telerik:LineSeries Name="Week 15" MissingValues="Interpolate">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="15" />
                            <telerik:CategorySeriesItem Y="23" />
                            <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>
Unplanned
Last Updated: 09 Apr 2021 10:36 by ADMIN
Created by: Douw
Comments: 1
Category: HtmlChart
Type: Feature Request
3
Add support for a secondary x-axis at the top of the chart.
Please use consistent axis types.
Why would the primary axes be of type Telerik.Web.UI.HtmlChart.PlotArea.Chart*Axis and the secondary y-axis be of type Telerik.Web.UI.AxisY?
Completed
Last Updated: 27 Apr 2015 15:30 by Elena
A JS error is thrown when a RadHtmlChart is databound and there are series items with null values that correspond to DateTime values on the XAxis. 

The issue could be handled in the following way:
Check if there is a series item's value that is null and if this is the case then do not add it to the datasource
Unplanned
Last Updated: 11 Jun 2021 08:21 by ADMIN
I get a lot of work creating BI/KPI UIs which are basically converting what you can do in Excel Charts into a Web UI.   Which means anything they can do in Excel they expect the web to do. 
Since there is a drive to automate as much mundane human activity in the business and reduce human error (cut and paste error). 
I need to reproduce a graph with 'standard' Tend Lines. 
That is not my interpretation of a trend, but standard best practice.
I want this as a checkbox, and attribute to a series for the DataFieldY value.
Initially a code solution would be fine (once its got the data from the data source).

http://www.telerik.com/blogs/how-to-plot-a-simple-linear-regression-in-telerik-asp.net-web-form-chart
 
Unplanned
Last Updated: 15 Jun 2021 12:36 by ADMIN
Currently labels for SeriesItems having Y of 0 are not displayed in PieSeries and DonutSeries due to visual considerations. Improve the handling of such labels.
Unplanned
Last Updated: 10 Mar 2016 09:44 by ADMIN
ADMIN
Created by: Stamo Gochev
Comments: 0
Category: HtmlChart
Type: Feature Request
3
The OnClientPlotAreaClicked event could be similar to the OnClientSeriesClicked event. It might be used for charts which are very small in size and clicking an individual series is not so easy. For the time being the following workaround can be used:
ASPX:
		<script type="text/javascript">
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				chart._chartObject.bind('plotAreaClick', plotAreaClick);
			}

			function plotAreaClick(e) {
				if (e.originalEvent.type === "contextmenu") {
					// Disable browser context menu
					alert('rightClick');
					e.originalEvent.preventDefault();
				}
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" 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>
		</telerik:RadHtmlChart>
Completed
Last Updated: 08 Apr 2014 16:05 by Saqib
Currently MinValue and MaxValue properties of the Axes accepts only decimal, so that when the axes are of date type, Min and Max dates cannot be set.

The workaround is to obtain the min and max values from the datasource field used for populating XAxis labels and set these values explicitly to the XAxis through the chartObject. For example:
<script type="text/javascript">
    function pageLoad() {
        //Get reference to the chart
        var chart = $find("<%=RadHtmlChart1.ClientID%>");
  
        //Obtain charts datasource
        var currDataSource = eval(chart.get_dataSourceJSON());
  
         //Get minValue for the datasource field used for populating XAxis Labels. In this example the field is named myDataSourceField
        var minValue = currDataSource[0].myDataSourceField;
  
        //Get maxValue for the datasource field used for populating XAxis Labels. In this example the field is named myDataSourceField
        var maxValue = currDataSource[currDataSource.length - 1].myDataSourceField;
  
        //Reference the chartObject's min and max properties
        chart._chartObject.options.xAxis.min = minValue;
        chart._chartObject.options.xAxis.max = maxValue;
  
        //Repaint the chart
        chart.repaint();
    }
</script>
Declined
Last Updated: 28 Jul 2014 12:15 by Phil
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
3
Currently the appearance of the Series border cannot be controlled. Add the ability to change its width, color and dashtype.

Declined with the following reason: Item is duplicate of http://feedback.telerik.com/Project/108/Feedback/Details/50612
Unplanned
Last Updated: 13 Jul 2016 08:28 by John McFadden
Currently the default pivot point for rotating the labels on the XAxis is the center of the label itself. Add the ability to change the pivot point to be the first symbol of the label.
For the time being the property can be set via the kendo object (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.labels.rotation.align):
		<script>
			function load(chart) {
				var align = "end"; //"center"
					chart.get_kendoWidget().setOptions({ categoryAxis: { labels: { rotation: { angle:45, align: align } } } });
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<ClientEvents OnLoad="load" />
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series 1">
						<Appearance></Appearance>
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<LabelsAppearance></LabelsAppearance>
					<Items>
						<telerik:AxisItem LabelText="Item 1" />
						<telerik:AxisItem LabelText="Item 2" />
						<telerik:AxisItem LabelText="Item 3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
Completed
Last Updated: 07 Jan 2021 18:25 by ADMIN
The event should be similar to OnClientSeriesClicked event. It should expose information about the clicked series.
Declined
Last Updated: 26 Feb 2015 17:16 by ADMIN
Created by: Imported User
Comments: 1
Category: HtmlChart
Type: Feature Request
2
Allow the HTMLChart to be resized when the parent window is resized.
Currently the resize of the chart only occurs on page load or refresh only.

So i will resize the window and reload and the chart will fit into the space.

then if i enlarge the window the chart stays the current size.


This is particular important for us as our support of mobile devices (and responsive design)

the whole of our site is responsive apart from our charts :-( 


Completed
Last Updated: 26 Feb 2015 17:17 by Michael
Completed
Last Updated: 27 Feb 2015 10:09 by ADMIN
Completed
Last Updated: 11 Aug 2023 09:08 by ADMIN
Release R3 2023
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
2
For the time being the following workaround can be used:

JavaScript:

    <script>
        function pageLoad() {
            var chart = $find("<%=RadHtmlChart1.ClientID%>");
            chart._chartObject.options.series[0].labels.background = "yellow";
            chart._chartObject.options.series[0].labels.border = {
                width: 2,
                dashType: "dashDot",
                color: "green"
            };
            chart.repaint();
        }
    </script>

ASPX:

        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="10" />
                            <telerik:CategorySeriesItem Y="30" />
                            <telerik:CategorySeriesItem Y="20" />
                            <telerik:CategorySeriesItem Y="25" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>













Unplanned
Last Updated: 28 Jan 2022 15:53 by ADMIN
When there is no data in the source of the chart, the plot area should be displaying a message in predefined format. Something similar to what we have in the Grid and other controls.
Declined
Last Updated: 28 May 2021 14:49 by ADMIN
Created by: Douw
Comments: 1
Category: HtmlChart
Type: Feature Request
2
Hello,
Like a lot of companies we have multiple client side interfaces of a single application and have to create similar UI in multiple platforms.
For example I had to create a chart in both WPF and ASP.NET AJAX today.
The problem I have with the Telerik controls is that there are absolutely no standardization or consistency between platforms.
Why would a Cartesian Axis in WPF and ASP.NET AJAX and ASP MVC and Windows Universal Apps not all called the same thing?
It would be very simple to use interfaces to create some consistency between platforms.
Even better would be if Model Views are shared across platforms in a portable library: 
https://msdn.microsoft.com/en-us/library/hh563947(v=vs.110).aspx
https://msdn.microsoft.com/en-us/library/gg597391(v=vs.110).aspx
Regards,
Douw