I have two nvd3 graph on my site.
First graph with mouseover:
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:
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:
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?