Approved
Last Updated: 19 Mar 2019 14:39 by ADMIN
msigman
Created on: 10 Jun 2013 23:57
Category: HtmlChart
Type: Feature Request
12
Show chart shapes in legend
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.
2 comments
ADMIN
Rumen
Posted on: 19 Mar 2019 14:07
For your convenience I am copying the workaround below:

For the time being you can either use Visuals 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>


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: 20 Feb 2015 17:26
You can find a workaround in this feedback item - http://feedback.telerik.com/Project/108/Feedback/Details/123802