Test Environment:
OS: Windows_11Browser: Version 103.0.1264.71 (Official Build) (64-bit)
Voice access: Voice Access
Repro Steps:
1. Open URL: https://docs.telerik.com/devtools/aspnet-ajax/controls/chart/understanding-radchart-types/bar-charts page in Edge Browser.
2. Navigate the Graph under the Bar chart section.
3. Observe that Voice Access Numbers are not showing for bar graphs in reports.
Actual Results:
Voice Access Numbers are not showing for bar graphs.
Expected Results:
Voice Access Numbers should be showing for bar graphs.
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
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.
Hi, MissingValue set to Gap or Zero doesn't work in RadHtmlChart with ScatterLineSeries. Interpolation is done instead. <telerik:RadHtmlChart runat="server"> <PlotArea> <Series> <telerik:ScatterLineSeries Name="Test" DataFieldX="XValue" DataFieldY="YValue" MissingValues="Gap"> <SeriesItems> <telerik:ScatterSeriesItem X="1" Y="8" /> <telerik:ScatterSeriesItem X="2" Y="9" /> <telerik:ScatterSeriesItem X="3" Y="4" /> <telerik:ScatterSeriesItem X="4" Y="6" /> <telerik:ScatterSeriesItem X="5" Y="7" /> <telerik:ScatterSeriesItem X="8" Y="1" /> <telerik:ScatterSeriesItem X="9" Y="5" /> <telerik:ScatterSeriesItem X="10" Y="4" /> </SeriesItems> </telerik:ScatterLineSeries> </Series> </PlotArea> </telerik:RadHtmlChart> The workaround described in the following link doesn't work either : https://feedback.telerik.com/Project/108/Feedback/Details/44399-fix-the-functionality-of-the-missingvalue-property-when-set-to-gap-in-areaserie Can you please fix this bug ? Thanks and regards.
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
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>
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";
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>
<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>
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>
For the time being you can use the following JavaScript workaround: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300"> <PlotArea> <Series> <telerik:LineSeries Name="series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="25" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:LineSeries> </Series> <XAxis MinValue="1"> </XAxis> </PlotArea> </telerik:RadHtmlChart> <script> //JavaScript workaround function isNumber(val) { return typeof val === "number" && !isNaN(val); } var dataviz = kendo.dataviz, inArray = dataviz.inArray, deepExtend = kendo.deepExtend, math = Math, AREA = "area", VERTICAL_AREA = "verticalArea", VERTICAL_LINE = "verticalLine", LINE = "line"; kendo.dataviz.CategoricalPlotArea.fn.filterSeries = function (currentSeries, categoryAxis) { var range = categoryAxis.totalRangeIndices(); var justified = categoryAxis.options.justified; var outOfRangePoints = inArray(currentSeries.type, [LINE, VERTICAL_LINE, AREA, VERTICAL_AREA]); var categoryIx; range.min = isNumber(categoryAxis.options.min) ? math.floor(range.min) : 0; range.max = isNumber(categoryAxis.options.max) ? (justified ? math.floor(range.max) + 1 : math.ceil(range.max)) : currentSeries.data.length; currentSeries = deepExtend({}, currentSeries); if (outOfRangePoints) { var minCategory = range.min - 1; var srcCategories = categoryAxis.options.srcCategories || []; if (minCategory >= 0 && minCategory < currentSeries.data.length) { categoryIx = minCategory; currentSeries._outOfRangeMinPoint = { item: currentSeries.data[categoryIx], category: srcCategories[categoryIx], categoryIx: -1 }; } if (range.max < currentSeries.data.length) { categoryIx = range.max; currentSeries._outOfRangeMaxPoint = { item: currentSeries.data[categoryIx], category: srcCategories[categoryIx], categoryIx: range.max - range.min }; } } categoryAxis._seriesMax = math.max(categoryAxis._seriesMax || 0, currentSeries.data.length); currentSeries.data = (currentSeries.data || []).slice(range.min, range.max); return currentSeries; } </script>
For the time being the reversed properties can be set through the kendo widget: <script> function pageLoad(sender, args) { var radarChart = $find('<%=RadarLineChart.ClientID%>').get_kendoWidget(); var polarChart = $find('<%=PolarAreaChart.ClientID%>').get_kendoWidget(); radarChart.options.valueAxis.reverse = true; polarChart.options.yAxis.reverse = true; radarChart.options.categoryAxis.reverse = true; polarChart.options.xAxis.reverse = true; radarChart.redraw(); polarChart.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="RadarLineChart" Width="345" Height="345"> <PlotArea> <XAxis Reversed="true"> <Items> <telerik:AxisItem LabelText="January"></telerik:AxisItem> <telerik:AxisItem LabelText="February"></telerik:AxisItem> <telerik:AxisItem LabelText="March"></telerik:AxisItem> <telerik:AxisItem LabelText="April"></telerik:AxisItem> <telerik:AxisItem LabelText="May"></telerik:AxisItem> </Items> </XAxis> <YAxis Reversed="true"> </YAxis> <Series> <telerik:RadarLineSeries Name="Avg Low" MissingValues="Gap"> <SeriesItems> <telerik:CategorySeriesItem Y="1000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="8000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="11000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="13000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="12000"></telerik:CategorySeriesItem> </SeriesItems> </telerik:RadarLineSeries> </Series> </PlotArea> </telerik:RadHtmlChart> <telerik:RadHtmlChart runat="server" ID="PolarAreaChart" Width="345" Height="345"> <PlotArea> <XAxis Reversed="true"> </XAxis> <YAxis Reversed="true"> </YAxis> <Series> <telerik:PolarAreaSeries Name=">12.3 knots"> <SeriesItems> <telerik:PolarSeriesItem Angle="125" Radius="2.4"></telerik:PolarSeriesItem> <telerik:PolarSeriesItem Angle="138" Radius="7.5"></telerik:PolarSeriesItem> <telerik:PolarSeriesItem Angle="152" Radius="8.3"></telerik:PolarSeriesItem> <telerik:PolarSeriesItem Angle="166" Radius="4.3"></telerik:PolarSeriesItem> </SeriesItems> </telerik:PolarAreaSeries> </Series> </PlotArea> </telerik:RadHtmlChart>