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:
Source: stackoverflow.com
Related Query
- dimple.js How can I change the labels of a chart axis without changing the data?
- How do you change the width of a Y-axis in a D3 chart?
- How do you change the default axis labels in D3
- How do you rotate the x and y axis in D3 bar chart
- D3 how to change the width and length of SVG
- How do you change the last tick value in D3.js?
- in Dimple how do you change the order of the series ina legend?
- How to change the viewfinder (focus chart) of a NVD3 line chart programmatically?
- How to make the NVD3 discreteBarChart labels on the X axis to adapt to the width or to the number of labels?
- How do you get the width of a shape that's already created in d3?
- How to modify axis labels in d3 for a stacked bar chart when the axis labels are mapped as part of the scale's domain
- How do you change the interpolation for a zoom behavior in d3.js
- How to cut y axis to make the chart look better?
- how to make the x axis scrollable in a d3 line chart graph
- How to Increase the width of C3 pie chart Legend only. Not for the whole graph
- How do you find the distance while drawing line on mouse vertical axis or horizontal?
- How do I centre the Y axis in a D3 Tornado Chart
- How to change the color of a d3.js axis line
- How to change the location of the pie chart in D3?
- How do you add multiple lines to a D3JS line chart where the depedent variable data sources start at different positions along the range?
- How to zoom only on the X axis in a line chart in d3.js (v7)
- How can I make the legend's similar to the stacked bar chart (and change the legend's label) in D3 v6?
- How to change the data that appear on the axis using D3.js
- How to force the nvd3 chart timespan to stretch the width of the chart?
- How can you change the height of an x-axis with d3.js
- How can I create a basic bar chart with unique counts on the y axis and a category on the x axis?
- How can you change the element drawing order depending on the datapoint index?
- Based on tick values, how can I change width of my chart
- How do I update the y axis of the chart using D3 js
- How to rotate the text labels for the x Axis of a nvd3.js line chart
More Query from same tag
- Detect if rect is completely inside circle d3js
- d3.js create stacked bar chart from values in object
- D3 Y axis for scatterplot not scaling/changing
- D3.js - Conditional apply nest.key() function to array elements
- How to create a d3.js legend with both solid and dashed elements
- Highlighting circles by mouseover that have duplicate names
- How can I change the colors of the NVD3 Pie Chart
- How to change json file in d3.js and update chart using select options
- Charts not showing up in D3
- Save Force Network data to JSON file
- D3 v4 change opacity for kontext related nodes
- Vertical arc using D3.js
- A better way for a stacked area chart toggle between a percent scale and absolute scale?
- D3js: force directed, collapsing internal nodes
- How to create 2 svg's on one page?
- Adding svg text inside svg circle in d3js
- Can't reference data objects in d3js
- d3 - drag behaviour triggered when clicking
- How to specify date format d3.js for x-axis
- Search node in force directed graph using d3.js
- dimplejs timeseries is not plotting with timeaxis
- How can I scale my map to fit my svg size with d3 and geojson path data
- Highlighting individual rings in ring chart
- Confusion over TopoJSON Format
- What am i doing wrong? Add text to bar chart with d3js
- responsive axis values in d3
- d3.js sankey diagram: where does ".dy" and .dx" get set?
- Time axis in 24 hour clock
- Changing SVG elements using d3
- Circles not appending to coordinates