Line Chart Not Hitting The Right Value On Chart And Has A Smooth Line

Below is my line graph where I am using 2 lines to show different values, One line is blue and the other is red. I want the line to have sharp points. and i would like the line it

Solution 1:

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/

Solution 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);
  });