grid tick interval

[molnard]

Hi,

Thank you for this great charting library! I would like to modify the interval of the grid lines on the xAxis. Is it poosible to make it more dense?

Thank you in advance, Dave

[gregor-srdic]

Have you tried setting ticks in xAxis property of the chart config?

chart: {
         type: 'lineChart',
         xAxis: {
               ticks:8
          }
}

Or if I am not mistaken you can also use an array of exact x coordinates for the ticks for the same property.

[molnard]

Thank you for your answer. I have created a plunker of this http://plnkr.co/edit/lNMBmo?p=preview

I am using lineChart I put xAxis: { ticks:8 } looks like nothing changed.

[gregor-srdic]

Interesting. If you do the same here http://krispo.github.io/angular-nvd3/#/lineChart it works I noticed you are using old versions of angularjs-nvd3 and nvd3, perhaps try updating?

[molnard]

my bower json looks like

{ "name": "angular-seed", "description": "A starter project for AngularJS", "version": "0.0.0", "homepage": "https://github.com/angular/angular-seed", "license": "MIT", "private": true, "dependencies": { "angular": "~1.4.0", "angular-loader": "~1.4.0", "angular-mocks": "~1.4.0", "html5-boilerplate": "~5.2.0", "angular-gettext": "~2.1.0", "angular-xml": "~2.1.0", "angular-ui-router": "~0.2.15", "bootstrap": "~3.3.5", "angular-smart-table": "~2.1.0", "angular-nvd3": "~0.1.1", "toastr": "~2.1.1", "angular-cookies": "~1.4.3" } } I was using bower install angular-nvd3

2015-07-16 14:20 GMT+02:00 Gregor Srdic notifications@github.com:

Interesting. If you do the same here http://krispo.github.io/angular-nvd3/#/lineChart it works

— Reply to this email directly or view it on GitHub https://github.com/krispo/angular-nvd3/issues/182#issuecomment-121941977 .

[gregor-srdic]

I'm not using bower, but my project setup is AngularJS-nvD3, v1.0.0-rc.2 nvd3 version 1.8.1 d3 version 3.5.6

[molnard]

You are right the problem was I used old versions.

Manual install instructions on github: https://github.com/krispo/angular-nvd3#install You should alwasy install nvd3 manually! (even if you are using bower: bower install nvd3)

I have changed my bower.json to looks like this:

{ "name": "angular-seed", "description": "A starter project for AngularJS", "version": "0.0.0", "homepage": "https://github.com/angular/angular-seed", "license": "MIT", "private": true, "dependencies": { "angular": "~1.4.3", "angular-loader": "~1.4.0", "angular-mocks": "~1.4.0", "html5-boilerplate": "~5.2.0", "angular-gettext": "~2.1.0", "angular-xml": "~2.1.0", "angular-ui-router": "~0.2.15", "bootstrap": "~3.3.5", "angular-smart-table": "~2.1.0", "toastr": "~2.1.1", "angular-cookies": "~1.4.3", "angular-nvd3": "~1.0.0-rc.2", "nvd3": "~1.8.1" } } Important part is "angular-nvd3": "~1.0.0-rc.2", "nvd3": "~1.8.1"

Thank you for your help! Now I can change the grid with ticks!

[molnard]

One more question. I would like to define exatly where to put gridlines in my chart I tried this but it is not working

xAxis: { ticks:[10,20,30] }

Would you be so kind and solve this last problem for me? :-)

[gregor-srdic]

I was mistaken, try tickValues=[10,20,30] instead of ticks :)

[molnard]

Works like hell! Thank you!

2015-07-16 15:15 GMT+02:00 Gregor Srdic notifications@github.com:

I was mistaken, try tickValues=[10,20,30] instead of ticks :)

V V čet., 16. jul. 2015 ob 15:05 je oseba Dávid Molnár < notifications@github.com> napisala:

One more question. I would like to define exatly where to put gridlines in my chart I tried this but it is not working

xAxis: { ticks:[10,20,30] }

Would you be so kind and solve this last problem for me? :-)

— Reply to this email directly or view it on GitHub < https://github.com/krispo/angular-nvd3/issues/182#issuecomment-121950534>

.

— Reply to this email directly or view it on GitHub https://github.com/krispo/angular-nvd3/issues/182#issuecomment-121952698 .

[gregor-srdic]

great, you're wellcome :)

[pkeller3]

I'm trying to do something similar but with a multibar chart. When I change the xAxis ticks value the number of ticks does not change from the default.

I've also tried to set tickValues with an array of integers and when I do that I only see the min and max values with no ticks between.

Here's a plunk that demonstrates the issue: http://plnkr.co/edit/LG1w5STLEX9VDndkquil?p=preview

Thanks

[molnard]

Sorry for late answer I was on holiday. I tried to add tickValues to lineChart in plunker but it was not working because plunker uses older version of nvd3 so be careful with PLUNKER. Instead of plunker I would suggest the live Edit function which can be found here: http://krispo.github.io/angular-nvd3/#/lineChart

Anyway I tried my solution ( which is working on linechart ) but on multichart unfortunately it does not. I cannot find a solution on your problem. Dave

[pkeller3]

Thanks for looking into it. It doesn't seem like there is currently a solution available without making changes to nvd3.

[blandofgod]

There is a solution to this for a multipbarchart yAxis: { ticks:10, .... }

you can adjust the number, but this will display ticks

[Abhay07]

Hi, I'm facing the same issue. Here's the demo. Demo

[Manaskumar119]

@blandofgod , is ticks value can be greater than 10 ??
I tried to do with ticks: 30 , but it does not work , any suggestion ?