CODEWITHSUNDEEP
angulard3.js
ttmt
ttmt

Reputation: 4984

Stacked Bar chart not displaying correctly

I have a plunker here - https://plnkr.co/edit/MErMvIgG9MOdXmjBPZVq?p=preview

I'm trying to create an example of a stacked bar chart, doing this in Angular. The example I have is a mix of different things from different examples. It's meant to be a horizontal chart with axis on the bottom and left.

Can anyone offer any advice on where I'm going wrong?

let layer = this.svg.selectAll(".layer")
    .data(layers)
    .enter().append("g")
    .attr("class", "layer")
    .style("fill", (d, i) => {
        return colorFn(i);
    });

    layer.selectAll("rect")
    .data((d) => { return d; })
    .enter().append("rect")
    .attr("y", (d) => { return this.yScale(this.parseDate(d.data.date)); })
    .attr("x", (d) => { return this.xScale(d[0]); })
    .attr("height", this.yScale.bandwidth())
    .attr("width", (d) => { return this.xScale(d[1]) - this.xScale(d[0]) });

Upvotes: 0

Views: 113

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102218

Given your date key/value pair...

date: "2014"

... your specifier is incorrect. It should be:

d3.timeParse("%Y");

Here is the updated plunker: https://plnkr.co/edit/k8aZSlyCCtpWArOO0mki?p=preview

PS: You don't even need to parse the dates. Since your y scale uses a categorical variable, just use the dates as they are right now, that is, simple strings.

Upvotes: 1

Related Questions