score:1

Accepted answer

simply by changing your margin left:

var margin = {top: 20, right: 20, bottom: 70, left: 70},

note: please try to always state which version of d3 you are using because v3 and v5 are very different in their apis etc.

also, always try to include some dummy data, so that the question is a minimal verifiable example - https://stackoverflow.com/help/minimal-reproducible-example

var margin = {top: 20, right: 20, bottom: 70, left: 70},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

// parse the date / time
var parsedate = d3.time.format("%y-%m").parse;
//var format = d3.timeformat("%y-%m");

var x = d3.scale.ordinal().rangeroundbands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);

var xaxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickformat(d3.time.format("%y-%m"));

var yaxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);

var svg = d3.select("#arrchart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

//d3.csv("/chart-arr", function(error, data) {
    const data = [
      {date: '2020-01', value: '15000'},
      {date: '2020-02', value: '17000'},
      {date: '2020-03', value: '10000'},
      {date: '2020-04', value: '9000'}
    ];
    
    data.foreach(function(d) {
        d.date = parsedate(d.date);
        d.value = +d.value;
    });
    
    //console.log(data)

  x.domain(data.map(function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xaxis)
    .selectall("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

  svg.append("g")
      .attr("class", "y axis")
      .call(yaxis)
      .attr("width", "150")
    .append("text")
      .attr("transform", "rotate(0) translate(60,-20)")
      .attr("y", 6)
      .attr("dy", ".91em")
      .attr("width", "150")
      .style("text-anchor", "end")
      .text("value ($)");

  svg.selectall("bar")
      .data(data)
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x(d.date); })
      .attr("width", x.rangeband())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });

//});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div id="arrchart"></div>

output:

enter image description here


Related Query