The event should be similar to OnClientSeriesClicked event. It should expose information about the clicked series.
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.
Adding a Radar chart type will be a nice improvement in RadHtmlChart.
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(); }
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!
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>
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 :-(
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>
Tooltips of points between series points See: http://screencast.com/t/Q7FYJxkouLA
Set tooltips of points between series points - http://screencast.com/t/Q7FYJxkouLA
Axes themselves do not have tooltips, only series do. Thus, tooltips cannot be added to the y-axis. Add
Width and height properties for the legend that will provide firm dimensions in pixels, so regardless of the series names' length, it will always have constant size. You can set width and height through the kendo widget: <script> function pageLoad() { var chart = $find("<%=DonutChart.ClientID%>").get_kendoWidget(); chart.options.legend.height = 80; chart.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="DonutChart" Width="500" Height="500" 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>
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.
In RadHtmlChart there is no property to specify Width for Bar/Column series. It automatically calculates series width based on chart width, number of series, number of items within series, gap and spacing, etc., If there is more than one bar/column chart in single page, there is no way to show Bar/Column series of exact width in all chart to make page consistent.