Hi,
I'm using Kendo UI for ASP.NET MVC and I need to add an HTML link (<a href="...">) inside the CategoryAxis.Labels.Template or the ValueAxis.Labels.Template of a Bar Chart. Here is a simplified version of my code:
However, the chart only displays the raw text of the <a> tag instead of rendering it as a clickable HTML link. I understand this may be due to the chart rendering via SVG and not supporting HTML natively in axis labels.
Is there any workaround or supported way to:
Render actual HTML in axis labels?
Enable links or interactive elements within axis labels?
I’ve already considered using tooltips and seriesClick events as alternatives, but my goal is to have direct clickable links inside the axis labels themselves.
Thanks for your help!
I'm using Kendo UI for ASP.NET MVC and I need to add an HTML link (<a href="...">) inside the CategoryAxis.Labels.Template or the ValueAxis.Labels.Template of a Bar Chart. Here is a simplified version of my code:
@(Html.Kendo().Chart()
.Name("productsChart")
.Series(series =>
{
series.Bar(new[] { 100, 200, 300 }).Name("Sales");
})
.CategoryAxis(axis => axis
.Categories("Product A", "Product B", "Product C")
.Labels(labels => labels
.Template("<a href='https://example.com/product/#= value #' target='_blank'>#= value #</a>")
)
)
)
However, the chart only displays the raw text of the <a> tag instead of rendering it as a clickable HTML link. I understand this may be due to the chart rendering via SVG and not supporting HTML natively in axis labels.
Is there any workaround or supported way to:
Render actual HTML in axis labels?
Enable links or interactive elements within axis labels?
I’ve already considered using tooltips and seriesClick events as alternatives, but my goal is to have direct clickable links inside the axis labels themselves.
Thanks for your help!