Angular nvd3 line chart is wrongly alligned when we use DateTime as X-Axis ticks

Question

I am currently working with NVD3 using Angular Directive (angular-nvd3). I have a very simple line chart with very simple data.

The problem I have encountered now is that my data is wrongly aligned with the Axis.

I am using dates on my xAxis, which are parsed using d3 library:

tickFormat: function(d) {return d3.time.format('%d/%m')(new Date(d))}

I googled lot, but wouldn't find any satisfactory answer. Please help, Thanks

running sample version is [here ](http://plnkr.co/edit/DKltsBc3esj9WTn1fdA2?p=preview) — ved raj, Dec 23 '16 at 07:25

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

You need to add this to your index.html

<script data-require="lodash.js@1.3.1" data-semver="1.3.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>

And you have to add additional tickValues to your xAxis

rotateLabels: -45, tickValues: function(values) { return _.map(values[0].values, function(v) { return new Date(v.x); }); }

Here is PLUNKR

Check here for more information. Even this looks like gives you some bugs, but looks like this is best possible solution.

edited May 23 '17 at 12:24

Community

answered Dec 23 '16 at 15:27

mtkilic

I got better solution without using that library. – ved raj Dec 27 '16 at 12:55
Check my solution here by using simple array – ved raj Dec 27 '16 at 13:19
I have used a simple array consisting all the x-axis ticks values which i want to show on x-axis, here is my solution [plunkr](http://plnkr.co/edit/DKltsBc3esj9WTn1fdA2?p=preview) . – ved raj Dec 27 '16 at 13:22

1 Answers1