-1

I want my X-axis to be at the bottom of the graph but when why data is set to zero then it comes to the center of Y-axis? How do I prevent it from going to the center??

my graph

let x = d3.scaleBand().rangeRound([0, width]).padding(1),
  y = d3.scaleLinear().range([height, 0])

x.domain(data.map(function (d) { return d.timescale; }));
y.domain([0, d3.max(trends, function (c) {
  return d3.max(c.values, function (v) {
    return v.total;
  });
})]);
Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
Anand Awasthi
  • 3
  • 3

1 Answers1

0

The problem happens because the maximum extent of y.domain is undefined. As a fallback, the vertical axis gets centered.

To fix this problem, make sure that a value is set, the example below make the y scale to go between at least domains 0 and 1.

Once this is fixed, the x axis should be correctly positioned at the bottom of the chart area.

let maxExtent = Math.max(1, d3.max(trends, function (c) {
  return d3.max(c.values, function (v) {
    return v.total;
  });
}))

y.domain([0, maxExtent]);
Mehdi
  • 7,204
  • 1
  • 32
  • 44
  • the same issue i am getting fot a bar chart but on x axis the domain and scale are very much similar to this how can i bring my bar chart to left of X axis instead of center – Anand Awasthi Mar 23 '20 at 05:56
  • thank you the above solution foe line chart worked like a charm!!! – Anand Awasthi Mar 23 '20 at 05:57