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

2 Answers 66 Views
Chart
Ruth
Top achievements
Rank 1
Iron
Iron
Ruth asked on 08 Mar 2022, 07:12 AM

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.


 

 

2 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 10 Mar 2022, 02:18 PM

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

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

0
Ruth
Top achievements
Rank 1
Iron
Iron
answered on 16 Mar 2022, 07:02 AM

Hi Eyup,

thank you for your help,

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

Ivan Danchev
Telerik team
commented on 18 Mar 2022, 04:19 PM

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

Tags
Chart
Asked by
Ruth
Top achievements
Rank 1
Iron
Iron
Answers by
Eyup
Telerik team
Ruth
Top achievements
Rank 1
Iron
Iron
Share this question
or