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>
A nice improvement in RadHtmlChart will be the ability to control the speed of chart's transitions.
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 :-(
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.
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>
If the type of the XAxis is category the field from the data source used for the XAxis must not be tried to be parsed to DateTime format. For the time being the issue can be workaround as follows: -Either set an appropriate DataFormatString for the XAxis labels. For example: <telerik:RadHtmlChart ID="ColumnChart" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries DataFieldY="yValues"> </telerik:ColumnSeries> </Series> <XAxis DataLabelsField="xLabels" Type="category"> <LabelsAppearance DataFormatString="d - MM"></LabelsAppearance> </XAxis> </PlotArea> </telerik:RadHtmlChart> - OR add the XAxis items manually from the data source: ASPX: <telerik:RadHtmlChart ID="ColumnChart" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries DataFieldY="yValues"> </telerik:ColumnSeries> </Series> <XAxis DataLabelsField="xLabels" Type="category"> <LabelsAppearance></LabelsAppearance> </XAxis> </PlotArea> </telerik:RadHtmlChart> C#: protected void Page_Load(object sender, EventArgs e) { ColumnChart.DataSource = GetData(); ColumnChart.DataBind(); DataTable currDT = GetData(); for (int i = 0; i < currDT.Rows.Count; i++) { AxisItem currItem = new AxisItem(currDT.Rows[i]["xLabels"].ToString()); ColumnChart.PlotArea.XAxis.Items.Add(currItem); } } protected DataTable GetData() { DataTable dt = new DataTable(); dt.Columns.Add("yValues"); dt.Columns.Add("xLabels"); dt.Rows.Add(10, "1 - 10"); dt.Rows.Add(30, "2 - 11"); dt.Rows.Add(20, "3 - 12"); return dt; }
It would be great to be able to specify more layout properties via the data bound data. For example, if we could bind a property in the data to a series type we could generate different series on the fly. This is important to me as I want to make the page as responsive as possible, so all charts load on demand - but as the data is generated in an asynchronous fashion, I'm not able to predetermine how many series I can create.
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>
The workaround is to set <MarkersAppearance Visible="false" />.
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>
When an item's value is equal to zero in a Bar or Column series,, its labels is not shown.
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!
Currently the RadHtmlChart can be bound to a single data source. Add the ability to bind each series to a single data source.
A good improvement in RadHtmlChart would be the introduction of Waterfall series.
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>
RadHtmlChart should allow the usage of indices in the DataFormatString when DateTime values are used: <XAxis Type="Date"> <LabelsAppearance DataFormatString="{0:d}" /> </XAxis>