Completed
Last Updated: 02 Mar 2022 12:11 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
1
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>
Completed
Last Updated: 14 Feb 2014 07:32 by ADMIN
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;
    }

Completed
Last Updated: 03 Sep 2015 05:23 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
1

			
Completed
Last Updated: 27 Feb 2015 06:51 by ADMIN
Completed
Last Updated: 17 Feb 2016 07:34 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
1
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>
Won't Fix
Last Updated: 30 Apr 2015 12:33 by Elena
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>
Completed
Last Updated: 02 Mar 2022 13:29 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 3
Category: HtmlChart
Type: Feature Request
1
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>
Completed
Last Updated: 19 Apr 2022 17:58 by ADMIN
Declined
Last Updated: 26 Apr 2022 14:57 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 2
Category: HtmlChart
Type: Feature Request
1

			
Completed
Last Updated: 01 Aug 2016 10:24 by ADMIN
ADMIN
Created by: Telerik Admin
Comments: 2
Category: HtmlChart
Type: Feature Request
1
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.
Completed
Last Updated: 20 Feb 2015 17:22 by ADMIN
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;
    }
Declined
Last Updated: 28 Jul 2016 13:37 by ADMIN
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,
Completed
Last Updated: 27 Feb 2015 10:14 by ADMIN
Completed
Last Updated: 29 Jan 2016 08:13 by Michael
Declined
Last Updated: 10 Jun 2014 10:24 by ADMIN
Created by: Michael
Comments: 2
Category: HtmlChart
Type: Feature Request
1
Add this functionality out of the box to navigator.
The functionality  made by these buttons(+/-)
 are more gentle that the navigator.
Declined
Last Updated: 20 Jun 2014 13:48 by ADMIN
Completed
Last Updated: 16 Sep 2020 16:53 by ADMIN
Release R3 2020
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
1
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>
Completed
Last Updated: 21 Apr 2015 13:24 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 2
Category: HtmlChart
Type: Bug Report
1
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>
Declined
Last Updated: 29 Jul 2016 11:40 by ADMIN
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.