Similar to the feature in RadChart - http://demos.telerik.com/aspnet-ajax/chart/examples/newfeatures/logarithmicaxis/defaultcs.aspx. For the time being the following workaround can be used: ASPX: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.valueAxis.type = "log"; chart.repaint(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <YAxis></YAxis> <Series> <telerik:ColumnSeries> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart> C#: protected void Page_Load(object sender, EventArgs e) { double[] yValues = new double[] { 0.01, 0.05, 0.11, 2, 2.5, 10, 30 }; for (int i = 0; i < yValues.Length; i++) { CategorySeriesItem csi1 = new CategorySeriesItem() { Y = (decimal)yValues[i] }; (RadHtmlChart1.PlotArea.Series[0] as ColumnSeries).SeriesItems.Add(csi1); } }
Currenlty Series like Bubble, Bar, Column, Donut, Pie and Candlestick do not expose any appearance properties for the Series border. Expose appearance border properties like width, dashtype, color and opacity. Temporary workaround for managing the border appearance: Javascript: <script language="javascript"> function pageLoad() { var chart = $find("RadHtmlChart1"); chart._chartObject.options.series[0].border = { width: 2, color: "black", dashType: "dash", opacity: 0.2 } chart.repaint(); } </script> ASPX: <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>
A good improvement in the RadHtmlChart would be to add an Opacity property for the series, which would allow the control of its transparency. The property can be set through the chartObject: JavaScript: <script> function pageLoad() { var chart = $find("<%=BubbleChart.ClientID%>"); chart._chartObject.options.series[0].opacity = 0.3; chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400"> <PlotArea> <Series> <telerik:BubbleSeries> <Appearance FillStyle-BackgroundColor="#6ab2c9"> </Appearance> <SeriesItems> <telerik:BubbleSeriesItem Size="3" X="5" Y="5500" /> <telerik:BubbleSeriesItem Size="12" X="14" Y="12200" /> <telerik:BubbleSeriesItem Size="33" X="20" Y="39000" /> <telerik:BubbleSeriesItem Size="10" X="18" Y="24400" /> <telerik:BubbleSeriesItem Size="42" X="20" Y="32000" /> </SeriesItems> </telerik:BubbleSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
Stacking of bar and column series should allow grouping. This could be done by making the Stacked property not a boolean, but a string to denote the group name.
In a chart that has stacked bar series and a line series the bar series become column series when the chart is data-bound. The solution is to declare the BarSeries above the LineSeries as follows: <%--BarSeries are declared above the LineSeries--%> <telerik:BarSeries Name="B1"> <Items> <telerik:SeriesItem YValue="10" /> <telerik:SeriesItem YValue="20" /> <telerik:SeriesItem YValue="30" /> </Items> </telerik:BarSeries> <%--LineSeries are declared below the BarSeries--%> <telerik:LineSeries Name="L1"> <Items> <telerik:SeriesItem YValue="15" /> <telerik:SeriesItem YValue="10" /> <telerik:SeriesItem YValue="20" /> </Items> </telerik:LineSeries>
This can be done by exposing a spacing property for the particular Series. For the time being mentioned properties can be set on the client through the chartObject of the RadHtmlChart: JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script type="text/javascript"> function ChangeSpace() { var chart = $find("<%=ColumnChart.ClientID%>"); chart._chartObject.options.series[0].spacing = 0.9; chart.repaint(); } function ChangeGap() { var chart = $find("<%=ColumnChart.ClientID%>"); chart._chartObject.options.series[0].gap = 10; chart.repaint(); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="Change Space" OnClientClicked="ChangeSpace" /> <telerik:RadButton ID="RadButton2" runat="server" AutoPostBack="false" Text="Change Gap" OnClientClicked="ChangeGap" /> <telerik:RadHtmlChart runat="server" ID="ColumnChart" Transitions="true"> .... </telerik:RadHtmlChart>
For the time being the property can be set on the client through the chartObject. For example: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.series[0].highlight = { markers: { visible: true } } chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:LineSeries> <MarkersAppearance Visible="false" /> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> <telerik:CategorySeriesItem Y="15" /> </SeriesItems> </telerik:LineSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
As of R1 2017 you can use the stackTotal property of the labels: https://docs.telerik.com/kendo-ui/controls/charts/how-to/various/show-stack-total --- old information For the time being this can be achieved by creating an additional bar/column series with the following settings: -series items are set with insignificantly small values (e.g. 0.001) -the name property of the series is not specified, so that it is not visible in the legend -the color of the series matches the color of the plot area, so that the series items and the legend of the series are not visible -clienttemplates for the labels of this series is used in order to sum up the grand total and display it An example on the described scenario can be found in the http://www.telerik.com/support/kb/aspnet-ajax/chart-%28html5%29/details/displaying-grand-total-in-stacked-series-labels-and-pie-series-legend KB article
Currently BarSeries/ColumnSeries are rendered like a "glass" gradient and PieSeries/DonutSeries like a "roundedBevel" gradient. Expose an OverlayGradient property that lets you control the gradient (e.g. "glass", "roundedBevel", "sharpBevel", "none"). For the time being the properties can be set through the chartObject: JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart1 = $find("<%=ColumnChart1.ClientID%>"); //Set glass gradient to first series chart1._chartObject.options.series[0].overlay = { gradient: "glass" }; //Remove gradient from second series chart1._chartObject.options.series[1].overlay = { gradient: "none" }; chart1.repaint(); var chart2 = $find("<%=PieChart1.ClientID%>"); //Set sharpBevel gradient to pie series chart2._chartObject.options.series[0].overlay = { gradient: "sharpBevel" }; chart2.repaint(); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Transitions="true"> <PlotArea> <Series> <telerik:ColumnSeries Name="Series with Gradient"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="23000" /> <telerik:CategorySeriesItem Y="10000" /> <telerik:CategorySeriesItem Y="16000" /> </SeriesItems> </telerik:ColumnSeries> <telerik:ColumnSeries Name="Series with no Gradient"> <SeriesItems> <telerik:CategorySeriesItem Y="35000" /> <telerik:CategorySeriesItem Y="10000" /> <telerik:CategorySeriesItem Y="20000" /> <telerik:CategorySeriesItem Y="17000" /> </SeriesItems> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart> <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="450px" Height="450px"> <PlotArea> <Series> <telerik:PieSeries StartAngle="90"> <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="Pie with Gradient"> </ChartTitle> </telerik:RadHtmlChart>
Currently tooltips expose properties for changing the background color, format and visibility. Add more appearance options like color (Color property is already exposed), font, border width, border color and padding. For the time being the following workaround can be used: <style type="text/css"> .k-tooltip { /*Sets border width and color*/ border-width: 5px !important; border-color: Green !important; /*Sets padding*/ padding-left: 5px !important; padding-right: 5px !important; /*Sets FontSize, FontFamily and color*/ font: 15px Arial,Helvetica,sans-serif !important; color: Red !important; } </style>
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.
For the time being series can be stacked through the chartObject. For example: JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find("<%=AreaChart.ClientID%>"); chart._chartObject.options.seriesDefaults.stack = true; chart.repaint(); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadHtmlChart runat="server" ID="AreaChart" Width="800" Height="500" Transitions="true"> <PlotArea> <Series> <telerik:AreaSeries Name="Sales" MissingValues="Gap"> <SeriesItems> <telerik:CategorySeriesItem Y="400" /> <telerik:CategorySeriesItem Y="500" /> <telerik:CategorySeriesItem Y="720" /> <telerik:CategorySeriesItem Y="1300" /> <telerik:CategorySeriesItem Y="450" /> <telerik:CategorySeriesItem Y="800" /> <telerik:CategorySeriesItem Y="900" /> </SeriesItems> </telerik:AreaSeries> <telerik:AreaSeries Name="Expenses" MissingValues="Gap"> <SeriesItems> <telerik:CategorySeriesItem Y="700" /> <telerik:CategorySeriesItem Y="900" /> <telerik:CategorySeriesItem Y="420" /> <telerik:CategorySeriesItem Y="1100" /> <telerik:CategorySeriesItem Y="650" /> <telerik:CategorySeriesItem Y="600" /> <telerik:CategorySeriesItem Y="700" /> </SeriesItems> </telerik:AreaSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
Currently when LineSeries Item's YValue is smaller than the BarSeries/ColumnSeries Item's value and both Series Items share the same category, the BarSeries/ColumnSeries Item is the one that receives the mouseover event, so only the bar/column item tooltip is shown. It is not possible to hover over the marker for the LineSeries and trigger client-side event handlers or show its tooltip. The LineSeries can be hovered/clicked only outside of the area of the Bar/Column Item.
For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.series[0].missingValues = "Gap"; chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"> <PlotArea> <Series> <telerik:LineSeries MissingValues="Gap"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem /> <telerik:CategorySeriesItem Y="30" /> </SeriesItems> </telerik:LineSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
For example by exposing an additional width property.
Currently there are only three properties exposed by the MarkersAppearance - MarkersType, BackgroundColor and Visible in AreaSeries, LineSeries, ScatterSeries and ScatterLineSeries. Expose more properties like Size, BorderColor and BorderWidth for the markers in the mentioned Series. For the time being the following workaround can be used: function pageLoad() { var circle = document.getElementsByTagName("circle"); for (var i = 0; i < circle.length; i++) { //Modify the size of the marker circle[i].r.baseVal.value = 15; } //Modify the width of the marker border $telerik.$('circle').attr('stroke-width', 13); }
Similar to the SplineArea in RadChart: http://www.telerik.com/help/aspnet-ajax/chart-types-spline-area.html
Your html charts are coming along beautifully - Just want more! Particularly a Spline chart - ideally to add as option for combination charts. This could also work as a Pareto chart.
Currently LineSeries, ScatterSeries and ScatterLineSeries expose MarkersType property that gets only three values - Circle, Square and Triangle. Add the ability to set custom images as markers as well.
Currently a long legend in RadHtmlChart overflows the PlotArea under IE, while in the rest browsers it is cut. The workaround is to hide the legend and create a custom one in a styled div (e.g. KendoUI demonstrates such an example here - http://demos.kendoui.com/dataviz/bubble-charts/index.html)