Filter in SharedTemplate chart tooltip

1 Answer 123 Views
Chart wrappers (package)
Top achievements
Rank 1
Ken asked on 27 Jul 2021, 08:40 PM

I'm using vuejs.

I've got a chart with a tooltip:

import { bytes } from '...fileBytesIsIn'
get tooltip () {
  const sharedTemplate = `<table class="tooltip-table" width="150">
  // removed header to save space
  # for (var i = 0; i < points.length; i++) { #
      <td><div class="swatch #: points[i].series.class#">&nbsp;</span></td>
      <td class="name" nowrap>#: points[i]</td>
      <td class="val">#: bytes(points[i].value) #</td>
  # } #
  return {
    visible: true,
    shared: true,
    template: '#= value #',
    sharedTemplate: sharedTemplate
My issue: bytes is undefined. I've tried it like a filter 
#: points[i].value | bytes #
and several other ways, but nothing seems to work. Is there any way I can apply my formatting function to this value in the tooltip sharedTemplate so I can display these values as readable file sizes?

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 30 Jul 2021, 11:55 AM


In such cases you can define the custom function in the global javascript scope as it is described here. Here is a dummy example where I defined the 'myCustomFunction' function in the index.html file. 

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

Chart wrappers (package)
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question