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>
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>
When using custom shapes (circles, triangles, etc) in a RadHtmlChart, the custom shape should be displayed in the legend instead of always a square. This is because when printing with a black & white printer, the colored squares won't help the reader read the chart, however the shapes would.
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>
A possible workaround: <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> var ExplodeLevel = 0.15; </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="true" 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> <script> var math = Math, dataviz = kendo.dataviz, Box2D = dataviz.Box2D, Point2D = dataviz.Point2D, OUTSIDE_END = "outsideEnd", RIGHT = "right", util = kendo.util, valueOrDefault = util.valueOrDefault; kendo.dataviz.PieChart.fn.reflow = function (targetBox) { var chart = this, options = chart.options, box = targetBox.clone(), space = 5, minWidth = math.min(box.width(), box.height()), halfMinWidth = minWidth / 2, defaultPadding = minWidth - minWidth * 0.85, padding = valueOrDefault(options.padding, defaultPadding), newBox = Box2D(box.x1, box.y1, box.x1 + minWidth, box.y1 + minWidth), newBoxCenter = newBox.center(), seriesConfigs = chart.seriesConfigs || [], boxCenter = box.center(), points = chart.points, count = points.length, seriesCount = options.series.length, leftSideLabels = [], rightSideLabels = [], seriesConfig, seriesIndex, label, segment, sector, r, i, c; padding = padding > halfMinWidth - space ? halfMinWidth - space : padding; newBox.translate(boxCenter.x - newBoxCenter.x, boxCenter.y - newBoxCenter.y); r = halfMinWidth - padding; c = Point2D( r + newBox.x1 + padding, r + newBox.y1 + padding ); for (i = 0; i < count; i++) { segment = points[i]; sector = segment.sector; sector.r = r; sector.c = c; seriesIndex = segment.seriesIx; if (seriesConfigs.length) { seriesConfig = seriesConfigs[seriesIndex]; sector.ir = seriesConfig.ir; sector.r = seriesConfig.r; } if (seriesIndex == seriesCount - 1 && segment.explode) { sector.c = sector.clone().radius(sector.r * ExplodeLevel).point(sector.middle()); } segment.reflow(newBox); label = segment.label; if (label) { if (label.options.position === OUTSIDE_END) { if (seriesIndex == seriesCount - 1) { if (label.orientation === RIGHT) { rightSideLabels.push(label); } else { leftSideLabels.push(label); } } } } } if (leftSideLabels.length > 0) { leftSideLabels.sort(chart.labelComparator(true)); chart.leftLabelsReflow(leftSideLabels); } if (rightSideLabels.length > 0) { rightSideLabels.sort(chart.labelComparator(false)); chart.rightLabelsReflow(rightSideLabels); } chart.box = newBox; }; </script> </form>
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>
RadHtmlChart should allow the usage of indices in the DataFormatString when DateTime values are used: <XAxis Type="Date"> <LabelsAppearance DataFormatString="{0:d}" /> </XAxis>
For the time being the following events can be handled through the chartObject. Select event is fired when the range of the selector from the navigator pane is changed. JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find('<%=RadHtmlChart1.ClientID%>'); chart._chartObject.bind("selectEnd", OnSelectEnd); } function OnSelectEnd(e) { alert("OnSelectEnd triggered: \nFrom: " + e.from + "\n To: " + e.to); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Layout="Stock" Width="800" Height="400" Transitions="true"> <PlotArea> <XAxis Name="mainAxis" DataLabelsField="SellDate" Type="Date"> </XAxis> <Series> <telerik:ColumnSeries DataFieldY="SellQuantity"> </telerik:ColumnSeries> </Series> </PlotArea> <Navigator Visible="true"> <XAxis Name="navAxis"></XAxis> <SelectionHint Visible="true" /> <Series> <telerik:AreaSeries DataFieldY="SellQuantity"> </telerik:AreaSeries> </Series> </Navigator> </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("SellQuantity", typeof(int)); dt.Columns.Add("SellDate", typeof(DateTime)); dt.Rows.Add(1, 2, new DateTime(2011, 06, 12)); dt.Rows.Add(1, 5, new DateTime(2011, 12, 12)); dt.Rows.Add(2, 6, new DateTime(2012, 06, 17)); dt.Rows.Add(3, 4, new DateTime(2012, 09, 18)); dt.Rows.Add(4, 7, new DateTime(2013, 03, 18)); return dt; }
The charts starts to perform zooming when the user pans with one finger in touch devices.
Steps to reproduce:
1. Open the following demo in a touch device (or Chrome simulator)
https://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/pan-zoom/defaultcs.aspx
2. Start panning until the zooming issue occurs
Video: http://somup.com/cr6lo73b73
I have a stacked bar RadHtmlChart that is created programmatically in the code behind. When I create the chart, and set the width to Unit.Pixel(1500), it works fine, as shown in Working.png. However, when I change the value to Unit.Percentage(90), the chart is not rendered properly at all. Any fixes/workarounds for this? Seán For the time being you must set percentage to the chart's wrapper. For example: CSS: <style type="text/css"> html, body, form { padding: 0; margin: 0; height: 100%; overflow: hidden; } .myChart { width: 100% !important; height: 100% !important; } </style> ASPX: <div style="width: 30%; height: 40%; border: 1px solid green;"> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" CssClass="myChart" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="23000" /> <telerik:CategorySeriesItem Y="10000" /> </SeriesItems> </telerik:ColumnSeries> </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> </div>
Problem appers with x-axis if you try to zoom.
Chart without zoom: https://drive.google.com/file/d/1Nem_NctJN5WtzypS8JgZTtIuAARGFQbd/view?usp=sharing
Chart with some zoom: https://drive.google.com/file/d/1TRJZX3FI52YXyuWgB_kpkMTWWXKecVC_/view?usp=sharing
Project included.
For the time being you can resize the chart with set_width/set_height methods. For example: <head runat="server"> <title></title> <style> .RadHtmlChart.k-chart, table { width: 100%; height: 100%; } td { border: 1px solid green; width: 60%; height: 60%; overflow:hidden; } html, body, form { height: 100%; overflow: hidden; margin: 0; } </style> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> function resizedw() { // Haven't resized in 100ms! var donut = $find("<%=DonutChart.ClientID%>"); var radar = $find("<%=RadarAreaChart.ClientID%>"); var docDimensions = $telerik.getBounds(document.body); resizeChart(donut, docDimensions); resizeChart(radar, docDimensions); } function resizeChart(chart, docDimensions) { var chartDimensions = $telerik.getBounds(chart.get_element().parentElement); chart.set_width("'" + (chartDimensions.width / docDimensions.width) + "%'"); chart.set_height(("'" + chartDimensions.height / docDimensions.height) + "'%"); } var doit; window.onresize = function () { clearTimeout(doit); doit = setTimeout(resizedw, 1000); }; </script> <table> <tr> <td> <telerik:RadHtmlChart runat="server" ID="DonutChart" Width="100%" Height="100%" 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> </td> <td> <telerik:RadHtmlChart runat="server" ID="RadarAreaChart" Width="100%" Height="100%" Transitions="true"> <PlotArea> <Series> <telerik:RadarAreaSeries Name="Position" MissingValues="Gap"> <Appearance> <FillStyle BackgroundColor="#00adcc"></FillStyle> </Appearance> <LineAppearance Width="1" /> <MarkersAppearance Visible="false" /> <LabelsAppearance Visible="false"></LabelsAppearance> <SeriesItems> <telerik:CategorySeriesItem Y="159"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="170"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="100"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="140"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="160"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="103"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="173"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="107"></telerik:CategorySeriesItem> </SeriesItems> </telerik:RadarAreaSeries> <telerik:RadarAreaSeries Name="Person" MissingValues="Gap"> <Appearance> <FillStyle BackgroundColor="red"></FillStyle> </Appearance> <LabelsAppearance Visible="false"> </LabelsAppearance> <LineAppearance Width="1" /> <MarkersAppearance Visible="false"></MarkersAppearance> <SeriesItems> <telerik:CategorySeriesItem Y="130"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="160"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="130"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="168"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="150"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="140"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="109"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="76"></telerik:CategorySeriesItem> </SeriesItems> </telerik:RadarAreaSeries> </Series> <XAxis Color="Black" Reversed="false" StartAngle="180"> <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines> <MinorGridLines Visible="false"></MinorGridLines> <Items> <telerik:AxisItem LabelText="Soft Skills"></telerik:AxisItem> <telerik:AxisItem LabelText="Sector knowledge"></telerik:AxisItem> <telerik:AxisItem LabelText="Finance knowledge"></telerik:AxisItem> <telerik:AxisItem LabelText="Work experience"></telerik:AxisItem> <telerik:AxisItem LabelText="Win7 skills"></telerik:AxisItem> <telerik:AxisItem LabelText="MS Office skills"></telerik:AxisItem> <telerik:AxisItem LabelText="Programming skills"></telerik:AxisItem> <telerik:AxisItem LabelText="Database skills"></telerik:AxisItem> </Items> </XAxis> <YAxis Visible="false"> <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines> <MinorGridLines Visible="false"></MinorGridLines> <LabelsAppearance Step="1"></LabelsAppearance> </YAxis> <CommonTooltipsAppearance Color="White"></CommonTooltipsAppearance> </PlotArea> <ChartTitle Text="Position Profile"> <Appearance Align="Center" BackgroundColor="White" Position="Top"> </Appearance> </ChartTitle> <Legend> <Appearance BackgroundColor="White" Position="Bottom"> </Appearance> </Legend> </telerik:RadHtmlChart> </td> </tr> </table> </form>
For the time being you can use the following workaround: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> function pageLoad() { var position = 'insideEnd'; // 'center' $find("<%=PieChart1.ClientID%>")._chartObject.options.series[0].labels.position = position; $find("<%=PieChart1.ClientID%>")._chartObject.options.series[0].labels.distance = -20; $find("<%=PieChart1.ClientID%>")._chartObject.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true"> <PlotArea> <Series> <telerik:PieSeries StartAngle="90"> <LabelsAppearance DataFormatString="{0} %" /> <TooltipsAppearance DataFormatString="{0} %" /> <Items> <telerik:SeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" YValue="18.3" /> <telerik:SeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" YValue="35.8" /> <telerik:SeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" YValue="38.3" /> <telerik:SeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" YValue="4.5" /> <telerik:SeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" YValue="2.3" /> </Items> </telerik:PieSeries> </Series> </PlotArea> <ChartTitle Text="Browser Usage for April 2012"> </ChartTitle> </telerik:RadHtmlChart> <script> var INSIDE_END = "insideEnd", CENTER = "center", LEFT = "left", RIGHT = "right", dataviz = kendo.dataviz, Box2D = dataviz.Box2D, math = Math; kendo.dataviz.PieSegment.fn.reflowLabel = function () { var segment = this, sector = segment.sector.clone(), options = segment.options, label = segment.label, labelsOptions = options.labels, labelsDistance = labelsOptions.distance, angle = sector.middle(), lp, x1, labelWidth, labelHeight; if (label) { labelHeight = label.box.height(); labelWidth = label.box.width(); if (labelsOptions.position == CENTER) { sector.r = math.abs((sector.r - labelHeight) / 2) + labelHeight + labelsDistance; lp = sector.point(angle); label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y)); } else if (labelsOptions.position == INSIDE_END) { sector.r = sector.r - labelHeight / 2 + labelsDistance; lp = sector.point(angle); label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y)); } else { lp = sector.clone().expand(labelsDistance).point(angle); if (lp.x >= sector.c.x) { x1 = lp.x + labelWidth; label.orientation = RIGHT; } else { x1 = lp.x - labelWidth; label.orientation = LEFT; } label.reflow(Box2D(x1, lp.y - labelHeight, lp.x, lp.y)); } } } </script>
I would like to suggest ability to display data series in doughnut and pie charts, see attached example from Excel. And thanks for a great Telerik experience, you make my development work very easy.
Currently labels for SeriesItems having Y of 0 are not displayed in PieSeries and DonutSeries due to visual considerations. Improve the handling of such labels.
A visual example - http://i.stack.imgur.com/zRwlo.jpg The feature will be useful for projects that need 508 compliance. A boolean properties will also be useful: "EnabledTexturedFill", "EnableColorAndTexturedFill"
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.