Reputation: 1266
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.
Upvotes: 2
Views: 1247
Reputation: 4076
reduceXTicks: false
This method will show all x axis
values for nvd3 multibarchart
Upvotes: 0
Reputation: 1266
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:
Upvotes: 1