How to work with Highcharts in AngularJS

Question

I am new to Highcharts and am stuck with a logic that I need to implement.

My chartSettings look something like:

self.chartSettings = {
    chart: {
      zoomType: 'x',
      spacingBottom: 30,
      spacingTop: 10,
      height: 200
    },
    title: {
      text: null,
      align: 'left',
      margin: 0
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    xAxis: {
      type:'category',
      tickInterval:1,
      crosshair: true,
      labels: {
        rotation: 0
      }
    },
    yAxis: {
    min:0,
    title: {
        text: null
    }
    },
    plotOptions: {
      series: {
          marker: {
              enabled: false
          }
      },
      column: {
        stacking: 'normal'
      }
    },
    tooltip:{
    shared: true
    }
};

I am using xAxis type category.

Now, I have 10 days data from 2018/04/30 to 2018/05/09 but as 30th April falls in April along with the date names in xAxis I want to show the month name line breaker

something like:

My sample data looks like:

    "value": [
        {
        "Year": 2018,
        "TimePeriodInYear": 20180430,
        "AnalysisData":2300,
        "StartDate": 20180430,
        "EndDate": 20180430
        },
        {
        "Year": 2018,
        "TimePeriodInYear": 20180501,
        "AnalysisData":2705,
        "StartDate": 20180501,
        "EndDate": 20180501
        },
        ....
        ....

I am deducing the date from TimePeriodInYear and showing as xAxis data points. But how do I get the month name ?

ewolden · Answer 1 · 2018-05-14T07:55:37.570

While you can use categories to display time and date in highcharts, there is a better way. Use a datetime axis, and make sure that you give time in milliseconds for your values.

Borrowing from this answer by Parth Thakkar, you can use the following function to parse yyyymmdd to a millisecond number:

function parse(number) {
    let str = number.toString()
    let y = str.substr(0,4),
    m = str.substr(4,2) - 1,
    d = str.substr(6,2);
    return new Date(y,m,d).getTime();
}

And set type to datetime:

xAxis: {
  type: 'datetime', 
  tickInterval: 3600*24*1000, //tickinterval = 24 hours
  ...
}

Then you can use xAxis.dateTimeLabelFormats to chose how to display your dates.

In addition to that, I set useUTC to false, to keep local timezone in the chart:

time: {
  useUTC: false  //Using local user timezone (instead of UTC)
}

Working example: https://jsfiddle.net/ewolden/4vava584/4/

How to work with Highcharts in AngularJS

1 Answers1