[Chartjs]-Chart.js displays dates in x axis that are not present in my dataset

by

1👍

✅

Finally found it. It was surprisingly easy solution for my issue, I hope it’ll be for yours either.

In my answer I am using latest version, of Chart.js 3, but timeseries should be present in older versions as well.

The time series scale extends from the time scale and supports all the same options. However, for the time series scale, each data point is spread equidistant.

https://www.chartjs.org/docs/latest/axes/cartesian/timeseries.html

I had

scales: {       
   x: {        
      type: 'time'
   }
}

Weekends had ugly lines with no change in prices

Then I changed it to timeseries:

scales: {       
   x: {        
      type: 'timeseries'
   }
}

Now it is OK, even if it shows pre market/after hours prices

And it works now. I just noticed bug with overlapping weekend dates, but that’s another issue. 🙂

0👍

I had the same issue here is what I did.

Since I am using object data and providing [{x: "", y: ""}…]

I needed to add "source": "data" to the ticks object for the axis with the issue.

{
"scales": {
    "x": {
        "ticks": {
            **"source": "data"**
        },
        "time": {
            "displayFormats": {
                "day": "MMM D ddd"
            },
            "unit": "day"
        },
        "type": "timeseries",
        "title": {
            "display": true,
            "text": "Date"
        }
    }
}

Leave a comment