Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts, Show specific tick on a datetime xaxis type

I have a xAxis which is in datetime format on highcharts.

I send millisecond position of xAxis to place point on chart.

The total time on xAxis is about 2 years.

But I want to show tick only where there are some points (about 6 points).

For the moment, ticks are show at regular interval with the date.

Here is what I have :

enter image description here

And what I need :

enter image description here

thanks,

like image 681
Dragouf Avatar asked Jun 17 '11 10:06

Dragouf


Video Answer


3 Answers

This is possible,

you can use

xAxis.labels.formatter 

this is for formatting labels, you have to maintain a {realaxis:{label:labelValue},realaxis:{label:labelValue} ...} Object for formatting labels

set the

xAxis.tickInterval

for number of calls for label formatting function you have provided

like image 103
Buddhi Avatar answered Sep 18 '22 15:09

Buddhi


If you want to show the ticks as needed, what you could do is implement a custom formatter. Basically, you would only plot a point if the value was the same as in your data:

var data = []; //assuming this is your array of timestamps

var chart = new Highcharts.chart({
    //other options
    xAxis: {
        labels: {
            formatter: function () {
                //some cleanup may be required, but this is the general form of the solution
                if (this.value in data) {
                    return this.value;
                }
            }
        }
    }
});
like image 26
NT3RP Avatar answered Sep 19 '22 15:09

NT3RP


I think you can not do that. Highcharts only draws the ticks at some regular interval. If they don't appear in regular interval then they are not ticks any more. You can try setting minorTickInterval, but still it all depends on your data, where they appear on the timeline.

like image 30
Bhesh Gurung Avatar answered Sep 20 '22 15:09

Bhesh Gurung