Mike Bostock

D3 Charts

If you want to use the previous format of this d3 example, you can import @538, as in:

import { chart } with {
  series,
  dataForChart as data,
  color
} from "@d3/stacked-bar-chart@538"

See https://observablehq.com/@john-guerra/d3-stack-with-d3-group for an example

John Alexis Guerra Gómez

It seems like ticks for scaleOrdinal are place in the middle of the bar but ticks for scaleTime are placed to the left of it (almost like it's assuming it will be a line chart). Is there a way to offset ticks for scaleTime to be placed in the middle of the bar? I've tried changing the horizontal placement of the axis but that feels hacky and leaves a gap between the x-axis and the y-axis.

Brady Dowling

Correct, assuming you mean scaleBand and not scaleOrdinal. A band scale is discrete whereas a time scale (similar to a linear scale) is continuous: the band scale ticks mark the middle of the band, whereas time scale ticks mark instantaneous moments in time.

If you’re using discrete, regularized time (say one bar per calendar day) instead of continuous time (such as irregular timestamped samples), you may want to use scaleBand or scalePoint instead of scaleTime. See this candlestick chart for example:

https://observablehq.com/@d3/candlestick-chart

Woops, yes I was thinking of the x-scale here but then referenced the function for color. Thank you this helps a lot, I'll switch to scaleBand 🙏

The result of D3.stack().keys() method doesn't match correctly in 'jsFiddle' which does not support 'obejct-like array' type. ('key' and 'index' property omitted)