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.
I would like to request a new feature in legend of RadHtmlChart that provide a tool-tip for long names because when I add a long text in legends the size of pie-chart is reduced. Sample code for what I expect to be working : <telerik:RadHtmlChart runat="server" ID="Chart" Height="400px" Width="400px"> <ClientEvents OnLoad="onChartLoad" /> function onChartLoad() { var chart = $find("Chart"); var widget = chart.get_kendoWidget(); widget.options.legend.tooltip = "#: dataItem.columnname #" //Feature Request in this line widget.redraw(); }
Adding a Radar chart type will be a nice improvement in 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>
For the time being you can set the types through the kendoWidget: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find('<%=RadHtmlChart1.ClientID%>'); chart._chartObject.options.series[0].type = "verticalLine"; chart.repaint(); } </script> </telerik:RadCodeBlock> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:LineSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="23000" /> <telerik:CategorySeriesItem Y="10000" /> </SeriesItems> </telerik:LineSeries> </Series> <XAxis> <Items> <telerik:AxisItem LabelText="1" /> <telerik:AxisItem LabelText="2" /> <telerik:AxisItem LabelText="3" /> </Items> </XAxis> </PlotArea> <ChartTitle Text="Product sales for 2011"> </ChartTitle> <Legend> <Appearance Position="Bottom" /> </Legend> </telerik:RadHtmlChart>
The property will control the distance between the corresponding series items.
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.
Hello,
I would like to highlight a GridLine based on a Labelled item when I have implemented skip in the HTML Chart.
Essentially, I have a series of days and would like to step the labels on a weekly basis. At each step I would like to highlight the GridLine associated with the label.
Label position dynamic. I'm currently using "InsideBase", but if those values are so small it's not very visible, so i'd like place those on the outside end.
For the time being the property can be set through the kendo widget: <script type="text/javascript"> function pageLoad() { var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget(); kendoWidget.options.series[0].color = function (e) { if (e.value > 20) { return "red"; } else { return "green"; } } kendoWidget.redraw(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
My objective is to compare product revenue over time. This I would like to achieve using data binding. I do not have information of product names or have the product names as columns. My data table structure is having three columns: Date Product Name Revenue This I should simply be able to achieve using data binding to a table with above three columns. In result I expect each of the Product Names to appear as independent series with revenues plotted on different dates. A similar graph is displayed in the Line Chart documentation for RadHtmlChart. https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/chart-types/line-chart