Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts datetime axis, how to disable time part (show only dates)?

My chart is displaying data day-by-day (user and system sent SMS/Newsletters). So time part is not relevant and unnecessary. Here is an example: http://jsfiddle.net/uaxZP/1/ where time "12:00" is displayed.

How can I force Highcharts to never display the time part in a "datetime" axis?

EDIT: Highcharts will display dates w/wo times based on chart or screen size. I've updated jsfiddle removing some data and now it's displaying also time parts.

like image 760
gremo Avatar asked Jul 09 '12 14:07

gremo


1 Answers

You can intercept the x-axis label function and change it's output. In my example, I've changed it to render short dates:

http://jsfiddle.net/uaxZP/3/

{ xAxis: 
    labels: {
        formatter: function() {
             return Highcharts.dateFormat("%b %e", this.value);
        }
    }
}

        

The xAxis.labels.formatter property allows control over this. You also may notice I'm using Highcharts.dateFormat, which is a utility function for rendering dates. This is not mandatory, but it's a nice built in feature. Documentation on the xAxis formatter is here:

http://www.highcharts.com/ref/#xAxis-labels--formatter

like image 188
Mike Robinson Avatar answered Nov 01 '22 07:11

Mike Robinson