CODEWITHSUNDEEP
javascriptd3.jschartsnvd3.js
edteke
edteke

Reputation: 562

D3.js Line chart with relative min and max in Y axis

Consider the following VND3 line graph: http://jsfiddle.net/tramtom/hfv68yan/

The graph plots the line ok, however most of my data is the static over long periods, and the two series will always have one at the top of the graphic and other on the bottom axis.

How to create relative minimum and maximums for the Y axis in a way that lines for the series be almost in the middle or at least spaced so that the lower valued series does not lie almost entirely on the x-axis.

Need to add 100 units below the minimum and 100 units above the maximum so the lines don't be at the top or bottom of the graphic.

I tried setting a domain and range values like in here http://jsfiddle.net/tramtom/hfv68yan/1/ but have no effect

var yScale = d3.scale.linear()
.domain([
     d3.min(data, function (d) {
         return d.y;
     }) - 100,
     d3.max(data, function (d) {
         return d.y;
     }) + 100
])
.range([
     d3.min(data, function (d) {
         return d.y;
     }),
     d3.max(data, function (d) {
         return d.y;
     })
]);

Upvotes: 1

Views: 2659

Answers (1)

benjaminjosephw
benjaminjosephw

Reputation: 4417

You need to force the axis range by adding .forceY([0,500]) to the chart instantiation.

This SO answer might be helpful. That should at least point you in the right direction.

Upvotes: 1

Related Questions