krispo / angular-nvd3

AngularJS directive for NVD3 reusable charting library (based on D3). Easily customize your charts via JSON API.
http://krispo.github.io/angular-nvd3
MIT License
1.29k stars 377 forks source link

Tooltips in Parallel Coordinates plot #748

Open davidlamb opened 6 years ago

davidlamb commented 6 years ago

Not sure if this is an issue or just not available. I'm trying to get the tooltip to pop up on a line for a parallel coordinates plot. Under chart options I've tried a couple of things

tooltips: true
interactive: true

I've also tried this option

useInteractiveGuideline: false,
tooltip: {contentGenerator: function (e) { console.log(e); return '<h4> of total</h4>'; } }

And just trying to catch one of the events

$scope.pccOptions={chart: {
                    type: 'parallelCoordinates',
                    height: 450,
                    dimensionData: dimensionData,
                    dimensionNames:dimensions,
                    dimensions: dimensions,
                    width: 500,
                    dispatch: {
                        brushStart: function(e){ console.log('brushStart') },
                        brush: function(e){ console.log('brush') },
                        brushEnd: function(e){ console.log('brushEnd') }
                    },
                    useInteractiveGuideline: false,
                    tooltip: {
                          contentGenerator: function (e) {
                              console.log(e)
                            return '<h4> of total</h4>';
                          }
                        },
                    margin:"{left:20;top:5;bottom:5;right:20}"

                }}

Any other suggestions, or workarounds.

nstennes commented 6 years ago

Which version of nv.d3.js are you using and how are you loading the script? I was running into problems seeing tooltips using a few different configruations (i.e. stackedAreaChart & multiBarChart, various settings for $scope.options.tooltip) and couldn't hack it. I saw a Plunkr that was sourcing from <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script> instead of the 1.8.6 master release that is currently on github. After swapping out a web-sourced 1.8.1 for my 1.8.6, I was able to render a custom tooltip. Weird thing: if I sourced 1.8.2+ from the web, it would ignore my custom tooltip code and revert to a default tooltip. Also weird: web-sourced 1.8.6 would render a default tooltip, but sourcing 1.8.6 locally (which I pulled from git yesterday) does not.