How to display 4 digit year on line chart

Community Help
1

I am making a line chart, the x-axis is the years. My data has each year as a 4 digit number like 1886.

I have tried numerous xTypes, d3.scaleUtc, ds.linear etc…

None just display the 4 digit number?

What am I missing?

thanks,

Scott

2

Hi Scott. Are you using Observable Plot or another chart notebook or library? What are you seeing currently? Is the issue that you’re getting commas in the year, like “1,886”?

In this notebook I’ve put examples of formatting years, stored as four-digit numbers, without commas, in Plot. You can either use the tickFormat scale option, or you can convert the years to JavaScript dates and get years formatted without commas by default. E.g.:

Plot.plot({
  x: {tickFormat: d => d},
  marks: [Plot.lineY(data, { x: "year", y: "value" })]
})

If you post a link to a notebook with an example where this isn’t working, I might be able to help more. Cheers

3

tophtucker,

converting my 4 digit year to a javascript Date() did the trick!

thanks,

Scott

4

Nice!! Glad to hear it. Plot infers a lot from the JavaScript type of the values you put into it; you may see related issues if you have dates or numbers stored as strings. You can read more about how scales are inferred from data in the “Inference” section of the Plot: Scales docs.