Search code examples
javascriptangularnvd3.jsgridlinesng2-nvd3

Missing gridlines using nvd3-ng2


I've run into a strange issue that I have trouble fixing. My charts are missing the x and y axis lines, and the tooltip box also only shows the text, not the box itself.

I tested this even with just the example discrete bar chart from the "Basic usage" section of the readme at ng2-nvd3's github page.

Any ideas what is causing this? I have a very simple angular2 site set up, with minimal styles other than bootstrap, and very minimal HTML. Even with all styles removed the problem still persists.

Everything else with the chart works perfectly.

Screenshot showing problems with sample bar chart from readme

The D196.5 on top of the light brown bar is the tooltip. As you can see all gridlines and the tooltip box are missing.

Here's a sample app if someone wants to test the issue themselves: https://github.com/ekuusi/nvd3-ng2-grid-issue

The sample app is a minimal MEAN project that exhibits the issue. To run the project:

  • copy to a local folder
  • npm install
  • npm run build
  • npm start

The app listens to localhost:3000. The app just has one view with Hello World and the bar chart that showcases the problem.

EDIT: Solved, but I'll leave this here if someone runs into the same problem. Also feel free to use the repo linked here if you want to see how to get ng2-nvd3 to work in an Angular 2 project with Webpack.


Solution

  • Ok, so it turns out that I was missing the required styles due to the Webpack workaround required to get ng2-nvd3 to work in the final release I implemented.

    Fixed this by copying the master stylesheet nv.d3.min.css into my project folders from the nvd3 node-module and linking it in my index page.