Line chart not hitting the right value on chart and has a smooth line

Question

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 woul

Answer 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/