jQuery HighCharts: DateTime X Axis Data label issues

Question

I have a bunch of monthly datetime based data points that I need to map in a line chart. What I am trying to accomplish:

I need all points plotted on the chart
I need the line charts of all 3 series to begin on the first data point at the bottom left (january 1st).
The first data point needs to display a text phrase and all the rest need to remain as a formatted date.

Please take a look at my jsfiddle. http://jsfiddle.net/FWGdw/7/

$(function () {
    $('#container').highcharts({
        chart: { type: 'spline' },
        title: { text: 'Performance Chart' },
        subtitle: { text: 'monthly Date inverval' },
        xAxis: { 
            type: 'datetime',
            dateTimeLabelFormats: { month: '%b-%y', year: '%b-%y'},
            /*showFirstLabel: false,
            startOnTick: true*/

        },
        yAxis: { min: 0 },
        tooltip: { headerFormat: '<b>{series.name}</b><br>', 
                  pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'},
        series: [{
            name: '1st Series',
            data: [
                [Date.UTC(2013, 0, 31), 0],
                [Date.UTC(2013, 1, 28), 0.6],
                [Date.UTC(2013, 2, 31), 1.7],
                [Date.UTC(2013, 3,  30), 2.8],
                [Date.UTC(2013, 4,  31), 0.6],
                [Date.UTC(2013, 5, 30), 3.6],
                [Date.UTC(2013, 6, 31), 3.6],
                [Date.UTC(2013,  7,  31), 2.81],
                [Date.UTC(2013,  8,  30), 0.78],
                [Date.UTC(2013,  9, 31), 0.98],
                [Date.UTC(2013,  10, 30), 1.84],
                [Date.UTC(2013,  11, 31), 1.80],
                [Date.UTC(2014, 0, 31), 0],
                [Date.UTC(2014, 1, 28), 0.6],
                [Date.UTC(2014, 2, 31), 0.7],
                [Date.UTC(2014, 3,  30), 0.8],
                [Date.UTC(2014, 4,  31), 0.6],
                [Date.UTC(2014, 5, 30), 0.6],
                [Date.UTC(2014, 6, 31), 0.6],
                [Date.UTC(2014,  7,  31), 0.81],
                [Date.UTC(2014,  8,  30), 0.78],
                [Date.UTC(2014,  9, 31), 0.98],
                [Date.UTC(2014,  10, 30), 1.84],
                [Date.UTC(2014,  11, 31), 1.80]
            ]
        }, {
            name: '2nd Series',
            data: [
                [Date.UTC(2013, 0, 31), 1],
                [Date.UTC(2013, 1, 28), 3.6],
                [Date.UTC(2013, 2, 31), 2.2],
                [Date.UTC(2013, 3,  30), 4.2],
                [Date.UTC(2013, 4,  31), 4.6],
                [Date.UTC(2013, 5, 30), 5.6],
                [Date.UTC(2013, 6, 31), 0.6],
                [Date.UTC(2013,  7,  31), 0.21],
                [Date.UTC(2013,  8,  30), 2.78],
                [Date.UTC(2013,  9, 31), 0.98],
                [Date.UTC(2013,  10, 30), 2.84],
                [Date.UTC(2013,  11, 31), 1.80],
                [Date.UTC(2014, 0, 31), 4],
                [Date.UTC(2014, 1, 28), 3.6],
                [Date.UTC(2014, 2, 31), 5.7],
                [Date.UTC(2014, 3,  30), 4.8],
                [Date.UTC(2014, 4,  31), 2.6],
                [Date.UTC(2014, 5, 30), 0.1],
                [Date.UTC(2014, 6, 31), 0.9],
                [Date.UTC(2014,  7,  31), 0.81],
                [Date.UTC(2014,  8,  30), 3.78],
                [Date.UTC(2014,  9, 31), 0.98],
                [Date.UTC(2014,  10, 30), 1.84],
                [Date.UTC(2014,  11, 31), 1.80]
            ]
        }, {
            name: '3rd Series',
            data: [
                [Date.UTC(2013, 0, 31), 0],
                [Date.UTC(2013, 1, 28), 0.6],
                [Date.UTC(2013, 2, 31), 0.7],
                [Date.UTC(2013, 3,  30), 0.8],
                [Date.UTC(2013, 4,  31), 0.6],
                [Date.UTC(2013, 5, 30), 0.6],
                [Date.UTC(2013, 6, 31), 0.6],
                [Date.UTC(2013,  7,  31), 1.81],
                [Date.UTC(2013,  8,  30), 7.78],
                [Date.UTC(2013,  9, 31), 7.98],
                [Date.UTC(2013,  10, 30), 1.2],
                [Date.UTC(2013,  11, 31), 1.80],
                [Date.UTC(2014, 0, 31), 0],
                [Date.UTC(2014, 1, 28), 0.6],
                [Date.UTC(2014, 2, 31), 2.2],
                [Date.UTC(2014, 3,  30), 4.8],
                [Date.UTC(2014, 4,  31), 0.6],
                [Date.UTC(2014, 5, 30), 0.6],
                [Date.UTC(2014, 6, 31), 2.6],
                [Date.UTC(2014,  7,  31), 1.81],
                [Date.UTC(2014,  8,  30), 1.78],
                [Date.UTC(2014,  9, 31), 3.98],
                [Date.UTC(2014,  10, 30), 2.84],
                [Date.UTC(2014,  11, 31), 1.80]
            ]
        }]
    });
});

The x axis labels do not map up with the actual data points. They seem 1 month off.
I need the first data label on always be displayed and it is starting at April not January. I also need that first x axis label to be a specific phrase and not the formatted 31.Jan date value.
The final x axis data label is for Jan-2015 which is not even a data point in the series.

For #1, that's not a bug in firefox, they're lining up just fine. It's because you have a lot of points between the labels, it's difficult to tell the distance between two dates which come one after the other. — Duniyadnd
What is not a bug in firefox? If you hover over the data points it does not map up with the label on the x axis. Also, the data points starts over to the right from the first x axis label. The last data point is showing Jan 2015 which is not included in the series. I updated my jsfiddle link. — user327999

Paweł Fus Paweł Fus · Accepted Answer · 2014-05-30T10:03:51

Okay, here we are:

The x axis labels do not map up with the actual data points. They seem 1 month off.

They are fine, consider first point: Date.UTC(2013, 0, 31) -> It's 31st of January. Axis' labels always are displayed at 1st of Month.

I need the first data label on always be displayed and it is starting at April not January.

Create your own tickPositioner.

I also need that first x axis label to be a specific phrase and not the formatted 31.Jan date value.

Use labels.formatter. Use this.isFirst to determine first label.

The final x axis data label is for Jan-2015 which is not even a data point in the series.

Set maxPadding = 0.

jQuery HighCharts: DateTime X Axis Data label issues

1 Answers