CODEWITHSUNDEEP
jsonreactjsdatedatetimehighcharts
Sundios
Sundios

Reputation: 438

React: How to show correct date and plot data as Months in Highcharts

I'm trying to plot some data using Highchart on react. Every time I plot it my x-axis displays wrong date time, like the following picture:

enter image description here

My current json data is like this:

 ["Sun, 02 Feb 2020 00:00:00 GMT", 73]
 ["Sun, 09 Feb 2020 00:00:00 GMT", 71]
 ["Sun, 16 Feb 2020 00:00:00 GMT", 73]
 ["Sun, 23 Feb 2020 00:00:00 GMT", 87]
 ["Sun, 01 Mar 2020 00:00:00 GMT", 86]
 ["Sun, 08 Mar 2020 00:00:00 GMT", 65]
 ["Sun, 15 Mar 2020 00:00:00 GMT", 70]
 ["Sun, 22 Mar 2020 00:00:00 GMT", 80]
 ["Sun, 29 Mar 2020 00:00:00 GMT", 77]
 ["Sun, 05 Apr 2020 00:00:00 GMT", 80]

I want it to display only the year and the months. E.g

Jan 2020, Feb 2020 .... Jan 2021, etc

Here is my code:


const options = {
  title: {
    text: 'Cool title'
  },
  xAxis: {
      type: 'datetime'
    },     
  yAxis: {
                title: {
                    text: 'Interest'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
              },
              plotOptions: {
    line: {
        dataLabels: {
            enabled: true
        }
    }
},
              marker: {
              fillColor: 'transparent',
               lineColor: Highcharts.getOptions().colors[0]
          },
  series: [{

    name:kw_val1,
    data: kws1
  },
  {

    name:kw_val2,
    data: kws2
  },

  {

    name:kw_val3,
    data: kws3
  },

  {

    name:kw_val4,
    data: kws4
  },

  {

    name:kw_val5,
    data: kws5
  },


  ]
}

Does this time format work? or Do I need to strip out the time and transform it into a different format. Currently, it's on timestamp and I read it's what Highchart uses.

UPDATE: I added the following on my xAxis:


 xAxis: {
      type: 'datetime',
    labels: {
        format: '{value:%Y-%m}',
      }
    },

But now the x-axis displays the following:

enter image description here

How can I make it display the correct dates

Upvotes: 0

Views: 988

Answers (1)

Sundios
Sundios

Reputation: 438

I made it work. Adding answer for anybody that has the 1970 problem when plotting

When you have timestamp like: 1308909900, to get proper dates in Highcharts, you should have: 1308909900 * 1000.

Upvotes: 2

Related Questions