444
Views
3
Comments
Solved
[Charts Date Scale]
Question

I'm trying to build a line chart with dates in the x-axis.. The problem I'm having is that since I want trimestral dates the values don't match the scaling.. For example, I have a value for march but in the axis appears April.. Is there anyway to make them match? Oh I have the value something like 201612 and I use newdate to convert the value into dates..
Appreciate the help! 

Staff
Rank: #667
Solution

Hi,

You just have to adjust the "formatter" section in the JSON to return the Month and year.

    formatter: function () {
       var s = "",
       d = new Date(this.value),
       s = Highcharts.dateFormat('%b', this.value) + " " + d.getFullYear();
       return s;
    }

Check this running example:

https://jsfiddle.net/w76qy1kd/ 

Staff
Rank: #667

Hi Paulo,

For that you need to configure the XAxis of the chart.

This example here describes how to do it: https://jsfiddle.net/yHmrZ/4/

What you need to put in your application is a JSON Advanced Format for the XAxis, that based on this example should be something like this:

{
    labels: {
        style: {
            fontSize: '9px',
            width: '175px'
        },            
        formatter: function () {
            var s = "",
            d = new Date(this.value),
            q = Math.floor((d.getMonth() + 3) / 3); //get quarter
            s = "Q" + q + " " + d.getFullYear();
            return s;
        }
    },
    tickPositioner: function(min, max){
var axis = this.axis,
        act = min,
        ticks = [];
        while( act < max ){
            ticks.push(act);
            act = act + (90 * 24 * 3600 * 1000);
        }
        return ticks;
    }
}

Tell us if it worked!


Staff
Rank: #667
Solution

Hi,

You just have to adjust the "formatter" section in the JSON to return the Month and year.

    formatter: function () {
       var s = "",
       d = new Date(this.value),
       s = Highcharts.dateFormat('%b', this.value) + " " + d.getFullYear();
       return s;
    }

Check this running example:

https://jsfiddle.net/w76qy1kd/