score:2

Accepted answer

Just remove the interpolate function here:

var valueline = d3.svg.line()
    .interpolate("basis")
    .x(function(d) {
        return x(d.date);
    })
    .y(function(d) {
        return y(d.XMAS);
    });

And do the same in valueline2. Right now you're using basis, which creates a B-spline.

In case you want to set a different interpolation, here is a list of available options in D3 v3.x.

Here is your updated fiddle: https://jsfiddle.net/7apnhbqd/

score:2

If you don't want d3 to smooth the edges, you should remove the interpolation from the line generator.

https://jsfiddle.net/cexLbfnk/3/

var valueline2 = d3.svg.line()
  .interpolate("basis") // this line needs to go
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.JANSALES);
  });

Related Query