CODEWITHSUNDEEP
javascriptd3.jssvg
shafeequemat
shafeequemat

Reputation: 1052

D3 JS line chart starts from 0

I am creating a line chart using D3 JS V4. Please refer the fiddle.

var line = g.append("path")
    .data([lineData])
    .attr("class", "line")
    .attr("d", valueLine)
    .style("fill", "none")
    .style("stroke-width", 2)
    .style("stroke", "#000");

The path is starting from 0 of x axis. According to the data it should start from the first x value. How can I make the path start from the first x value?

Upvotes: 1

Views: 2277

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

You should not use a band scale, which has an associated bandwidth. Use band scales for bar charts, for instance.

One alternative is using a point scale instead:

var x = d3.scalePoint()
.rangeRound([0, width])
    .padding(0.5);

Here is the update fiddle: https://jsfiddle.net/gzf7o6sh/

Upvotes: 3

Related Questions