Unplanned
Last Updated: 07 Jan 2021 18:23 by ADMIN
msigman
Created on: 10 Jun 2013 23:57
Category: HtmlChart
Type: Feature Request
14
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.
7 comments
ADMIN
Vessy
Posted on: 07 Jan 2021 18:23

Hi kumar,

You can use the following sample as a base in order to create a custom kendo Chart visual:

https://stackoverflow.com/a/50743937

As this is a Feedback item, I would like to kindly ask you to use our ticketing system in case you have further question regarding chart.

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

kumar
Posted on: 07 Jan 2021 07:03

can you please provide me the kendo chart code for custom legend like above screenshot

 

kumar
Posted on: 07 Jan 2021 07:01

can you please provide me the cylindrical shape legend with horizontal 

 

ADMIN
Rumen
Posted on: 06 Jan 2021 13:52

Hi Kumar,

This can be achieved via the visual functionality of the control as explained in the documentation - https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/visual-template:

Figure 1 - Custom Visual Template example

Regards,
Rumen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

kumar
Posted on: 06 Jan 2021 13:23
How to make cylidrical shape in legend 
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