The contrast between the colors for the background and the text in the Tooltip of the Chart series is very low (dark background and black text). https://www.screencast.com/t/fhx6937j The problem is most obvious in the Outlook, Simple, Web20 and Sunset skins. Workaround would be setting the Color property for the ToolTipAppearance to White
When you configure RadHtmlChart's YAxis with NarrowRange set to true, the setting is not serialized and as a result, not applied. You can avoid it by setting the narrowRange on the client-side: <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="250px" Height="300px"> <ClientEvents OnLoad="chartLoad" /> ... </telerik:RadHtmlChart> <script> function chartLoad(){ var chart = $telerik.$("#RadHtmlChart1").data("kendoChart"); chart.options.valueAxis.narrowRange = true; } </script>
Workaround use padding instead of margin: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="-4000" /> <telerik:CategorySeriesItem Y="10000" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <LabelsAppearance RotationAngle="45"> <TextStyle Padding="135 0 0 0" /> </LabelsAppearance> <Items> <telerik:AxisItem LabelText="item1" /> <telerik:AxisItem LabelText="item2" /> <telerik:AxisItem LabelText="item3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
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>
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.
If you set in code behind CharTitle with simple Quote like RadChart1.ChartTitle.Text = "Présences sur l'année sélectionnée"; you obtain a blank space chart (nothing display) you have to set for running RadChart1.ChartTitle.Text = "Présences sur l'année sélectionnée";
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>
The workaround is to set <MarkersAppearance Visible="false" />.
Code that reproduces the issue: <telerik:RadHtmlChart runat="server" ID="RadHtmlChartColumnGender" Transitions="true" Width="150" Height="300"> <PlotArea> <Series> <telerik:ColumnSeries Name="Male" Stacked="true" StackType="Stack100"> <SeriesItems> <telerik:CategorySeriesItem Y="69" /> </SeriesItems> </telerik:ColumnSeries> <telerik:ColumnSeries Name="Female" Stacked="true" StackType="Stack100"> <SeriesItems> <telerik:CategorySeriesItem Y="3" /> </SeriesItems> </telerik:ColumnSeries> </Series> <YAxis NarrowRange="false"></YAxis> </PlotArea> </telerik:RadHtmlChart> Workaround: <script> function pageLoad() { var kendoChart = $find("RadHtmlChartColumnGender").get_kendoWidget(); var valueAxis = kendoChart.options.valueAxis; valueAxis.narrowRange = false; $find("RadHtmlChartColumnGender").setOptions({valueAxis: valueAxis}); } </script>
<script> function chartLoad() { $find("RadHtmlChart2").get_kendoWidget().setOptions({ legend: { position: "top", width: 162, height: 88, orientation: "vertical" } }) } </script> <telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Width="350" Height="350"> <ClientEvents OnLoad="chartLoad" /> ... </telerik:RadHtmlChart>