Angular 4 angular2-highcharts week dates

Question

Im running round in circles trying to find a decent way to get week dates on the xaxis on a chart.

In the following fiddle it is easily added with the dateFormats hook, but using Angular I don't have access to any global "Highcharts" object. So how do I add a custom formatter if using Highcharts with Angular?

I've tried adding the formatter to the chart.options directly like so:

{
    dateFormats : {
    W: function (timestamp) {
        var date = new Date(timestamp),
            day = date.getUTCDay() === 0 ? 7 : date.getUTCDay(),
            dayNumber;
        date.setDate(date.getUTCDate() + 4 - day);
        dayNumber = Math.floor((date.getTime() - new Date(date.getUTCFullYear(), 0, 1, -6)) / 86400000);
        return 1 + Math.floor(dayNumber / 7);

    }
},
    title: {
        text: 'Custom date format'
    },

    xAxis: {
        type: 'datetime',
        tickInterval: 7 * 24 * 36e5, // one week
        labels: {
            format: '{value:Week %W/%Y}',
            align: 'right',
            rotation: -30
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        pointInterval: 7 * 24 * 36e5,
        pointStart: Date.UTC(2013, 0, 7)

    }]

}

I've also tried importing highcharts in my app.comonent to get hold of the highcharts object as:

import * as highcharts from '../../node_modules/highcharts';

Something like: https://github.com/gevgeny/angular2-highcharts/blob/master/examples/webpack/src/comboMultiAxesExample.ts

But since I use typescript that results in a '--allowJs' is not set error, and just seems overly complicated.

EDIT:

Using the formatter you can do something like http://jsfiddle.net/dxyyzgar/

or:

   {
    series: data,
    legend: {enabled: true},
    xaxis: {
      type: 'datetime',
      formatter:  () => {
       return this.value
      },
      title: {
          text: 0
      }
    }
  }

But in Angular "this" reference the current component and not the Highcharts object.

Answer 1

You should be able to load and edit Highcharts before passing it into the forRoot as explained here: https://github.com/gevgeny/angular2-highcharts#access-to-the-highcharts-static-api

Demo: http://plnkr.co/edit/IJNT9VcZWp8POlXV9SC2?p=preview

Answer 2

HI you can try like that

{
    chart: {
        type: 'line'
    },
    credits : {
      enabled : false
    },
    title: {
        text: false
    },
    xAxis: {  
        tickInterval:  7 * 24 * 3600 * 1000,
        type: 'datetime',
        startOnTick: true,
        startOfWeek: 2,
        labels: {
            format: '{value:%d/%m/%Y}',
            rotation: -45,
            y: 30,
            align: 'center'
        } 
    },
    yAxis: {
        min: 0,
        title: {
            text: 'HH'
        }
    },
    plotOptions: {
        series: {
            pointStart: Date.UTC(2012, 11, 25),#here you can mention your start date
            pointInterval: 7 * 24 * 3600 * 1000
        }
    }, 
    series: [
        {
            name: 'Curva Tardía',
            data: [18, 27, 36, 36]
        }, {
            name: 'Curva Temprana',
            data: [9, 18, 27, 27]
        },{
            name: 'Curva Real',
            data: [0, 36, 45] 
        }
    ]
}

the working example also is there

highcharts week dates