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.

Looking at the code you linked, the only thing that the Highcharts object is providing is color configuration. I'm not really sure how to do what you're trying to do, but it doesn't seem to be dependent on that constant. — diopside, Aug 23 '17 at 13:47
Maybe this can be of help for referencing the chart object: https://github.com/gevgeny/angular2-highcharts#dynamic-interaction-with-chart-object — ewolden, Aug 23 '17 at 13:54

score 0 · Answer 1 · answered Aug 23 '17 at 13:50

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

This doesn't work, and I cant see any week numbers in the fiddle you provided? — Out of Orbit, Aug 24 '17 at 07:49

score 0 · Answer 2 · answered Aug 28 '17 at 11:59

0

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

answered Aug 28 '17 at 11:59

Kacper Madej

7,846
22
36

Angular 4 angular2-highcharts week dates

2 Answers2