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>
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; }
For the time being the following workaround can be used: Category Axis: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.categoryAxis.labels.template = "Item: #=value#"; 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> <XAxis> <Items> <telerik:AxisItem LabelText="1" /> <telerik:AxisItem LabelText="2" /> <telerik:AxisItem LabelText="3" /> <telerik:AxisItem LabelText="4" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart> Numeric Axis: <script> function changeValues(value) { var newValue; switch (value) { case 1: newValue = "AA"; break; case 2: newValue = "BB"; break; case 3: newValue = "CC"; break; case 4: newValue = "DD"; break; default: newValue = value; } return newValue; } function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.xAxis.labels.template = "#=changeValues(value)#"; chart.repaint(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300"> <PlotArea> <Series> <telerik:ScatterLineSeries Name="series 1"> <SeriesItems> <telerik:ScatterSeriesItem Y="30" X="1" /> <telerik:ScatterSeriesItem Y="10" X="2" /> <telerik:ScatterSeriesItem Y="25" X="3" /> <telerik:ScatterSeriesItem Y="20" X="4" /> </SeriesItems> </telerik:ScatterLineSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
For the time being the following workaround can be used: <style> .k-chart .k-tooltip, .k-sparkline .k-tooltip, .k-stockchart .k-tooltip { background-image: url("//:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNJREFUeNpi/P//vwMDFQELEP8beQb+HTWQYgP/DHoD/466cAR4edRAyg38P6hLbIAAAwCnWhhVsxvdCAAAAABJRU5ErkJggg==") !important; } </style>
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>
We are trying to convert a websites 11 year old controls from a different vendor to telerik. All of the controls have been replaced except for the RadHtmlChart, which has limited customization of the legend. Specifically we have the following issues: 1) The legend color squares are too small. You can see the difference in the attachment "competitor" vs "telerik". REQUEST: Set the size of the color squares. 2) The legend spacing between items is not customizable and is too compressed for our liking. See "competitor" vs "telerik" to see the difference. REQUEST: Allow padding or margin between legend items. 3) The legend size cannot be set to a fixed width. For a left aligned legend, this results in multiple charts having inconsistent alignment. Setting a different margin for each chart individually does not fix the problem. Depending on the data fed to the charts, their position changes. See the "multiple-charts" attachment for an example. REQUEST: Allow a fixed legend size so multiple charts can be aligned. 4) For left-aligned charts, the legend cannot be set to the top. REQUEST: Allow TopLeft, TopRight options for legend alignment. Thank you, David A.
For the time being the properties can be set through the chartObject. For example: ASPX: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.valueAxis.max = 100; chart._chartObject.options.valueAxis.min = 10; chart.repaint(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"> <PlotArea> <Series> <telerik:RadarColumnSeries DataFieldY="yValues"> </telerik:RadarColumnSeries> </Series> <XAxis DataLabelsField="xValues"></XAxis> <YAxis MinValue="10" MaxValue="100"></YAxis> </PlotArea> </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("yValues", typeof(int)); dt.Columns.Add("xValues", typeof(string)); dt.Rows.Add(1, 12, 20); dt.Rows.Add(2, 15, 40); dt.Rows.Add(3, 16, 60); dt.Rows.Add(4, 14, 80); dt.Rows.Add(5, 17, 100); return dt; }
1.Today: When vertical axis are out of navigator range from to they are seen. 2.Suggtion: Give option to programmer to choose if to show or hide. 3.The same idea for plot bands,
Add this functionality out of the box to navigator. The functionality made by these buttons(+/-) are more gentle that the navigator.
For the time being the property can be set through the chartObject. For example: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); //DashType: dash, dashDot, dot, longDash, longDashDot, longDashDotDot, solid chart._chartObject.options.categoryAxis.majorGridLines.dashType = "dot"; chart._chartObject.options.categoryAxis.minorGridLines.dashType = "dot"; chart._chartObject.options.valueAxis.majorGridLines.dashType = "dot"; chart._chartObject.options.valueAxis.minorGridLines.dashType = "dot"; chart.repaint(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:LineSeries Name="Series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:LineSeries> </Series> <XAxis> <Items> <telerik:AxisItem LabelText="item 1" /> <telerik:AxisItem LabelText="item 2" /> <telerik:AxisItem LabelText="item 3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
Issue will be fixed for Q3 2014 release. For the time being you can manually set color to the selection hint: CSS: <style> .k-chart .k-navigator-hint .k-tooltip { color: black; } </style>
When the data passed to the RadHtmlChart with "stock" layout presents the highest and lowest base units, you must scroll the mouse wheel in order to navigate to the smallest base units. This issue can be handled for example by exposing a scroller in the navigator that let you select smaller date ranges.