I'm trying to display stacked barchart but it renders bars on top each other. As I guess the problem with x-axis but can't find out where I'm making mistake
here is sandbox: https://codesandbox.io/s/flamboyant-wave-s3jvw9?file=/src/styles.css
const xScale = d3
.scaleBand()
.domain(data.map((d) => d.date.slice(0, 10)))
.range([0, width])
.padding(0.25);
svg
.append('g')
.attr('transform', `translate(0, ${height})`)
.call(d3.axisBottom(xScale))
.style('color', '#ffffff')
.selectAll('text')
.attr('transform', 'translate(15,35)rotate(90)');
svg
.selectAll('.layer')
.data(layers)
.join('g')
.attr('class', 'layer')
.attr('fill', (layer) => colors[layer.key])
.selectAll('rect')
.data((layer) => layer)
.join('rect')
.attr('x', (sequence) => {
xScale(sequence.data.date);
})
.attr('width', xScale.bandwidth())
.attr('y', (sequence) => yScale(sequence[1]))
.attr('height', (sequence) => yScale(sequence[0]) - yScale(sequence[1]));