Is there any plans to add a Server Side series click event in RadHTMLChart? Currently it is only available via the Client side.

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 

The current implementation of RadHtmlChart explicitly specifies font-family and font-size settings on the server-side, which are then serialized and used by the Kendo widget, so the skin-specific settings are ignored.

For example, the Material skin should define a "Roboto" font-family, but this is overriden by "Arial" in the final serialization, so the skin configuration does not have any effect.

The default values of the server-side font settings can be removed in order to allow such customization and can be defined in the skins file instead.

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>

For the time being the following workaround can be used:
JavaScript:
	<script>
		function pageLoad() {
			var pieChart = $find('<%=PieChart1.ClientID%>');
			pieChart._chartObject.options.seriesDefaults.labels.distance = 10;
			pieChart.repaint();
		}
	</script>
ASPX:
		<telerik:RadHtmlChart runat="server" ID="PieChart1" Width="300" Height="300">
			<PlotArea>
				<Series>
					<telerik:PieSeries>
						<SeriesItems>
							<telerik:PieSeriesItem Name="Item 1" Y="18.3"></telerik:PieSeriesItem>
							<telerik:PieSeriesItem Name="Item 2" Y="35.8"></telerik:PieSeriesItem>
							<telerik:PieSeriesItem Name="Item 3" Y="38.3"></telerik:PieSeriesItem>
						</SeriesItems>
					</telerik:PieSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>

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>

When an item's value is equal to zero in a Bar or Column series,, its labels is not shown.

A good improvement in RadHtmlChart would be the introduction of Waterfall series.

For the time being the property (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-legend.border) can be set through the chartObject. For example:
JavaScript:
	<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
		<script>
			function pageLoad() {
				var chart = $find("<%=PieChart1.ClientID%>");
				chart._chartObject.options.legend.border = { width: 2, color: "green", dashType: "longDashDotDot" }
				chart.repaint();
			}
		</script>
	</telerik:RadCodeBlock>
ASPX:
		<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>

Currently BaseUnit property for DateAxes in RadHtmlChart accepts the following values - year, months, days, hours and minutes. Improve this property by adding seconds, weeks and auto.

I know that does not support RADHTMLCHART Marked Zone. But somehow I need to make a mark, for example in the SeriesLine that Saturdays and Sundays this line with another color.
I leave a picture so you can understand.
I need the part or series values Y  Vier and Sab will be anothe color. for examples both series at orange color.

I thank you for the attention.
regards

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.

For the time being the properties can be set through the chartObject. For example:

ASPX:

        <script>
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                chart._chartObject.options.valueAxis.max = 100;
                chart._chartObject.options.valueAxis.min = 10;
                chart.repaint();
            }
        </script>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
            <PlotArea>
                <Series>
                    <telerik:RadarColumnSeries DataFieldY="yValues">
                    </telerik:RadarColumnSeries>
                </Series>
                <XAxis DataLabelsField="xValues"></XAxis>
                <YAxis MinValue="10" MaxValue="100"></YAxis>
            </PlotArea>
        </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("yValues", typeof(int));
        dt.Columns.Add("xValues", typeof(string));

        dt.Rows.Add(1, 12, 20);
        dt.Rows.Add(2, 15, 40);
        dt.Rows.Add(3, 16, 60);
        dt.Rows.Add(4, 14, 80);
        dt.Rows.Add(5, 17, 100);

        return dt;
    }

1.Today: When vertical axis are out of navigator range from to
they are seen.
2.Suggtion: Give option to programmer to choose if to show or hide.
3.The same idea for plot bands,