title: Formatting data got from API to create a chart
body: <p>there! I am new to web development so I need some help!</p>
  <p>I am trying to create an app in which you choose a stock name and the chart of its price changes will appear. I am using <a href="https://marketstack.com/" rel="nofollow noreferrer">this api</a> and <a href="https://apexcharts.com/" rel="nofollow noreferrer">ApexCharts</a> to create the chart.</p>
  <p>The problem is the chart doesn't seem to take my data, so the chart looks empty. What I am doing is:</p>
  <p>After taking the data from the API, looks something like this:</p>
  <pre><code>&quot;data&quot;: [
          {
              &quot;open&quot;: 129.8,
              &quot;high&quot;: 133.04,
              &quot;low&quot;: 129.47,
              &quot;close&quot;: 132.995,
              &quot;volume&quot;: 106686703.0,
              &quot;adj_high&quot;: 133.04,
              &quot;adj_low&quot;: 129.47,
              &quot;adj_close&quot;: 132.995,
              &quot;adj_open&quot;: 129.8,
              &quot;adj_volume&quot;: 106686703.0,
              &quot;split_factor&quot;: 1.0,
              &quot;dividend&quot;: 0.0,
              &quot;symbol&quot;: &quot;AAPL&quot;,
              &quot;exchange&quot;: &quot;XNAS&quot;,
              &quot;date&quot;: &quot;2021-04-09T00:00:00+0000&quot;
              },
              [...]
      ]
  </code></pre>
  <p>Then I am trying to create an array of objects (I only need the date and the O,H,L,C values) that looks like this:</p>
  <pre><code>series: [{
                data: [{
                    x: new Date(1538778600000),
                    y: [6629.81, 6650.5, 6623.04, 6633.33]
                  },
                  {
                    x: new Date(1538780400000),
                    y: [6632.01, 6643.59, 6620, 6630.11]
                  }
                ]
              }],
  </code></pre>
  <p>The function that I implemented to do this is:</p>
  <pre><code>function formatData(stockData, symbol) {
        options.title.text = symbol;
        let solution = [];
        var apiData = stockData.data;
        for (var entry in apiData) {
          let obj = {};
          obj.x = new Date(entry.date); //the x axis will be containing the date
          let price = [];
          price.push(entry.open);
          price.push(entry.high);
          price.push(entry.low);
          price.push(entry.close);
          obj.y = price; //the y axis will be containing the prices
          solution.push(obj);
        }
        options.series[0].data = solution.sort((a, b) =&gt; a.x - b.x); //put in series what we obtained
      }
  </code></pre>
  <p>The result I get after formatting my data:</p>
  <pre><code>options.series:  
          {data: Array(10)}
          data: Array(10)
          0:
          x: Invalid Date
          [[Prototype]]: Object
          y: Array(4)
          0: undefined
          1: undefined
          2: undefined
          3: undefined
  </code></pre>
  <p>Why do I get 'Invalid date' and 'undefined'? When I am trying to simply display the date in the console, it works fine, but in the array I created it says invalid...And that is why my chart is empty and doesn't show any value.</p>
  <p>I appreciate all the help!</p>