Prevent dygraphs legend from going off the screen in the DE

ui/src/shared/components/Dygraph.js

@@ -48,6 +48,7 @@ export default React.createClass({
       value: string,
       rangeValue: string,
     }),
+    legendOnBottom: bool,
   },
 
   getDefaultProps() {
@@ -55,6 +56,7 @@ export default React.createClass({
       containerStyle: {},
       isGraphFilled: true,
       overrideLineColors: null,
+      legendOnBottom: false,
     }
   },
 
@@ -67,7 +69,7 @@ export default React.createClass({
   componentDidMount() {
     const timeSeries = this.getTimeSeries()
     // dygraphSeries is a legend label and its corresponding y-axis e.g. {legendLabel1: 'y', legendLabel2: 'y2'};
-    const {ranges, dygraphSeries, ruleValues} = this.props
+    const {ranges, dygraphSeries, ruleValues, legendOnBottom} = this.props
 
     const refs = this.refs
     const graphContainerNode = refs.graphContainer
@@ -92,6 +94,7 @@ export default React.createClass({
       highlightCircleSize: 3,
       colors: finalLineColors,
       series: dygraphSeries,
+      hideOverlayOnMouseOut: false,
       axes: {
         y: {
           valueRange: getRange(timeSeries, ranges.y, ruleValues),
@@ -122,7 +125,12 @@ export default React.createClass({
         }
 
         legendContainerNode.style.left = `${legendLeft}px`
-        legendContainerNode.style.top = `${legendTop}px`
+        if (legendOnBottom) {
+          legendContainerNode.style.bottom = `4px`
+        } else {
+          legendContainerNode.style.top = `${legendTop}px`
+        }
+
         setMarker(points)
       },
       unhighlightCallback() {

ui/src/shared/components/LineGraph.js

@@ -67,7 +67,7 @@ export default React.createClass({
   },
 
   render() {
-    const {data, ranges, isFetchingInitially, isRefreshing, isGraphFilled, overrideLineColors, title, underlayCallback, queries, showSingleStat, displayOptions, ruleValues} = this.props
+    const {data, ranges, isFetchingInitially, isRefreshing, isGraphFilled, overrideLineColors, title, underlayCallback, queries, showSingleStat, displayOptions, ruleValues, isInDataExplorer} = this.props
     const {labels, timeSeries, dygraphSeries} = this._timeSeries
 
     // If data for this graph is being fetched for the first time, show a graph-wide spinner.
@@ -119,6 +119,7 @@ export default React.createClass({
           dygraphSeries={dygraphSeries}
           ranges={ranges || this.getRanges()}
           ruleValues={ruleValues}
+          legendOnBottom={isInDataExplorer ? true : null}
         />
         {showSingleStat ? <div className="graph-single-stat single-stat">{roundedValue}</div> : null}
       </div>