[Solved] How to display real axis point in category axis label and in tooltip

[Philippe]

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

[Tsvetina]

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