CODEWITHSUNDEEP
javascripthighcharts
innek
innek

Reputation: 114

highcharts.js how to force x-Axis label to display all months regardless of chart size

i am working on a area charts.

http://jsfiddle.net/b8eoszt0/

my example is a bit complex or different from the ones we usually see.

for the data structure, i have 4 weeks aggregated data for each month eg: Sep1-7: 0, Sep8-15: 20 and so on.

the chart works fine, it displays all data points (5 points each month)

However, for the x-axis labels, what i wanted is to always display "Sep, Oct, Nov, Dec, Jan", regardless what chart size is, because right now, if you resize the broswer, the chart resize, and the a-axis labels are change. sometimes there is less items, sometimes there is more.

$(function () {
$('#container').highcharts({
    chart: {
        type: 'area'
    },
    xAxis: {
        opposite: true,
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            day: '%b %e',
            week: '%b %e',
            month: '%b'
        },
        lineWidth: 0,
        startOnTick: false,
        endOnTick: false,
        tickWidth: 0
    },
    yAxis: {
        gridLineWidth: 0
    },
    series:[
      {
        showInLegend: false,  
        data: [
            [Date.UTC(2015, 8, 1), 0],
            [Date.UTC(2015, 8, 8), 30],
            [Date.UTC(2015, 8, 15), 20],
            [Date.UTC(2015, 8, 22), 50],
            [Date.UTC(2015, 8, 29), 20],
            [Date.UTC(2015, 9, 1), 0],
            [Date.UTC(2015, 9, 8), 30],
            [Date.UTC(2015, 9, 15), 20],
            [Date.UTC(2015, 9, 22), 50],
            [Date.UTC(2015, 9, 29), 20],
            [Date.UTC(2015, 10, 1), 0],
            [Date.UTC(2015, 10, 8), 30],
            [Date.UTC(2015, 10, 15), 20],
            [Date.UTC(2015, 10, 22), 50],
            [Date.UTC(2015, 10, 29), 20],
            [Date.UTC(2015, 11, 1), 0],
            [Date.UTC(2015, 11, 8), 30],
            [Date.UTC(2015, 11, 15), 20],
            [Date.UTC(2015, 11, 22), 50],
            [Date.UTC(2015, 11, 29), 20],
            [Date.UTC(2016, 0, 1), 0],
            [Date.UTC(2016, 0, 8), 30],
            [Date.UTC(2016, 0, 15), 20],
            [Date.UTC(2016, 0, 22), 50],
            [Date.UTC(2016, 0, 29), 20],
            ]              
        }
   ],
});

});

i have tried pointinterval, but it doesn't allow Month. i have tried labels formatter, but it doesnt returns all labels, it seems hightcharts did some filtering before getting into formatter functions.

Upvotes: 0

Views: 1809

Answers (2)

SadiRubaiyet
SadiRubaiyet

Reputation: 328

You can set type on the axis and define your unit.
Check fiddle. I have added the following code in your xAxis. Hope this helps.

 type: 'datetime',
  units: [
    [
      'month', [1, 3, 6]
    ]
  ]

The first number of the array defines the interval, so for every month I have set 1, you you were to display label only two months the first value would be 2. The next numbers on the array are for allowed multiples, for your requirement this is not needed, a simple 'month', [1] would do. Check the Api Reference for more information.

Upvotes: 1

Paweł Fus
Paweł Fus

Reputation: 45079

You can use tickPositioner, for example: http://jsfiddle.net/b8eoszt0/2/

        tickPositioner: function(min, max) {
          var ticks = this.tickPositions, // original ticks
              newTicks = [],              // container for a new ticks
              start = new Date(ticks[0]); // first tick 

          // render tick in a first day of the month
          start.setDate(1);

          // add labels, one for every month:
          while (min <= max) {
            start.setMonth(start.getMonth() + 1);
            min = start.getTime(); 
            newTicks.push(min);
          }

          // store original info of labels:
          newTicks.info = ticks.info;
          return newTicks;
        },

Upvotes: 0

Related Questions