Rishabh Rishabh - 23 days ago 5
Javascript Question

show the bottom most tick of y axis

The bottom most tick in the Y axis is not visible in the line chart I've created. The axis creation code is:

var y = d3.scale.linear().range([height, 0]);

var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5)
.innerTickSize(-width)
.outerTickSize(0)
.tickPadding(10);


enter image description here

The axis is ok, but I need to show the tick and text at the bottom most of the Y axis. What's going wrong here? Here is the JSFiddle.

Answer

Use nice() in the domain:

y.domain([
    d3.min(chartData, function(n) {
        return d3.min(n.values, function(d) {
            return d.value;
        });
    }),
    d3.max(chartData, function(n) {
        return d3.max(n.values, function(d) {
            return d.value;
        });
    })
]).nice();

Here is your Fiddle: https://jsfiddle.net/c8mjha3o/