Setting the template of series labels

[Byang]

Hiya,

I was just wondering how to re-template the series labels. I used the following snippet for both the label and the tooltip but it's only working for the tooltip.

labels: {
      visible: true,
      template: kendo.template($("#template").html())
},
tooltip: {
      visible: true,
      template: kendo.template($("#template").html())
}

If setting the template for labels this way is not possible, is there a way then to make the tooltip visible all the time and not only on hover?

Kindly advise.

Best regards,

Byang

 

[Patrick | Technical Support Engineer, Senior]

Hi Byang,

Please take a look at the following Telerik Dojo which uses templates for the series labels and tooltip.

Here is how I set the labels template and tooltip template for the series:

series: [
    {
      labels: {
        visible: true,
        template: kendo.template($("#template").html())
      },
      tooltip: {
        visible: true,
        template: kendo.template($("#template").html())
      },
      data: [1, 2, 3]
    }

And my external template looks like this:

<script id="template" type= "text/x-kendo-template">
      Amount: #: value#
</script>

Hope this helps!

Regards,
Patrick
Telerik

 

 

[Byang]

Thank you for the quick response and my apologies for the lack for information on the template. The template I have is similar to the following:

<script id="template" type= "text/x-kendo-template">
      Amount: <input type="text" value="#: value#" style="width: 15px"></input>
</script>

Basically I want to re-template the label to contain HTML tags or elements. This works in a tooltip but not in a label. Please see sample screenshot for this.

Please let me know if just miss anything.

Best regards,

Byang

[Patrick | Technical Support Engineer, Senior]

Hi Byang,

You can include html elements for the Series labels in the Kendo Chart using series.labels.visual.
You can see the approach I took here in this Telerik Dojo.

The problem with using an input element  in the labels is that the Kendo Chart uses graphics, and you won't be able to get the desired functionality of the input element.  You can read more about the Kendo Chart here, and more about the Kendo ToolTip with the Chart here.

If you have any suggestions for the Kendo Chart, you can add it to our feedback portal where ideas get voted for our developers to look at.

Hope this helps clear things.

Regards,
Patrick
Telerik

 

 

[Byang]

As per usual, thanks for your quick response and your assistance on this!

Seems that I couldn't really use the labels in what I'm trying to achieve. I can actually use the tooltip but the only issue I have using it is that I cannot make it visible all the time. Or maybe, can you suggest an approach on how to make tooltip visible all the time like the label?

I am actually trying to put in 2 textboxes (for x & y)  and a button on each point so I can update values of each point or delete a point. 

Best regards, Byang

[Patrick | Technical Support Engineer, Senior]

Hello Byang,

The Kendo Chart is a tool that's used mostly for visualization purposes, and not for editing.  However, we have some great widgets which can edit such as the Kendo Grid.  

One possible suggestion, consider using a shared Kendo Datasource with an editor like the Kendo Grid and a Chart.  With the Kendo Grid, you can edit the category names and the values.  Then, you can show the results in a Chart.  Here is a Telerik Dojo illustrating the approach.

Pertaining to the Tooltip, there is no direct way to keep it open at all times.  

I hope this clears things.

Regards,
Patrick
Telerik