This is a migrated thread and some comments may be shown as answers.

How to display real axis point in category axis label and in tooltip

1 Answer 59 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Philippe
Top achievements
Rank 1
Philippe asked on 15 Mar 2019, 07:35 PM

Hello,

I have a chart for which I added 2 series with a date category field. The step used for the categories are 1 hour. However my data begin on 00:45 and ended on 9:45.
I would like to be able to display 00:45 , 01:45 ,02:45 etc.. On my categories axis label. Most importantly, I would also like to be able to display the real point using a tooltip template

I have tried a couple of things but It never worked how I intended it to work.
I've noticed that using a tootltip template like :

tooltip: {
         visible: true,
         template: "#= '<b>' + dataItem.date + '</b>' #"
     }

I was able to get the real x coordinnates  (00:45, 01:45 etc..)

But When I use something like that:

tooltip: {
          visible: true,
           template: function(e){   
           return e.category;
           }

I'm not getting the real axis point.

In each case I didn't find any parameter in "e" that represent the real axis date point.

 

 

Here's an example of what I'm talking about:example

I would also state that I wanted to used the same kind of template in order to display the categories labels.

So in summary What I want is to be able to get the real points using tooltip template and categoryAxis label template in the form of a javascript function.

Any help will be appreciated.

Regards

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 19 Mar 2019, 12:11 PM
Hello Philippe,

To be able to display the exact times in minutes, you will need to set the baseUnit to "minutes". Since this will plot too many labels and lines, you can set the label, grid line and tick step to 60:
categoryAxis.push({
  baseUnit: "minutes",
  majorGridLines: {
    step: 60
  },
  majorTicks: {
    step: 60
  },
  visible: true,
  labels: {
    visible: true,
    rotation: -45, font: "12px Arial,Helvetica,sans-serif",
    step: 60,
    template: function (e) {
 
      console.log(e);
 
      return e.value.toLocaleString()
 
    }
  }
});

As for the tooltip, once you apply the above steps, e.category will return the actual date, but you could also use e.dataItem.date in the template function:
tooltip: {
  visible: true,
  template: function (e) {
    console.log(e);
    return e.dataItem.date;
  }
},

Here is the updated working example:
https://dojo.telerik.com/ExUQOZuQ/4

Regards,
Tsvetina
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Charts
Asked by
Philippe
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or