xADD tooltips to axes (Y)

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 28 Jul 2016 12:51 by ADMIN

Michael

Created on: 01 May 2014 09:48

Category: HtmlChart

Type: Feature Request

xADD tooltips to axes (Y)

Axes themselves do not have tooltips, only series do. Thus, tooltips cannot be added to the y-axis.
Add

1 comment

ADMIN

Danail Vasilev

Posted on: 28 Jul 2016 12:51

Closed with the following reason:
You can use a similar approach as the one illustrated in this article - http://docs.telerik.com/kendo-ui/controls/charts/how-to/tooltip-for-category-axis-labels
For example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
	<style>
		.customTooltip {
			position: absolute;
			z-index:100;
			display: none;
			color: #fff;
			font-size: 20px Arial, sans-serif;
			line-height: 20px;
			text-align: center;
			vertical-align: middle;
			background: green;
			width: 200px;
			height: 20px;
		}
	</style>
</head>
<body>
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function chartLoad(sender) {
				setTimeout(function () {

					$ = $telerik.$;
					var chart = sender.get_kendoWidget();
					var tooltip = $(".customTooltip");
					chart.surface.bind("mouseenter", function (e) {
						//debugger
						if (e.element.tooltipText) {
							var pos = e.element.bbox().getOrigin();
							tooltip.html(e.element.tooltipText)
								   .css({ left: pos.x, top: pos.y + 30 })
								   .show();
						}
					});
					chart.surface.bind("mouseleave", function (e) {
						if (e.element.tooltipText) {
							tooltip.hide();
						}
					});
				}, 100);
			}
			function yLabelsVisual(e) {
				console.log('v');
				// The actual label
				var labelVisual = e.createVisual();
				var bbox = labelVisual.bbox();

				// An invisible rectangle to serve as a hot zone
				var sink = kendo.drawing.Path.fromRect(bbox, {
					stroke: null,
					fill: {
						color: "#fff",
						opacity: 0
					}
				});

				// Maintain reference for event handlers
				sink.tooltipText = e.text;

				var visual = new kendo.drawing.Group();
				visual.append(labelVisual, sink);
				return visual;
			}
		</script>
		<div class="customTooltip">CustomTooltip</div>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<ClientEvents OnLoad="chartLoad" />
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series 1">
						<Appearance></Appearance>
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<YAxis>
					<LabelsAppearance Visual="yLabelsVisual"></LabelsAppearance>
				</YAxis>
				<XAxis>
					<LabelsAppearance RotationAngle="33"></LabelsAppearance>
					<Items>
						<telerik:AxisItem LabelText="Item 1" />
						<telerik:AxisItem LabelText="Item 2" />
						<telerik:AxisItem LabelText="Item 3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
	</form>
</body>
</html>