diff --git a/app/js/directives/directive-bar-chart.js b/app/js/directives/directive-bar-chart.js
index ee9a743b..9668e7b7 100755
--- a/app/js/directives/directive-bar-chart.js
+++ b/app/js/directives/directive-bar-chart.js
@@ -6,12 +6,14 @@ angular.module('app').directive('barChart', ['$window', '$translate', '$rootScop
 
   function insertLinebreaks(d) {
     var el = d3.select(this);
-    var words = d.split('\n');
+    var lines = d.split('\n');
     el.text('').attr('y', -6);
-    for (var i = 0; i < words.length; i++) {
-      var tspan = el.append('tspan').text(words[i]);
+    for (var i = 0; i < lines.length; i++) {
+      var tspan = el.append('tspan').text(lines[i].length > 18 ? lines[i].substring(0,15) + '...' : lines[i]);
       if (i > 0) {
         tspan.attr('x', -9).attr('dy', '1em');
+      } else {
+        tspan.attr('class', 'primary');
       }
     }
   }
diff --git a/app/js/directives/directive-line-chart.js b/app/js/directives/directive-line-chart.js
index ecf5b85f..bb8ad3a2 100644
--- a/app/js/directives/directive-line-chart.js
+++ b/app/js/directives/directive-line-chart.js
@@ -11,7 +11,7 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco
     link: function(scope, element) {
       var seriesConfig = scope.series,
           series = seriesConfig.series,
-          color = d3.scale.ordinal().range([ '#ff8c0d']),
+          color = d3.scale.ordinal().range(scope.series.colors ? scope.series.colors : ['#ff8c0d']),
           config = scope.config,
           labels = config.labels,
           margin = { top: 15, right: 15, bottom: 35, left: 60 },
@@ -42,16 +42,15 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco
           .attr('transform', 'rotate(-90)')
           .attr('y', -50)
           .attr('dy', '.1em')
-          .style('text-anchor', 'middle')
-          .text($translate.instant(labels.yAxis.title) + ' (' + $translate.instant(labels.yAxis.unit) + ')');
+          .style('text-anchor', 'middle');
+
       // Create X Axis SVG Elements
       var xLbl = vis.append('g').attr('class', 'x axis');
       var xTxt = xLbl.append('text')
           .attr('class', 'cap')
           .attr('y', 30)
           .attr('dy', '.1em')
-          .style('text-anchor', 'middle')
-          .text($translate.instant(labels.xAxis.title) + ' (' + $translate.instant(labels.xAxis.unit) + ')');
+          .style('text-anchor', 'middle');
 
       // Create and Add tooltip
       var tipHeight = 2 + (1.25 * (series ? series.length : 0.75));
@@ -200,10 +199,10 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco
             tipWidth = 0,
             minTransY = (tips.selectAll('rect').node().getBoundingClientRect().height / 2) - margin.top;
 
-        tips.selectAll('text.label.y').text(function(d, i) {
+        tips.selectAll('text.label.y').html(function(d, i) {
           var yVal = series ? y0[series[i]] : y0;
           yTotal += yVal;
-          return (series ? series[i] : '') + ' ' + fmtLong(yVal) + ' ' + $translate.instant(labels.yAxis.unit);
+          return (series ? series[i] : '') + ' <tspan class="metric">' + fmtLong(yVal) + ' ' + $translate.instant(labels.yAxis.unit) + '</tspan>';
         });
 
         tips.selectAll('text').each(function() {
@@ -225,8 +224,8 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco
       }
 
       function updateFormats() {
-        xTxt.text($translate.instant(labels.xAxis.title) + ' (' + $translate.instant(labels.xAxis.unit) + ')');
-        yTxt.text($translate.instant(labels.yAxis.title) + ' (' + $translate.instant(labels.yAxis.unit) + ')');
+        xTxt.html($translate.instant(labels.xAxis.title) + ' <tspan class="metric">(' + $translate.instant(labels.xAxis.unit) + ')</tspan>');
+        yTxt.html($translate.instant(labels.yAxis.title) + ' <tspan class="metric">(' + $translate.instant(labels.yAxis.unit) + ')</tspan>');
         fmtLong = $rootScope.localeFormat.numberFormat('.2f');
         xAxis.tickFormat($rootScope.localeFormat.numberFormat('.2r'));
         yAxis.tickFormat($rootScope.localeFormat.numberFormat('.3r'));
diff --git a/app/less/charts.less b/app/less/charts.less
index 814a79ee..13a6be5a 100755
--- a/app/less/charts.less
+++ b/app/less/charts.less
@@ -39,12 +39,14 @@ svg {
       fill: @primary-disabled;
     }
 
-    &.y {
-      text tspan:first-child {
-        fill: @primary;
-      }
-    }
+  }
 
+  .label {
+    text-transform: capitalize;
+  }
+
+  .metric {
+    text-transform: none;
   }
 
   .marker {