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).
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>