Search code examples
javascriptgraphnvd3.jsangular-nvd3

How to show exact date in x-axis in nvd3.js?

I am trying to show exact date on x-axis but it's always coming in range form like below image. Please suggest the solution.

I have given below parameters to $scope.options :

$scope.options = {
chart: {
type: 'historicalBarChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 65,
left: 50
},
x: function(d){return d[0];},
y: function(d){return d[1];},
showValues: true,
valueFormat: function(d){
return d3.format(',')(d);
},
duration: 1,
xAxis: {
axisLabel: 'Date',
tickFormat: function(d) {
return d3.time.format('%d-%m-%y')(new Date(d))
},
},
yAxis: {
axisLabel: 'Body Weight',
axisLabelDistance: -10,
tickFormat: function(d){
return d3.format(',')(d);
}
},
tooltip: {
keyFormatter: function(d) {
return d3.time.format('%x')(new Date(d));
}
},
zoom: {
enabled: true,
scaleExtent: [1, 10],
useFixedDomain: false,
useNiceScale: false,
horizontalOff: false,
verticalOff: true,
unzoomEventType: 'dblclick.zoom'
}
}
};

enter image description here

Solution

  • I have solved it by changing values in scaleExtent: [1, 10]. This option will make a graph to show scale x-axis values