DateTime whout seconds React highcharts

Question

I am trying to implement React-Highcharts into my app. I can't find the way to set the Time in the x axios (HH:MM), I currently have it in miliseconds (xx:xx:xx:xxx). Each interval must increase in one minute (eg 12:00, 12:01, 12:02, etc...) On the other hand, on the Y axios I need it to start in 0, and increase by 0.1. Any idea on how to do this? Thanks!

this is the code:

const options = {
  title: {
    text: ""
  },
  yAxis: [
    {

      // Primary yAxis
      labels: {
        style: {
          color: Highcharts.getOptions().colors[1],
        }
      },
      title: {
        text: "Starting Time",
        style: {
          color: Highcharts.getOptions().colors[1]
        }
      },

    },
    {
      // Secondary yAxis
      title: {
        text: "Usuarios",
        style: {
          color: Highcharts.getOptions().colors[0]
        }
      },
      labels: {
        style: {
          color: Highcharts.getOptions().colors[0]
        }
      },
      opposite: true
    },

  ],
  legend: {
    enabled: false
  },
  xAxis: {
    gridLineWidth: 0,
    type: "datetime",
    timeformat: "%h:%M",
    timezone: "America/Buenos_Aires",
    title: {
      text: ""
    }
  },

  plotOptions: {
    spline: {
        lineWidth: 2,
        states: {
               hover: {
                  lineWidth: 3
               }
        },
        marker: {
               enabled: false,
               states: {
                  hover: {
                     enabled: true,
                     symbol: 'circle',
                     radius: 5,
                     lineWidth: 1
                  }
               }   
        },
     }
  }, 

  series:[{
    name: 'Usuarios',
    type: 'spline',
    yAxis: 1,
    data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,29,37,52,68,86,117,144,213,217,319,258,268,259,258,275,341,363,287,358,780,696,648,713,576,143,531,0,617,421,394,433,504,443,523,651,769,451,812,1183,1652,743,737,1026,1107,760,885,683,909,719,859,636,786,793,851,806,835,872,950,980,922,1022,892,1146,760,1134,1318,1063,1497,1015,1122,1337,1170,1562,860,763,794,1233,1222,1006,1248,1180,1469,954,1405,1126,1338,939,809,991,1499,1565,1315,1090,1249,1014,623,945,1022,1331,2072,761,747,719,908,926,1461,1379,1393,1365,1291,1263,1245,1213,1271,1297,1193,1193,1092,1116,1051,1013,842,618,739,699,634,214,508,480,322,412,128,111,91,131,128,98,65,51,37,32,20,8,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
  },
  {
    name: 'Starting Time',
    type: 'spline',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6, 939,809,991,1499,1565,1315, 1090,1249,1014,623,945,1022,1331,2072,761,747,719],
}],

  responsive: {
    rules: [
      {
        condition: {
          maxWidth: 500
        },
        chartOptions: {
          legend: {
            layout: "horizontal",
            align: "center",
            verticalAlign: "bottom"
          }
        }
      }
    ]
  }
};

score 0 · Answer 1 · answered Aug 02 '19 at 09:55

You did not provide x data values, so your points have 1 millisecond interval. As a solution you can set pointInterval to 1 second:

plotOptions: {
    spline: {
        pointInterval: 1000,
        ...
    }
}

Live demo: http://jsfiddle.net/BlackLabel/2pxwk49d/

API Reference: https://api.highcharts.com/highcharts/series.area.pointInterval

DateTime whout seconds React highcharts

1 Answers1