kendo asp.net MVC add a link to custom chart.Legend

[Ruth]

Hey guys,

I added a custom legends to my graph chart usining Legend. Item.Visual

now i want to add a link near of every legend that do something:

I tried to add labels.template with a simple string- just to check if it works before i change it to link, but it shows nothing,

I tried to googled it, but i didn't find any relevant information.

here is my chart and custom function for legens:

   

@(Html.Kendo().Chart()
   .Name("stacked-bars")

 .Legend(legend => { legend.Position(ChartLegendPosition.Left).Margin(m =>       m.Right(100)).Orientation(ChartLegendOrientation.Vertical).Item(i => i.Visual("createLegendItem"))

.Labels(l => l.Template("some text to check if works")); })

    .SeriesDefaults(seriesDefaults =>
        seriesDefaults.Column().Stack(true).Gap(10).Spacing(1.3)
    )
        .Series(series =>
        {
            series.Column(Model.Nidkha).Color("#E6BA55").Name("name1");
            series.Column(Model.Betipul).Color("#E655AE").Name("name2");

            series.Column(Model.TakinPaarKaspi).Color("#55BFE6").Name("name3");


        })

        .CategoryAxis(axis => axis
            .Categories(Model.Months.Select(m => m.ToString()).ToArray())
            .MajorGridLines(lines => lines.Visible(false))
        )
        .Panes(panes => panes.Add().Clip(false))
        .ValueAxis(axis => axis
            .Numeric()
            .Labels(labels => labels.Format("{0}").Position(ChartAxisLabelsPosition.End))
            .Line(line => line.Visible(false))
            .MajorGridLines(lines => lines.Visible(true))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template("#= series.name #: #= value #")
        )
            )

<script>

        

function createLegendItem(e) {
        var color = e.options.markers.background;
        var labelColor = e.options.labels.color;

        var rect = new geometry.Rect([0, 0], [300,45]);
        var layout = new drawing.Layout(rect, {
            alignContent: "start",
            alignItems: "start",
            justifyContent: "end",
            lineSpacing: 40,
            orientation: "horizontal",
            prefix: "m-sd",
            revers: false,
            spacing: 2,
            wrap: false
        });

        var overlay = drawing.Path.fromRect(rect, {
            fill: {
                color: "#fff",
                opacity: 0
            },
            stroke: {
                color: "none"
            },
            cursor: "pointer"
        });

        var column = createColumn(new geometry.Rect([0, 0], [15, 10]), color);
        var label = new drawing.Text(e.series.name, [0, 0], {
            fill: {
                color: labelColor
            }
        })

        layout.append(label, column);
        layout.reflow();

        var group = new drawing.Group().append(layout, overlay);

        return group;
    }

 </script>

and this is my result:

any advice?

thanks in advance.

 

 

[Eyup]

Hello Ruth,

 

Thank you for writing to us.

You can use the following approach to create hyperlinks inside Kendo Chart visuals:
https://dojo.telerik.com/ilajuZIH/20

Feel free to check it and let me know if it helps you.

 

Regards,
Eyup
Progress Telerik

[Ruth]

Hi Eyup,

thank you for your help,

but i tried your solution and  didnt get the expected result:

[Ivan Danchev]

Hello Ruth,

The example my colleague Eyup shared applies styles to the text in the category axis label so that it looks like a link, but it is not. In fact currently, the Legend label does not support Html. Even though it has a template option, it is used only for text. So if you were to try adding a link to it, for example:

.Labels(l => l.Template("#: text # <a href='https://example.com'>Link</a>"));

the anchor element will be rendered as text and will not function as a link. The same goes for Item.Visual. Even if additional content can be appended, that content is not rendered as Html, but as plain text, so no navigation will occur on clicking it.

Consider logging a feature request in our Feedback Portal, if you want to be able to use links in the Chart's Legend labels. That would require implementing encoding for the labels, so that Html can be rendered in them. As of now, the content can be only text elements that are part of the SVG(Canvas).