Fixed wrong positioning of linear gauge highlights when it has nevati…

…ve values

examples/linear-component.html

@@ -116,6 +116,32 @@
         data-title="Temperature"
         data-units="°C"
 ></canvas>
+
+<canvas data-type="linear-gauge"
+        data-width="400"
+        data-height="150"
+        data-min-value="0"
+        data-max-value="220"
+        data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
+        data-minor-ticks="2"
+        data-stroke-ticks="true"
+        data-highlights='false'
+        data-color-plate="#fff"
+        data-border-shadow-width="0"
+        data-borders="false"
+        data-bar-begin-circle="false"
+        data-bar-width="10"
+        data-tick-side="left"
+        data-number-side="left"
+        data-needle-side="left"
+        data-needle-type="line"
+        data-needle-width="3"
+        data-color-needle="#222"
+        data-color-needle-end="#222"
+        data-animation-duration="1500"
+        data-animation-rule="linear"
+        data-animation-target="plate"
+></canvas>
 <script>
 if (!Array.prototype.forEach) {
     Array.prototype.forEach = function(cb) {

lib/LinearGauge.js

@@ -416,7 +416,7 @@ function drawLinearBarHighlights(context, options) {
 
     for (; i < s; i++) {
         let entry = options.highlights[i];
-        let eStart = ticksLength * entry.from / interval;
+        let eStart = ticksLength * abs(entry.from) / interval;
         let eW = ticksLength * abs((entry.to - entry.from) / interval);
 
         context.beginPath();