Replaced dominant-baseline with dy to fix alignment issues on IE

Added overflow to prevent legend label cut off on firefox

Made font size of labels and values equal so they align properly

Changes after code review

Author: jdhodges

src/assets/js/chart/legend.js

@@ -5,6 +5,7 @@ export default function() {
     var priceFormat;
     var volumeFormat;
     var timeFormat;
+    var textYOffset = '0.71em';
 
     var tooltip = fc.chart.tooltip()
         .items([
@@ -14,7 +15,12 @@ export default function() {
             ['L', function(d) { return priceFormat(d.low); }],
             ['C', function(d) { return priceFormat(d.close); }],
             ['V', function(d) { return volumeFormat(d.volume); }]
-        ]);
+        ])
+        .decorate(function(selection) {
+            selection.enter()
+                .selectAll('text')
+                .attr('dy', textYOffset);
+        });
 
     function legend(selection) {
         selection.each(function(model) {

src/assets/js/chart/nav.js

@@ -16,6 +16,7 @@ export default function() {
     var handleBarWidth = 2;
     var yExtentPadding = [0, 0.04];
     var numberOfSamples = 200;
+    var xAxisTextYOffset = '0.71em';
 
     var dispatch = d3.dispatch(event.viewChange);
     var xScale = fc.scale.dateTime();
@@ -27,7 +28,12 @@ export default function() {
             bottom: bottomMargin      // Variable also in navigator.less - should be used once ported to flex
         })
         .xOuterTickSize(0)
-        .yOuterTickSize(0);
+        .yOuterTickSize(0)
+        .decorate(function(selection) {
+            selection.enter()
+                .selectAll('.x-axis text')
+                .attr('dy', xAxisTextYOffset);
+        });
 
     var viewScale = fc.scale.dateTime();
 

src/assets/js/chart/primary.js

@@ -47,6 +47,7 @@ export default function() {
     var currentYValueAccessor = function(d) { return d.close; };
     var currentIndicators = [];
     var zoomWidth;
+    var yAxisTextYOffset = '0.35em';
 
     var crosshairData = [];
     var crosshair = fc.tool.crosshair()
@@ -221,6 +222,8 @@ export default function() {
                 });
               closePriceTick.select('text')
                 .attr('transform', 'translate(' + calloutHeight / 2 + ',1)');
+
+              s.selectAll('text').attr('dy', yAxisTextYOffset);
           });
 
         var tickValuesWithoutAnnotations = yScale.ticks.apply(yScale, []);

src/assets/styles/axis.less

@@ -48,6 +48,7 @@
     font-weight: @font-weight-base;
     line-height: @line-height-base;
     fill: @font-colour;
+    dominant-baseline: auto;
   }
   .tick path {
     stroke: @gridline-colour;

src/assets/styles/legend.less

@@ -14,9 +14,15 @@
     width: 500px;
     height: 20px;
     justify-content: center;
+    overflow: visible;
+
+    .cell {
+      dominant-baseline: auto;
+    }
 
     .label {
       fill: @legend-label-font-colour;
+      font-size: 12px;
     }
     .value {
       fill: @legend-value-font-colour;

src/assets/styles/navigator.less

@@ -67,6 +67,7 @@
     text {
       font-size: @font-size-base;
       fill: @font-colour;
+      dominant-baseline: auto;
     }
 
     #brush-mask {