Declined
Last Updated: 19 Mar 2019 14:14 by ADMIN
msigman
Created on: 25 Mar 2014 00:44
Category: HtmlChart
Type: Feature Request
5
ADD more legend markers options in RadHtmlChart
When viewing a line chart with multiple series, the RadHtmlChart automatically changes shapes for each series to make it easy to distinguish, however the shapes are not carried over to the legend.  This means a user printing on a black & white printer will have no way to distinguish the different series (since the shapes are not in the legend).
2 comments
ADMIN
Rumen
Posted on: 19 Mar 2019 14:14
Hi there,

The current request is kind of duplicate to the following feature request Show chart shapes in legend and regarding this I am going to decline it and move the votes to the other one to boost its priority in the backlog.

Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
ADMIN
Danail Vasilev
Posted on: 13 Feb 2015 17:03
For the time being you can either use Visuals (http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/visual-templates/defaultcs.aspx) or use the following workaround in order to control the type, width, height and margin for the legend marker items:
		<script type="text/javascript">
			function pageLoad() {
				var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
				kendoWidget.options.series[0].legend = { marker: { type: "cross", width: 10, height: 15, margin: {top: 0} } };
				kendoWidget.options.series[1].legend = { marker: { type: "triangle", width: 15, height: 15, margin: { top: 10, bottom: 10 } } };
				kendoWidget.options.series[2].legend = { marker: { type: "circle", width: 10, height: 10, margin: { top: 0 } } };
				kendoWidget.options.series[3].legend = { marker: { type: "rect", width: 10, height: 10, margin: { top: 0 } } };
				kendoWidget.redraw();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15000" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:ColumnSeries Name="Product 2">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="45000" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:ColumnSeries Name="Product 3">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="5000" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:ColumnSeries Name="Product 4">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="5000" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<Items>
						<telerik:AxisItem LabelText="1" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
		<script type="text/javascript">
			dataviz = kendo.dataviz;
			deepExtend = kendo.deepExtend;
			ShapeElement = dataviz.ShapeElement;
			kendo.dataviz.LegendItem.fn.createMarker = function () {
				var item = this,
					options = item.options,
					markerColor = options.markerColor,
					markers = options.markers,
					markerType = "rect",
					markerWidth = 7,
					markerHeight = 7,
					markerMargin = { top: 0, left: 0, right: 0, bottom: 0 };

				if (options.series.legend) {
					if (options.series.legend.marker) {
						if (options.series.legend.marker.type) {
							markerType = options.series.legend.marker.type;
						}
						if (options.series.legend.marker.width) {
							markerWidth = options.series.legend.marker.width;
						}
						if (options.series.legend.marker.height) {
							markerHeight = options.series.legend.marker.height;
						}
						if (options.series.legend.marker.margin) {
							markerMargin = options.series.legend.marker.margin;
						}
					}
				}

				var markerOptions = deepExtend({}, markers, {
					background: markerColor,
					border: {
						color: markerColor
					},
					type: markerType,
					width: markerWidth,
					height: markerHeight,
					margin: markerMargin
				});

				item.container.append(new ShapeElement(markerOptions));
			}
		</script>