Set custom tick value on d3v4 bat charts from JSON data

Question

I am trying to get values from a JSON File and use them as the X and Y axis on a d3 v4 bar chart. But my axis is not showing up as I like. WHat am I doing wrong?

My HTML Code:

  <div class="col" id="main-chart"  style="padding-top:75px;">
    <svg width="675" height="415"></svg>
  </div>

My D3 Code:

   var svg = d3.select("#main-chart svg"),
   margin = {top: 20, right: 20, bottom: 30, left: 75},
   width = +svg.attr("width") - margin.left - margin.right,
   height = +svg.attr("height") - margin.top - margin.bottom;

   var tooltip = d3.select("body").append("div").attr("class", "toolTip");

   var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
       y = d3.scaleLinear().rangeRound([height, 0]);

   var colours = d3.scaleOrdinal().range(["#6F257F", "#CA0D59"]);

   var g = svg.append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  d3.json(data.json, function(error, data) {
   if (error) throw error;
   x.domain(data.map(function(d) { return d.date; })); 
   y.domain([0, d3.max(data, function(d) { return d.values; })]);

  g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    // .attr("transform", "rotate(-90deg)")
    .call(d3.axisBottom(x).ticks(5));

  g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y).ticks(5).tickFormat(function(d) {return parseInt(d); }).tickSizeInner([-width]))
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("text-anchor", "end")
    .attr("fill", "#5D6971");

  g.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("x", function(d) {return x(d.date); })
    .attr("y", function(d) {return y(d.values); })
    .attr("width", x.bandwidth())
    .attr("height", function(d) { return height - y(d.values); })
    .attr("fill", function(d) { return colours(d.date); })
    .on("mousemove", function(d){
        tooltip
          .style("left", d3.event.pageX - 50 + "px")
          .style("top", d3.event.pageY - 70 + "px")
          .style("display", "inline-block")
          .html((d.date) + "<br>"  + (d.values));
    })
    .on("mouseout", function(d){ tooltip.style("display", "none");});
 }); 

My JSON CODE:

 [
   {
    "date": "2018-10-19",
    "values": 6574406
   },
{
    "date": "2018-10-20",
   "values": 6575406
},
{
    "date": "2018-10-21",
    "values": 6575696
},
{
    "date": "2018-10-22",
    "values": 6576656
},
{
    "date": "2018-10-23",
   "values": 6577222
},
 {
    "date": "2018-10-24",
   "values": 6578908
 },
{
     "date": "2018-10-25",
     "values": 6579386
 },
{
    "date": "2018-10-26",
   "values": 6580020
},
{
    "date": "2018-10-27",
    "values": 6580214
},
{
    "date": "2018-10-28",
    "values": 6580440
},
{
    "date": "2018-10-29",
    "values": 6581334
},
{
    "date": "2018-10-30",
    "values": 6583556
},
{
    "date": "2018-10-31",
    "values": 6584098
},
{
    "date": "2018-11-01",       
    "values": 6584660
}
]

My chart looks smushed and I want my Y-Axis to start with the lowest value. Which in this case is 6574406 and want to increment by 25 with 10 ticks. I have tried many variations but am not able to get the x-axis un-overlapped. I tried to skew the values but that did not work either.

My chart: