Resolved:

Thanks, the tickValues gave me the wanted result. I used the values from d3.min and d3.max:

    var xMin = d3.min(groups, function(c) { return d3.min(c.values, function(v) { return v.date; }); });
    var xMax = d3.max(groups, function (c) { return d3.max(c.values, function (v) { return v.date; }); });

    x.domain([xMin,xMax]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .tickFormat(d3.time.format('%y-%m-%d'))
            .orient("bottom")
            .tickValues([xMin, xMax]);

Problem:

So I have a D3js multi-series line chart.

The X axis is bottom and is time (the range of this depends on the user selection, can be few days, weeks, months or years even). The Y axis is value and is decimal.

What I have problem with is that the labels on the axis is overlapping and it's looking rather poorly.

So my question is if there is a way to show only the first date on the axis and the last date?

I have based the chart on this one:

My code for x-axis:

    var x = d3.time.scale().range([0, dimensions.width]);

    x.domain([
        d3.min(groups, function (c) { return d3.min(c.values, function (v) { return v.date; }); }),
        d3.max(groups, function (c) { return d3.max(c.values, function (v) { return v.date; }); })
    ]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .tickFormat(d3.time.format('%a %d'))
            .orient("bottom")
            .ticks(5);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + dimensions.height + ")")
            .call(xAxis);

Resolved:

Thanks, the tickValues gave me the wanted result. I used the values from d3.min and d3.max:

    var xMin = d3.min(groups, function(c) { return d3.min(c.values, function(v) { return v.date; }); });
    var xMax = d3.max(groups, function (c) { return d3.max(c.values, function (v) { return v.date; }); });

    x.domain([xMin,xMax]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .tickFormat(d3.time.format('%y-%m-%d'))
            .orient("bottom")
            .tickValues([xMin, xMax]);

Problem:

So I have a D3js multi-series line chart.

The X axis is bottom and is time (the range of this depends on the user selection, can be few days, weeks, months or years even). The Y axis is value and is decimal.

What I have problem with is that the labels on the axis is overlapping and it's looking rather poorly.

So my question is if there is a way to show only the first date on the axis and the last date?

I have based the chart on this one: http://bl.ocks/3884955

My code for x-axis:

    var x = d3.time.scale().range([0, dimensions.width]);

    x.domain([
        d3.min(groups, function (c) { return d3.min(c.values, function (v) { return v.date; }); }),
        d3.max(groups, function (c) { return d3.max(c.values, function (v) { return v.date; }); })
    ]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .tickFormat(d3.time.format('%a %d'))
            .orient("bottom")
            .ticks(5);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + dimensions.height + ")")
            .call(xAxis);

• javascript
• canvas
• svg
• charts
• d3.js

1 Answer 1

Try adjusting the number of ticks with the ticks() function or, if that doesn't produce the desired result, try setting the tick values explicitly with tickValues().