Stacked bar chart with dynamic X axis representing time #4014
-
|
Hello, everyone The issue is - my X axis should represent time. And the period may be different.
How to do it with timeScale? Or it is better to use another scale for it? ps. also, there might be cases when I have data for "2025-03-05" and for "2025-03-07", so backend is returning days only if data is present for this day. Do I need to create this days manually to fill this gaps, or scales can manage it somehow? Thank you |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 8 replies
-
|
in my app, i use regular regarding UX design,
|
Beta Was this translation helpful? Give feedback.
-
|
@robifr , it looks like it works correctly when this |
Beta Was this translation helpful? Give feedback.
-
|
@hiddenroadss weird, there must be something wrong with your code somewhere else. try replacing this following example code for the if copy-pasting doesn't work, you might need to edit the code manually. // X axis
const x = d3.scaleBand()
.range([ 0, width ])
// `slice(0, 1)` ensures there is only one large bar.
.domain(data.map(d => d.Country).slice(0, 1))
.padding(0.2);
// ...
// Bars
const bandwidth = x.bandwidth();
// Here, I hardcoded the bar width. Any value here shouldn't cause an offset.
const barWidth = 5;
svg.selectAll("mybar")
// `slice(0, 1)` ensures there is only one large bar.
.data(data.slice(0, 1))
.join("rect")
.attr("x", d => x(d.Country) + (bandwidth - barWidth) / 2)
.attr("y", d => y(d.Value))
.attr("width", barWidth)
.attr("height", d => height - y(d.Value))
.attr("fill", "#69b3a2")it should looks like this
.attr("x", d => x(d.Country) + (bandwidth - barWidth) / 2)back to its original code .attr("x", d => x(d.Country))of course, it now looks like this |
Beta Was this translation helpful? Give feedback.
-
|
I've posted an example from my code here, it will be easier to find an issue this way) |
Beta Was this translation helpful? Give feedback.
-
|
@hiddenroadss fixed it, line 79. // .attr("x", d => xScale(d.data[0]) ?? 0 + (bandwidth - barWidth) / 2)
.attr("x", d => (xScale(d.data[0]) ?? 0) + (bandwidth - barWidth) / 2) |
Beta Was this translation helpful? Give feedback.
-
|
awesome, thank you! |
Beta Was this translation helpful? Give feedback.
in my app, i use regular
d3.scaleBand(), and thedomain()is set manually. if i recall correctly,d3.scaleTime()requires every date to exist, which makes it harder to handle "null" data for missing dates.regarding UX design,
d3.scaleBand()fits perfectly for my use case because i can: