Declined
Last Updated: 24 Jun 2022 11:29 by ADMIN
The current implementation of RadHtmlChart explicitly specifies font-family and font-size settings on the server-side, which are then serialized and used by the Kendo widget, so the skin-specific settings are ignored.

For example, the Material skin should define a "Roboto" font-family, but this is overriden by "Arial" in the final serialization, so the skin configuration does not have any effect.

The default values of the server-side font settings can be removed in order to allow such customization and can be defined in the skins file instead.
Completed
Last Updated: 29 Apr 2022 14:24 by ADMIN
Release R2 2022
ADMIN
Created by: Danail Vasilev
Comments: 4
Category: HtmlChart
Type: Feature Request
6
The functionality is similar to the one in Kendo UI Chart (http://demos.telerik.com/kendo-ui/dataviz/line-charts/notes.html) :
http://dojo.telerik.com/OZuNU

For the time being you can try to utilize the kendo.drawing API in order to place the text on a particular position.  This forum may be helpful on the matter - http://www.telerik.com/forums/custom-drawing#sOkmYWbfrUW404Rr13eLDQ
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: 26 Apr 2022 13:31 by ADMIN
Release R2 2022
Created by: Stan
Comments: 0
Category: HtmlChart
Type: Feature Request
0

Currently, the HighlightAppearance of the Series does not have a property that controls the InactiveOpacity:

As a temporary workaround, this can be set through the options in the OnKendoWidgetInitializing event:

<script>
    function OnKendoWidgetInitializing(sender, args) {
        var series = args.series[0]
        series.highlight = series.highlight || {};
        series.highlight.inactiveOpacity = 0.2
    }
</script>
<telerik:RadHtmlChart ID="RadHtmlChart5" runat="server" BorderColor="Fuchsia" BorderStyle="Solid" BorderWidth="1px">
    <ClientEvents OnKendoWidgetInitializing="OnKendoWidgetInitializing" />
    <PlotArea>

        <Series>
            <telerik:PieSeries StartAngle="90">
                <%-- This is how it should be configured after the feature request --%>
                <%--<HighlightAppearance InactiveOpacity="0.2" />--%>

                <SeriesItems>
                    <telerik:PieSeriesItem Name="Slice1" Y="60"></telerik:PieSeriesItem>
                    <telerik:PieSeriesItem Name="Slice2" Y="40"></telerik:PieSeriesItem>
                </SeriesItems>
            </telerik:PieSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

Completed
Last Updated: 20 Apr 2022 16:11 by ADMIN
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>
Completed
Last Updated: 19 Apr 2022 17:58 by ADMIN
Completed
Last Updated: 19 Apr 2022 17:20 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 3
Category: HtmlChart
Type: Feature Request
6
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>
Completed
Last Updated: 11 Apr 2022 08:08 by ADMIN
Created by: msigman
Comments: 8
Category: HtmlChart
Type: Feature Request
14
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.
Unplanned
Last Updated: 06 Apr 2022 13:37 by ADMIN
ADMIN
Created by: Vessy
Comments: 0
Category: HtmlChart
Type: Feature Request
0
For the time being the function can be set through the kendoWidget:

<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Transitions="true">
    <PlotArea>
        <Series>
            <telerik:ColumnSeries Name="Product 1">
                <TooltipsAppearance BackgroundColor="Orange" DataFormatString="{0} sales" />
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="15000" />
                    <telerik:CategorySeriesItem Y="23000" />
                    <telerik:CategorySeriesItem Y="10000" />
                    <telerik:CategorySeriesItem Y="16000" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
        <XAxis AxisCrossingValue="0" Color="Black" MajorTickType="Outside" MinorTickType="Outside"
            Reversed="false">
            <Items>
                <telerik:AxisItem LabelText="1" />
                <telerik:AxisItem LabelText="2" />
                <telerik:AxisItem LabelText="3" />
                <telerik:AxisItem LabelText="4" />
            </Items>
            <LabelsAppearance DataFormatString="Q{0}" RotationAngle="0" />
            <MajorGridLines Color="#EFEFEF" Width="1" />
            <MinorGridLines Color="#F7F7F7" Width="1" />
            <TitleAppearance Position="Center" RotationAngle="0" Text="Quarters" />
        </XAxis>
        <YAxis AxisCrossingValue="0" Color="Black" MajorTickSize="1" MajorTickType="Outside"
            MaxValue="50000" MinorTickSize="1" MinorTickType="Outside" MinValue="0" Reversed="false"
            Step="10000">
            <LabelsAppearance DataFormatString="{0} sales" RotationAngle="0" />
            <TitleAppearance Position="Center" RotationAngle="0" Text="Sales" />
        </YAxis>
    </PlotArea>
    <ChartTitle Text="Product Sales for 2011">
    </ChartTitle>
    <Legend>
        <Appearance Position="Bottom" />
    </Legend>
</telerik:RadHtmlChart>
<script>
    function pageLoad() {
        $ = $telerik.$;
        var kendoWidget = $find("<%=ColumnChart1.ClientID%>").get_kendoWidget();
        kendoWidget.options.series[0].labels.position = function (point) {
            if (point.value < 20000) {
                console.log(1);
                return "insideEnd";
            } else {
                console.log(2);
                return "outsideEnd";
            }
        }
        kendoWidget.redraw();
    }
</script>

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: 02 Mar 2022 13:27 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
1
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>
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>
Declined
Last Updated: 02 Mar 2022 11:38 by ADMIN
ADMIN
Created by: Stamo Gochev
Comments: 1
Category: HtmlChart
Type: Feature Request
0
RadHtmlChart should allow the usage of indices in the DataFormatString when DateTime values are used:
                <XAxis Type="Date">
                    <LabelsAppearance DataFormatString="{0:d}" />
                </XAxis>
Completed
Last Updated: 01 Mar 2022 15:54 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
0
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;
    }
Unplanned
Last Updated: 28 Jan 2022 15:53 by ADMIN
When there is no data in the source of the chart, the plot area should be displaying a message in predefined format. Something similar to what we have in the Grid and other controls.
Completed
Last Updated: 15 Jun 2021 14:11 by ADMIN
Created by: Kasper
Comments: 1
Category: HtmlChart
Type: Feature Request
1
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.
Unplanned
Last Updated: 15 Jun 2021 12:36 by ADMIN
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.
Completed
Last Updated: 14 Jun 2021 10:36 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 2
Category: HtmlChart
Type: Feature Request
1
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"
Unplanned
Last Updated: 14 Jun 2021 08:06 by ADMIN
Created by: Scott
Comments: 1
Category: HtmlChart
Type: Feature Request
1

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.

Declined
Last Updated: 11 Jun 2021 11:54 by ADMIN
Created by: matt
Comments: 3
Category: HtmlChart
Type: Feature Request
0
Hello,

The RadHtmlCharts are great! One that is missing however -- a spectrum chart, aka a spectral chart. This takes in a set of data points and renders the values as color-dense shadings. Screenshot attached of one we made ourselves.

This would be useful for scientific applications.


thanks,
matt
1 2 3 4 5 6