5

I'm populating a series with "date-value pairs like this:

series: [{
                      name: "Price",
                      data:[
                        [1486684800000, 38],
                        [1486771200000, 0],
                        [1486857600000, 0],
                        [1486944000000, 0],
                        [1487030400000, 0],
                        [1487116800000, 58]]
                    },

But, when for instance I'm populating the series array with "missing dates" like this:

series: [{
                      name: "Price",
                      data:[
                        [1486684800000, 38],
                        [1487116800000, 58]]
                    },

ApexCharts will automatically fill the line, and will not fill the missing dates with zero values.

Any ideas on how to force ApexCharts to show missing dates with zero values and not "ignore" them?

IdoS
  • 482
  • 1
  • 10
  • 18
  • You have to set minimum and maximum x-axis value – Hkachhia Dec 17 '20 at 09:54
  • Could you please specify where exactly? https://apexcharts.com/docs/options/xaxis/# – IdoS Dec 17 '20 at 11:45
  • Not exactly but you can take reference from this example https://apexcharts.com/angular-chart-demos/area-charts/datetime-x-axis/ – Hkachhia Dec 17 '20 at 11:57
  • @IdoS did you find a way? setting the minimum and maximum x-axis value does not seem to help – Joshua May 07 '21 at 08:23
  • 1
    @Joshua No, unfortunately, I could not find a solution with apexCharts, so I had to prepare the data on the backend (fill missing dates with 0 values). – IdoS May 11 '21 at 17:23

1 Answers1

1

I know this question is 2 years old, but I had simillar problem. My backend returns date formatted like YYYY-MM-DD, but you can change this pretty easy.

    var startDate = new Date()
    startDate.setDate(startDate.getDate() - 30)
    var getDaysArray = function (start, end) {
      for (var arr = [], dt = new Date(start); dt <= new Date(end); dt.setDate(dt.getDate() + 1)) {
        const currDate = new Date(dt).toISOString().split('T')[0]
        var amount = response.data.monthly_logs.find(monthlyLog => monthlyLog.created_at__date === currDate) || 0
        if (amount) {
          amount = amount.price
        }
        arr.push({ x: new Date(dt), y: amount })
      }
      return arr
    }
    var result = getDaysArray(startDate, new Date())
ivall
  • 27
  • 7