NVD3 LineChart: Some xAxis dates do not show at the beginning and end of the axis, despite I am using the tickValues() method

Question

I am using the tickValues() method so that I can choose exactly which dates to show on my LineChart (I use a function that makes them sparser, by creating an xTicks array that contains only the x values that I want to become ticks).

However, there are some points of the xTicks array (at the beginning and end) that do not appear as ticks. See below:

This behavior changes depending on the size of the window, for example more X points are missed when I resize down the window (also, the "Date" label is at a very awkward position, on the 1st graph is so high above that it does not even show):

This is the code:

createChart(dom, props) {
    var {width, height, marginLeft, marginRight} = props;

    nv.addGraph(function () {

        var chart = nv.models.lineChart()
            .margin({left: marginLeft, right: marginRight, bottom: 140})
            .width(width)
            .height(height)
            .options({
                transitionDuration: 500,
                useInteractiveGuideline: true
            });

        var createTicks = function () {
            let skipTicks = Math.round(props.data[0].values.length / 50);

            var xTicks = [];

            for (let [i,value] of props.data[0].values.entries()) {
                if (i && !(i % (skipTicks + 1))) {
                    xTicks.push(value.x);
                }
            }
            return xTicks;
        };

        chart.xAxis
            .axisLabel(props.xLabel)
            .tickFormat((d) => {
                return d3.time.format(props.timeFormat)(new Date(d));
            })
            // Since `axis.ticks()` doesn't work with NVD3 (the internal methods over-write any value you set on the axis),
            // we need to use `axis.tickValues()` instead, following this recommendation:
            // http://stackoverflow.com/questions/21316617/d3-js-nvd3-date-on-x-axis-only-some-dates-are-show
            .tickValues(createTicks());

        chart.yAxis
            .axisLabel(props.yLabel)
            .tickFormat(d3.format('d'));

        d3.select(dom).select('svg')
            .attr('width', width)
            .attr('height', height)
            .datum(props.data)
            .call(chart);

        // Change the rotation of xAxis labels
        d3.select(dom).select('.nv-x.nv-axis > g').selectAll('g').selectAll('text')
            .style('text-anchor', 'end')
            .attr('dx', '-.8em')
            .attr('dy', '.15em')
            .attr('transform', 'rotate(-90)');

        return chart;
    });
}

I tried a lot of things, like adding a domain with all values included, adding a range, etc. Nothing worked.

How can I fix this problem? Thank you.

Answer 1

reduceXTicks: false

This method will show all x axis values for nvd3 multibarchart

Answer 2

I found how to fix it, so I will share it here.

NVD3 has a showMaxMin function that is true by default. This function "reduces" the values at the axis edges. I set it to false and there is no reduction of values anymore:

.axisLabel(props.xLabel)
.showMaxMin(false)
.tickFormat((d) => {
      return d3.time.format(props.timeFormat)(new Date(d));
})

Here is the end result: