0

I have two nvd3 graph on my site.

First graph with mouseover:

enter image description here

Code for first graph:

 var chart = nv.models.multiBarChart()
              .reduceXTicks(true)   //If 'false', every single x-axis tick label will be rendered.
              .rotateLabels(0)      //Angle to rotate x-axis labels.
              .showControls(true)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
              .groupSpacing(0.1)    //Distance between each group of bars.
            ;

            d3.select('#chartSumme svg').datum([{ key: 'Row1', values:
                    [{ x:'2019', y: 328500},{ x:'2020', y: 8236000},{ x:'2021', y: 3162500},{ x:'2022', y: 2814500},{ x:'2023', y: 13377000},{ x:'2024', y: 17098500}]
                    }, { key: 'row2', values:
                    [{ x:'2019', y: 335550}...and so on]}
                ]).transition().duration(500).call(chart);

Second graph with mouseover:

enter image description here

Code for second graph:

 var chart = nv.models.multiBarChart()
              .reduceXTicks(true)   //If 'false', every single x-axis tick label will be rendered.
              .rotateLabels(0)      //Angle to rotate x-axis labels.
              .showControls(true)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
              .groupSpacing(0.1)    //Distance between each group of bars.
            ;

            d3.select('#chart svg').datum([{ key: 'Row1', values:
                    [{ x:'2019', y: 0},{ x:'2020', y: 5000000},{ x:'2021', y: 0},{ x:'2022', y: 0},{ x:'2023', y: 0},{ x:'2024', y: 0}]
                    }, { key: 'row2', values:
                    [{ x:'2019', y: 2000}...and so on
                    },]).transition().duration(500).call(chart);

Question

As you can see no label is shown on the second graph with mouseover. First I thought there is an error in my code but then I found out that the label moved the position outside the graph:

enter image description here

Top is the first graph, then comes text (black box) and then the second graph with mouseover. The label from the second graph is shown on the first graph. How can I fix this that every label is shown in his graph?

Kᴀτᴢ
  • 2,146
  • 6
  • 29
  • 57

1 Answers1

0

Seems to be a bug, found this post and solution:

Line 742 add +window.scrollY

 var positionTooltip = function() {
 nv.dom.read(function() {
   var pos = position(),
        gravityOffset = calcGravityOffset(pos),
        left = pos.left + gravityOffset.left,
        top = pos.top + gravityOffset.top+window.scrollY;
Kᴀτᴢ
  • 2,146
  • 6
  • 29
  • 57