@millistream/millistream-widgets 0.0.11 → 0.0.14

package/README.md

@@ -16,12 +16,25 @@ $ npm install @millistream/millistream-widgets
 ...
 loadChart) {
 (async function () {
-    const { Milli_List } = await import('@millistream/millistream-widgets');
+    const {
+        MillistreamWidgetStreamingApi,
+        Milli_Chart,
+        MillistreamWidgetSettings,
+    } = await import(
+        // @ts-ignore
+        '@millistream/millistream-widgets'
+    );
+
+    MillistreamWidgetSettings.token = 'xxx';
+
+    let pushapi = new MillistreamWidgetStreamingApi({
+        token: MillistreamWidgetSettings.token,
+        server: 'wss://push.millistream.com',
+    });
 
     let ml = new Milli_Chart({
         instrument: [6485],
         target: document.getElementById('chart'),
-        token: '5b09a1bb-3f27-4026-8c08-0acc9ef7a872',
         autodraw: true,
         intradaylen: '5',
         historylen: '5y',
@@ -33,8 +46,9 @@ loadChart) {
         drawyaxis: true,
         fillchart: true,
         timeformat: 'HH:mm',
-        /*streaming: pushapi*/
+        streaming: pushapi,
     });
+
 })();
 ```
 
@@ -104,9 +118,7 @@ loadChart) {
   background: rgb(255, 153, 0, 0.1);
   pointer-events: none;
 }
-
-...
-
+```
 
 ## Widget documentation
 Please refer to non npm-version documentation on widget customization.

package/millistream-widgets.js

@@ -41,7 +41,7 @@ function Milli_Chart(settings) {
         hcurve: false,
         adjusted: true,
         nochartlabel: "No data to draw on",
-        yearLablesPos: 'top'
+        yearLabelsPos: 'bottom'
     };
     _this.unsubscriptions = {};
     var m_dummyDiv = null; // dummy div For chartclasses 
@@ -161,12 +161,10 @@ function Milli_Chart(settings) {
         }
     */
     MillistreamWidgetApi_AssignObject(MillistreamWidgetSettings, _this.settings);
-
     if (settings) {
         MillistreamWidgetApi_AssignObject(settings, _this.settings);
     }
 
-
     _this.get_lang_text = function(string) {
         return string;
     };
@@ -248,6 +246,32 @@ function Milli_Chart(settings) {
         return parseInt(obj['font-size']);
     }
 
+    function getMaxTimeWidth() {
+        switch (_this.settings.dateformat) {
+            case 'HH:mm':
+                return m_ctx.measureText('88:88').width;
+            default:
+                return m_ctx.measureText('88:88').width;
+        }
+    }
+
+    function getMaxDateWidth() {
+        switch (_this.settings.dateformat) {
+            case 'yyyy-mm-dd':
+                return m_ctx.measureText("8888-88-88").width;
+            case 'b dd':
+                return m_ctx.measureText("MMM 88").width;
+            case 'b dd yyyy':
+                return m_ctx.measureText("MMM 88 8888").width;
+            case 'dd/mm':
+            case 'd/m':
+                return m_ctx.measureText("88/88").width;
+            default:
+                return m_ctx.measureText(_this.settings.dateformat).width;
+        }
+    }
+
+
     function getStringWidth(ctx, format) {
         switch (format) {
             case 'yyyy-mm-dd':
@@ -680,6 +704,7 @@ function Milli_Chart(settings) {
     }
 
     function calcXScale(starttime, endtime) {
+        // vad är detta?
         _this.scaleinfoX.startDate = new Date(starttime);
         _this.scaleinfoX.endDate = new Date(endtime);
         _this.scaleinfoX.days = getNumberOfDays(starttime, endtime);
@@ -715,6 +740,18 @@ function Milli_Chart(settings) {
         return;
     }
 
+    function getDatePosition(x) {
+        var timestamp = _this.scaleinfoX.startDate.getTime();
+        for (var i = 0; i < 1000; i++) {
+            var xx = getXPosition(new Date(timestamp));
+            if (xx >= x) return timestamp;
+            timestamp += 86400000;
+        }
+        //var timestamp = (x - Math.round(parseInt(m_chartCss['margin-left'] + offset)) * _this.scaleinfoX.timePerPixel) - _this.scaleinfoX.startDate.getTime();
+
+        return 0;
+    }
+
     function getXPosition(timestamp) {
         var offset = (timestamp.getTime() - _this.scaleinfoX.startDate.getTime()) / (86400000 * 7); // veckor
         offset = offset * 86400000 * 2 / _this.scaleinfoX.timePerPixel;
@@ -745,16 +782,15 @@ function Milli_Chart(settings) {
             x = getXPosition(new Date(year + '-01-01T00:00:00Z'));
             draw = true;
             for (i = 0; i < legendItems.length; i++) {
-                if (Math.abs(legendItems[i].x - x) < (_this.scaleinfoX.itemwidth / 2)) {
-                    //if (x < _this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 2)) {
+                if (legendItems[i].x + (m_ctx.measureText('8888').width / 2) > (x - (m_ctx.measureText('8888').width))) {
                     draw = false;
                 }
             }
             if (draw) {
                 drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
                 text = year;
-                if (_this.scaleinfoX.lineLength > (x - (m_ctx.measureText(text).width / 2) + m_ctx.measureText(text).width / 2)) {
-                    if (_this.settings.yearLablesPos == 'top') {
+                if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - m_ctx.measureText(text).width) { // not to far right?
+                    if (_this.settings.yearLabelsPos == 'top') {
                         m_ctx.save(); // flip and write new years on top
                         var fontMetrix = m_ctx.measureText(text);
                         x = x + fontMetrix.actualBoundingBoxAscent + fontMetrix.actualBoundingBoxDescent + 2;
@@ -767,35 +803,38 @@ function Milli_Chart(settings) {
                         m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
                 }
                 numItems++;
+                legendItems.push({ text: year.toString(), timestamp: new Date(year + '-01-01T00:00:00Z'), 'x': x });
             }
-            legendItems.push({ text: year.toString(), timestamp: new Date(year + '-01-01T00:00:00Z'), 'x': x });
             year++;
         }
+        if (numItems * m_ctx.measureText('8888').width / _this.scaleinfoX.lineLength > 0.3) numItems = 11; // keep it clean
         // draw  half year
-        if (numItems < 10) { // max 10 items här för att skriva kvartal
-            year = new Date(_this.scaleinfoX.startDate.getFullYear() + '-07-01T00:00:00Z'); // 7
+        if (numItems < 10) { // max 10 items här för att skriva halvår
+            year = new Date(_this.scaleinfoX.startDate.getFullYear() + '-07-01T00:00:00Z');
             if (year.getTime() < _this.scaleinfoX.startDate.getTime())
-                year = new Date(_this.scaleinfoX.startDate.getFullYear() + 1 + '-07-01T00:00:00Z'); // 7
+                year = new Date(_this.scaleinfoX.startDate.getFullYear() + 1 + '-07-01T00:00:00Z');
             while (year < _this.scaleinfoX.endDate) {
                 x = getXPosition(new Date(year.getFullYear() + '-07-01T00:00:00Z')); // 7
                 draw = true;
                 for (i = 0; i < legendItems.length; i++) {
-                    if (Math.abs(legendItems[i].x - x) < (_this.scaleinfoX.itemwidth / 2)) {
-                        //if (x < _this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 2)) {
+                    //if (Math.abs(legendItems[i].x - x) < (getMaxDateWidth() / 2)) {
+                    if (Math.abs(legendItems[i].x - x) < getMaxDateWidth()) {
                         draw = false;
                     }
                 }
                 if (draw) {
                     drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
-                    text = formatDate(year.getFullYear() + '-07-01', _this.settings.dateformat); // 6
+                    text = formatDate(year.getFullYear() + '-07-01', _this.settings.dateformat);
+                    // ingen if som på year???
                     m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
                     numItems++;
+                    legendItems.push({ 'text': text, timestamp: new Date(year + '-07-01T00:00:00Z'), 'x': x });
                 }
-                legendItems.push({ 'text': text, timestamp: new Date(year + '-07-01T00:00:00Z'), 'x': x }); // 7
-                year = new Date((year.getFullYear() + 1) + '-07-01T00:00:00Z'); // 7
+                year = new Date((year.getFullYear() + 1) + '-07-01T00:00:00Z');
             }
         }
         // draw Quarter
+        if (numItems * m_ctx.measureText('8888').width / _this.scaleinfoX.lineLength > 0.3) numItems = 11; // keep it clean
         if (numItems < 10) { // max 10 items här för att skriva kvartal
             year = new Date(_this.scaleinfoX.startDate.getFullYear() + '-04-01T00:00:00Z');
             if (year.getTime() < _this.scaleinfoX.startDate.getTime())
@@ -805,8 +844,7 @@ function Milli_Chart(settings) {
                 x = getXPosition(new Date(year.getFullYear() + '-04-01T00:00:00Z'));
                 draw = true;
                 for (i = 0; i < legendItems.length; i++) {
-                    if (Math.abs(legendItems[i].x - x) < (_this.scaleinfoX.itemwidth / 2)) {
-                        //if (x < _this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 2)) {
+                    if (Math.abs(legendItems[i].x - x) < getMaxDateWidth()) {
                         draw = false;
                         dontPrint = true;
                     }
@@ -829,8 +867,7 @@ function Milli_Chart(settings) {
                     x = getXPosition(new Date(year.getFullYear() + '-10-01T00:00:00Z'));
                     draw = true;
                     for (i = 0; i < legendItems.length; i++) {
-                        if (Math.abs(legendItems[i].x - x) < (_this.scaleinfoX.itemwidth / 2)) {
-                            //if (x < _this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 2)) {
+                        if (Math.abs(legendItems[i].x - x) < getMaxDateWidth()) {
                             draw = false;
                         }
                     }
@@ -849,6 +886,61 @@ function Milli_Chart(settings) {
     }
 
     function drawXAxisMonth(starttime, endtime) {
+        starttime -= starttime % 8640000;
+        endtime -= starttime % 8640000;
+        m_ctx.save();
+        m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
+        m_ctx.strokeStyle = m_gridHorizontalCss.color;
+        m_ctx.fillStyle = m_xLegendCss.color;
+        calcXScale(starttime, endtime);
+        if (_this.settings.drawxaxis != 0) { // draw line
+            m_ctx.beginPath();
+            m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.stroke();
+            m_ctx.closePath();
+        }
+        m_ctx.textAlign = "left";
+        var currentDate = new Date(starttime);
+        var x;
+        var lastx = 0;
+        var draw = true;
+        var offset = 0;
+        while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) { // oklart om det skall vara så här 2021-06-01
+            draw = true;
+            while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
+                currentDate = new Date(currentDate.getTime() + 86400000);
+                offset += 86400000 / _this.scaleinfoX.timePerPixel;
+            }
+            x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
+            if (lastx == 0 && parseInt(m_chartCss['margin-left']) > (x - (getMaxDateWidth() / 2))) { // do not print left of y legend
+                currentDate = new Date(currentDate.getTime() + 86400000);
+                continue;
+            }
+            console.log(x, lastx);
+            if (lastx + (getMaxDateWidth() / 2) > (x - getMaxDateWidth())) {
+                draw = false;
+            }
+            if (draw) {
+                lastx = x;
+                var text = formatDate(currentDate.toISOString().substring(0, 10), _this.settings.dateformat);
+                if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxDateWidth()) // not to far right?
+                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
+            }
+            currentDate = new Date(currentDate.getTime() + 86400000);
+        }
+        // vad är detta?
+        if (typeof m_chartCss['box-shadow'] !== 'undefined') {
+            var boxshadow = m_chartCss['box-shadow'].split(' ');
+            if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
+
+        } else
+            drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
+        m_ctx.restore();
+    }
+
+    function drawXAxisMonth2(starttime, endtime) {
         // month axis
         starttime -= starttime % 8640000;
         endtime -= starttime % 8640000;
@@ -871,68 +963,31 @@ function Milli_Chart(settings) {
         var endDate = new Date(endtime);
         var p = { x: 0, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) };
         var offset = 0; // timeoffset for closed hours,and weekends
-        var newday = true;
         var last = 0;
-        var nextYear = currentDate.getFullYear() + 1;
         var olddate = '';
-        //while (p.x < (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 2))) {
         while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) { // oklart om det skall vara så här 2021-06-01
             while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
                 currentDate = new Date(currentDate.getTime() + 86400000);
                 offset += 86400000 / _this.scaleinfoX.timePerPixel;
-                if (nextYear == currentDate.getFullYear()) {
-                    lastDate = currentDate;
-                    drawXAxisGridlines(p, true); //, '#FF0000');
-                    datum = nextYear;
-
-                    if (_this.settings.yearLablesPos == 'top') {
-                        m_ctx.save();
-                        var fontMetrix = m_ctx.measureText(datum);
-                        var x = p.x + fontMetrix.actualBoundingBoxAscent + fontMetrix.actualBoundingBoxDescent + 2;
-                        var y = parseInt(m_chartCss['margin-top']); // + m_ctx.measureText(datum).width;
-                        m_ctx.translate(x, y);
-                        m_ctx.rotate(90 * Math.PI / 180);
-                        m_ctx.fillText(datum, 0, 0);
-                        m_ctx.restore();
-                    } else
-                        m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
-                    last = p.x;
-                    nextYear = currentDate.getFullYear() + 1;
-                }
             }
-            //oldx = p.x;	används inte tydligen
             p.x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
             var datum;
             var dash = false;
-            newday = false;
-            if (nextYear == currentDate.getFullYear()) {
-                //drawXAxisGridlines(p, true);
-                datum = nextYear;
-                //datum = formatDate(nextYear + '-01-01', _this.settings.dateformat);
-                // m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
-                //last = p.x;
-                nextYear = currentDate.getFullYear() + 1;
-            }
-            //datum = currentDate.getDate() + '/' + (currentDate.getMonth() + 1); // format date
             datum = formatDate(currentDate.toISOString().substring(0, 10), _this.settings.dateformat);
-            //dash = true;
             offset += ((86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel); // * dateDiffInDays(lastdate, currentDate);  // varför?
             currentDate = new Date(currentDate.getTime() + _this.scaleinfoX.ticksize);
+            if (parseInt(m_chartCss['margin-left']) + (getMaxDateWidth() / 2) > (p.x - (getMaxDateWidth()))) {
+                continue;
+            }
+
             lastDate = new Date(currentDate);
             lastDate.setHours(endDate.getHours());
             lastDate.setMinutes(endDate.getMinutes());
             lastDate.setSeconds(endDate.getSeconds());
-            newday = true;
             var printLegendItem = true;
-            var nextYearDate = new Date(nextYear + '-01-01');
-            var nextYearX = Math.round(parseInt(m_chartCss['margin-left']) + ((nextYearDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
-            if (nextYearX - p.x < (Math.floor(_this.scaleinfoX.itemwidth))) {
+
+            if (p.x != parseInt(m_chartCss['margin-left']) && p.x - last < (Math.floor(_this.scaleinfoX.itemwidth))) {
                 printLegendItem = false;
-            } else {
-                //var nextx = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
-                if (p.x != parseInt(m_chartCss['margin-left']) && p.x - last < (Math.floor(_this.scaleinfoX.itemwidth))) {
-                    printLegendItem = false;
-                }
             }
             if (printLegendItem) {
                 if (olddate != datum) {
@@ -998,7 +1053,7 @@ function Milli_Chart(settings) {
                 pixelsperday[i] = arr[i] * timePerPixel;
             }
             var x = totalmilli / maxLegendItems / 60000;
-            numticks = maxLegendItems;
+            var numticks = maxLegendItems;
 
             _this.scaleinfoX.milliPerDay = new Date('2019-01-01T' + _this.instruments[0].marketclose + 'Z') - new Date('2019-01-01T' + _this.instruments[0].marketopen + 'Z');
             _this.scaleinfoX.timePerPixel = timePerPixel;
@@ -1054,6 +1109,403 @@ function Milli_Chart(settings) {
     }
 
     function drawXAxisTick(starttime, endtime) {
+        m_ctx.save();
+        m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
+
+        m_ctx.strokeStyle = m_gridHorizontalCss.color;
+        m_ctx.fillStyle = m_xLegendCss.color;
+        m_ctx.textAlign = "left";
+        calcXScaleTick(starttime, endtime);
+        if (_this.settings.drawxaxis != 0) { // draw line for legend
+            m_ctx.beginPath();
+            m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.stroke();
+            m_ctx.closePath();
+        }
+        // if(startime.date == endtime.date  && starttime > open || endtime < close ) // no date
+
+        var currentDate = new Date(starttime);
+        console.log('startdate', currentDate);
+        var x;
+        var lastx = 0;
+        var draw = true;
+        var offset = 0;
+        var legendItems = [];
+        // add days (daychanges)
+        //currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
+        if (currentDate.getTime() % 3600000 != 0) // if not full hour, move up to next full hour
+            currentDate = new Date(currentDate.getTime() - currentDate.getTime() % 3600000 + 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
+        console.log(currentDate);
+        while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
+            draw = true;
+            while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
+                currentDate = new Date(currentDate.getTime() + 86400000);
+                offset += 86400000 / _this.scaleinfoX.timePerPixel;
+            }
+            //currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
+            x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
+            if (lastx != 0 && lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
+                draw = false;
+            }
+            if (draw) {
+                lastx = x;
+                x += 0.5;
+                var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
+                // if day change and setting print on top as well
+                if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
+                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                    legendItems.push({ x: x, type: 0, text: text });
+                }
+                drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }); // dash?
+            }
+            currentDate = new Date(currentDate.getTime() + 86400000);
+            offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
+            //offset += (86400000 - _this.scaleinfoX.milliPerDay);
+        }
+        var currentDate = new Date(starttime);
+        console.log(currentDate);
+        //currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
+        if (currentDate.getTime() % 3600000 != 0) // if not full hour, move up to next full hour
+            currentDate = new Date(currentDate.getTime() - currentDate.getTime() % 3600000 + 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
+        console.log(currentDate);
+
+        var maxHourLegends;
+        console.log(legendItems);
+        if (legendItems.length == 0)
+            maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - parseInt(m_chartCss['margin-left']) - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
+        else
+        if (legendItems.length == 1)
+            maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
+        else
+            maxHourLegends = Math.floor((legendItems[1].x - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
+        var tickSize;
+        if (m_zoom.isZooming) {
+            console.log(starttime, endtime);
+            tickSize = new Date(endtime - starttime);
+            console.log(tickSize.getTime());
+        } else
+            tickSize = new Date(new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z') - new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z'));
+        var interval;
+        var modularvalue = 3600000;
+        if (tickSize.getTime() < 3600000) {
+            tickSize = tickSize.getTime() / 300000;
+            interval = Math.floor(tickSize / (maxHourLegends + 1)) * 300000;
+            modularvalue = 300000;
+        } else
+        if (tickSize.getTime() < 7200000 * 3) {
+            tickSize = tickSize.getTime() / 600000;
+            interval = Math.floor(tickSize / (maxHourLegends + 1)) * 600000;
+            modularvalue = 600000;
+        } else {
+            tickSize = tickSize.getTime() / 3600000;
+            interval = Math.floor(tickSize / (maxHourLegends + 1)) * 3600000;
+        }
+        if (interval == 0) interval = 300000;
+
+        console.log('MAX', maxHourLegends, tickSize, interval);
+        // print other times
+        offset = 0;
+        lastx = 0;
+        var closeTime = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
+        var workDate = new Date(currentDate);
+        var currentDate = new Date(startdate);
+        if (currentDate.getTime() % modularvalue != 0) // if not full hour, move up to next full hour
+            currentDate = new Date(currentDate.getTime() - currentDate.getTime() % modularvalue + modularvalue); // START om full hour (if modulo == 0 then + 3600000 kanske)
+
+        console.log('workdate', workDate);
+        var count = 0;
+        while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
+            console.log('workdate', workDate);
+            if (count++ > 30) break;
+            draw = true;
+            while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
+                console.log('Helg', currentDate);
+                closeTime = new Date(closeTime.getTime() + 86400000);
+                currentDate = new Date(currentDate.getTime() + 86400000);
+                //currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
+                if (currentDate.getTime() % modularvalue != 0) // if not full hour, move up to next full hour
+                    currentDate = new Date(currentDate.getTime() - currentDate.getTime() % modularvalue + modularvalue); // START om full hour (if modulo == 0 then + 3600000 kanske)
+                var workDate = new Date(workDate.getTime() + 86400000);
+                offset += 86400000 / _this.scaleinfoX.timePerPixel;
+            }
+            console.log(currentDate, closeTime);
+            if (currentDate.getTime() > closeTime.getTime()) {
+                // draw DayEnd(start) dash line
+                /*var dayStart = new Date(workDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z')
+                x = Math.round(parseInt(m_chartCss['margin-left']) + ((dayStart.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
+                drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, true); // dash?*/
+
+
+                closeTime = new Date(closeTime.getTime() + 86400000);
+                workDate = new Date(workDate.getTime() + 86400000);
+                currentDate = new Date(workDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
+                if (currentDate.getTime() % modularvalue != 0) // if not full hour, move up to next full hour
+                    currentDate = new Date(currentDate.getTime() - currentDate.getTime() % modularvalue + modularvalue); // START om full hour (if modulo == 0 then + 3600000 kanske)
+                offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
+                console.log('CLOSED', currentDate, closeTime);
+                continue;
+            }
+            console.log(currentDate, closeTime);
+            x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
+            for (var i = 0; i < legendItems.length; i++) {
+                if (x < legendItems[i].x && x + (getMaxTimeWidth() / 2) > (legendItems[i].x - getMaxTimeWidth())) {
+                    draw = false;
+                    break;
+                }
+                if (x > legendItems[i].x && legendItems[i].x + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
+                    draw = false;
+                    break;
+                }
+            }
+            console.log(x, lastx, offset);
+            if (lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
+                //draw = false;
+                //console.log('false');
+            }
+            if (draw) {
+                lastx = x;
+                var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
+                // if day change and setting print on top as well
+                if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
+                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                    legendItems.push({ x: x, type: 0 });
+                }
+                drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
+            }
+            currentDate = new Date(currentDate.getTime() + interval);
+            //currentDate = new Date(currentDate.getTime() + 3600000);
+        }
+
+        // vad är detta?
+        if (typeof m_chartCss['box-shadow'] !== 'undefined') {
+            var boxshadow = m_chartCss['box-shadow'].split(' ');
+            if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
+
+        } else
+            drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
+        m_ctx.restore();
+
+    }
+
+    function drawXAxisTickBra(starttime, endtime) {
+        m_ctx.save();
+        m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
+
+        m_ctx.strokeStyle = m_gridHorizontalCss.color;
+        m_ctx.fillStyle = m_xLegendCss.color;
+        m_ctx.textAlign = "left";
+        calcXScaleTick(starttime, endtime);
+        if (_this.settings.drawxaxis != 0) { // draw line for legend
+            m_ctx.beginPath();
+            m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.stroke();
+            m_ctx.closePath();
+        }
+        // if(startime.date == endtime.date  && starttime > open || endtime < close ) // no date
+
+        var currentDate = new Date(starttime);
+        console.log('startdate', currentDate);
+        var x;
+        var lastx = 0;
+        var draw = true;
+        var offset = 0;
+        var legendItems = [];
+        // add days (daychanges)
+        currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
+        console.log(currentDate);
+        while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
+            draw = true;
+            while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
+                //                console.log('Helg', currentDate);
+                currentDate = new Date(currentDate.getTime() + 86400000);
+                offset += 86400000 / _this.scaleinfoX.timePerPixel;
+            }
+            //currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
+            x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
+            if (lastx != 0 && lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
+                draw = false;
+            }
+            if (draw) {
+                lastx = x;
+                x += 0.5;
+                var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
+                // if day change and setting print on top as well
+                if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
+                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                    legendItems.push({ x: x, type: 0, text: text });
+                }
+                drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }); // dash?
+            }
+            currentDate = new Date(currentDate.getTime() + 86400000);
+            offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
+        }
+        var currentDate = new Date(starttime);
+        console.log(currentDate);
+        currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
+
+        var maxHourLegends;
+        console.log(legendItems);
+        if (legendItems.length == 0)
+            maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - parseInt(m_chartCss['margin-left']) - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
+        else
+        if (legendItems.length == 1)
+            maxHourLegends = Math.floor((_this.scaleinfoX.lineLength - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
+        else
+            maxHourLegends = Math.floor((legendItems[1].x - legendItems[0].x - getMaxTimeWidth()) / (getMaxTimeWidth() * 3));
+        var tickSize = new Date(new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z') - new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z'));
+        var tickSize = tickSize.getTime() / 3600000;
+        var interval = Math.floor(tickSize / (maxHourLegends + 1)) * 3600000;
+
+        // print other times
+        offset = 0;
+        lastx = 0;
+        var closeTime = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
+        var workDate = new Date(currentDate);
+        console.log('workdate', workDate);
+        while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
+            console.log('workdate', workDate);
+            draw = true;
+            while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
+                console.log('Helg', currentDate);
+                closeTime = new Date(closeTime.getTime() + 86400000);
+                currentDate = new Date(currentDate.getTime() + 86400000);
+                currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
+                var workDate = new Date(workDate.getTime() + 86400000);
+                offset += 86400000 / _this.scaleinfoX.timePerPixel;
+            }
+            console.log(currentDate, closeTime);
+            if (currentDate.getTime() > closeTime.getTime()) {
+                closeTime = new Date(closeTime.getTime() + 86400000);
+                workDate = new Date(workDate.getTime() + 86400000);
+                currentDate = new Date(workDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
+                currentDate = new Date(currentDate.getTime() + currentDate.getTime() % 3600000); // START om full hour (if modulo == 0 then + 3600000 kanske)
+                offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
+                console.log('CLOSED', currentDate, closeTime);
+                continue;
+            }
+            console.log(currentDate, closeTime);
+            x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
+            for (var i = 0; i < legendItems.length; i++) {
+                console.log('loop', x, legendItems[i].x);
+                if (x < legendItems[i].x && x + (getMaxTimeWidth() / 2) > (legendItems[i].x - getMaxTimeWidth())) {
+                    draw = false;
+                    console.log('False1');
+                    break;
+                }
+                if (x > legendItems[i].x && legendItems[i].x + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
+                    draw = false;
+                    console.log('False2');
+                    break;
+                }
+            }
+            console.log(x, lastx, offset);
+            if (lastx + (getMaxTimeWidth() / 2) > (x - getMaxTimeWidth())) {
+                //draw = false;
+                console.log('false');
+            }
+            if (draw) {
+                lastx = x;
+                var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
+                // if day change and setting print on top as well
+                if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxTimeWidth()) { // not to far right?
+                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                    legendItems.push({ x: x, type: 0 });
+                }
+                drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
+            }
+            currentDate = new Date(currentDate.getTime() + interval);
+            //currentDate = new Date(currentDate.getTime() + 3600000);
+        }
+
+        // vad är detta?
+        if (typeof m_chartCss['box-shadow'] !== 'undefined') {
+            var boxshadow = m_chartCss['box-shadow'].split(' ');
+            if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
+
+        } else
+            drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
+        m_ctx.restore();
+
+    }
+
+    function drawXAxisTickTest(starttime, endtime) {
+        m_ctx.save();
+        m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
+
+        m_ctx.strokeStyle = m_gridHorizontalCss.color;
+        m_ctx.fillStyle = m_xLegendCss.color;
+        m_ctx.textAlign = "left";
+        calcXScaleTick(starttime, endtime);
+        if (_this.settings.drawxaxis != 0) { // draw line for legend
+            m_ctx.beginPath();
+            m_ctx.moveTo(parseInt(m_chartCss['margin-left']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.lineTo(m_canvas.width - parseInt(m_chartCss['margin-right']), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 0.5);
+            m_ctx.stroke();
+            m_ctx.closePath();
+        }
+        // if(startime.date == endtime.date  && starttime > open || endtime < close ) // no date
+
+        var currentDate = new Date(starttime);
+        console.log('startdate', currentDate);
+        var x;
+        var lastx = 0;
+        var draw = true;
+        var offset = 0;
+        var legendItems = [];
+        // add days (daychanges)
+        while (currentDate.getTime() < _this.scaleinfoX.endTimeStamp) {
+            draw = true;
+            while (currentDate.getDay() == 0 || currentDate.getDay() == 6) { // move past weekends , maybe skip this if date is available in data
+                console.log('Helg', currentDate);
+                currentDate = new Date(currentDate.getTime() + 86400000);
+                offset += 86400000 / _this.scaleinfoX.timePerPixel;
+            }
+            var closeTime = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketclose + 'Z');
+            if (currentDate.getTime() > closeTime.getTime()) {
+                currentDate = new Date(currentDate.toISOString().substring(0, 10) + 'T' + _this.instruments[0].marketopen + 'Z');
+                currentDate = new Date(currentDate.getTime() + 86400000);
+                //                offset += 86400000 / _this.scaleinfoX.timePerPixel;
+                offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
+                console.log('STÄNGT', currentDate);
+                continue;
+            }
+            console.log(currentDate);
+            x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
+            /*if (lastx == 0 && parseInt(m_chartCss['margin-left']) > (x - (getMaxTimeWidth() / 2))) { // do not print left of y legend
+                console.log('ftst', currentDate);
+                currentDate = new Date(currentDate.getTime() + 86400000);
+                continue;
+            }*/
+            console.log(x, lastx, offset);
+            if (lastx + (getMaxDateWidth() / 2) > (x - getMaxDateWidth())) {
+                draw = false;
+                console.log('false');
+            }
+            if (draw) {
+                lastx = x;
+                var text = formatChartTime(currentDate.toTimeString().substring(0, 8), _this.settings.timeformat);
+                // if day change and setting print on top as well
+                if (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) > x - getMaxDateWidth()) // not to far right?
+                    m_ctx.fillText(text, x - (m_ctx.measureText(text).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
+                drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) });
+            }
+            //currentDate = new Date(currentDate.getTime() + 86400000);
+            currentDate = new Date(currentDate.getTime() + _this.scaleinfoX.ticksize);
+        }
+        // vad är detta?
+        if (typeof m_chartCss['box-shadow'] !== 'undefined') {
+            var boxshadow = m_chartCss['box-shadow'].split(' ');
+            if (parseInt(boxshadow[1]) == 0) drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
+
+        } else
+            drawXAxisGridlines({ 'x': x, y: m_canvas.height - parseInt(m_chartCss['margin-bottom']) }, false);
+        m_ctx.restore();
+
+    }
+
+    function drawXAxisTick2(starttime, endtime) {
         // day and month axis
         m_ctx.save();
         m_ctx.font = m_xLegendCss['font-weight'] + ' ' + m_xLegendCss['font-size'] + ' ' + m_xLegendCss['font-family'];
@@ -1086,7 +1538,6 @@ function Milli_Chart(settings) {
         while (p.x < (_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 2))) { // && oldx != p.x) {
             var dayChange = false;
             if (currentDate.getTime() > endtime) {
-                //console.log('larget than endtime', currentDate, new Date(endtime));
                 break;
             }
             oldx = p.x;
@@ -1118,16 +1569,7 @@ function Milli_Chart(settings) {
                 }
                 //console.log(currentDate, _this.scaleinfoX.endDate);
                 if (currentDate.getTime() > _this.scaleinfoX.endDate.getTime()) {
-                    //console.log('break out', currentDate, _this.scaleinfoX.endDate);
-                    // draw the last item on the scale (ie closetime for trades)
                     break;
-                    /*if (p.x < m_canvas.width - m_ctx.measureText(datum).width) {
-                        //console.log('3', datum, 'Kolla om den är för nära den innan också');
-                        m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
-                    }
-                    drawXAxisGridlines(p, dash);
-                    //console.log('breaking out', currentDate.getTime(), _this.scaleinfoX.endDate.getTime());
-                    break;*/
                 }
                 offset += (86400000 - _this.scaleinfoX.milliPerDay) / _this.scaleinfoX.timePerPixel;
                 lastDate = new Date(currentDate);
@@ -1136,8 +1578,9 @@ function Milli_Chart(settings) {
             }
             var fontMetrix;
             var nextx = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);
-            //console.log(datum,nextx,p.x,_this.scaleinfoX.itemwidth,lastDrawX);
-            if ((nextx - p.x < Math.floor(_this.scaleinfoX.itemwidth)) && new Date(currentDate.getTime() + _this.scaleinfoX.ticksize).getDate() != drawDate.getDate()) { // skriv bara ut om utrymmet får plats innan nästa punkt kommer skrivas (dagbrytningar)
+            //if ((nextx - p.x < Math.floor(_this.scaleinfoX.itemwidth)) && new Date(currentDate.getTime() + _this.scaleinfoX.ticksize).getDate() != drawDate.getDate()) { // skriv bara ut om utrymmet får plats innan nästa punkt kommer skrivas (dagbrytningar)
+            console.log(nextx, p.x, currentDate);
+            if ((nextx - p.x < m_ctx.measureText('88:88').width) && new Date(currentDate.getTime() + _this.scaleinfoX.ticksize).getDate() != drawDate.getDate()) { // skriv bara ut om utrymmet får plats innan nästa punkt kommer skrivas (dagbrytningar)
                 //console.log('1', datum, 'Skall nog skrivas ut men för nära sista....',nextx,_this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 1));
                 if (nextx < _this.scaleinfoX.lineLength + parseInt(m_chartCss['margin-left']) - (_this.scaleinfoX.itemwidth / 1)) { // is it too close to next?
                     //console.log('HIDE');
@@ -1191,7 +1634,8 @@ function Milli_Chart(settings) {
                         drawXAxisGridlines(p, p.x == parseInt(m_chartCss['margin-left']) ? false : dash);
                     }
                     lastDrawX = p.x;
-                } else
+                }
+                //else
                 if (p.x < m_canvas.width - m_ctx.measureText(datum).width) { // if text will be cropped do not print
                     m_ctx.fillText(datum, p.x - (m_ctx.measureText(datum).width / 2), m_canvas.height - parseInt(m_chartCss['margin-bottom']) + 10);
                     if (drawGridline) {
@@ -1305,6 +1749,7 @@ function Milli_Chart(settings) {
             m_toolTip.dateDiv.innerHTML += ':' + zeroPad(d.getMinutes(), 2);
             m_toolTip.dateDiv.innerHTML += ':' + zeroPad(d.getSeconds(), 2);
         }
+        m_toolTip.dateDiv.innerHTML += 'X:' + x;
         m_toolTip.dateDiv.setAttribute('class', 'millistream-chart-tooltip'); // set class so we can measure it might change below depending on position
         m_toolTip.dateDiv.style.left = m_dataPoints.arr[i] + 'px'; // TODO: räkna ut 7 px beroende på hur hoverpilen ser ut från höjden på diven        
 
@@ -1406,7 +1851,6 @@ function Milli_Chart(settings) {
                     m_toolTip.arrowDiv[k].style.position = 'absolute';
                     color = m_instrumentCss[k].color;
                     m_toolTip.arrowDiv[k].style.backgroundColor = color;
-                    m_toolTip.arrowDiv[k].style.boxShadow = '0px 0px 17px 7px ' + color;
                     m_toolTip.arrowDiv[k].style.pointerEvents = 'none';
                 }
                 if (posy > highy) highy = posy;
@@ -1850,6 +2294,7 @@ function Milli_Chart(settings) {
         m_resizeing = false;
         m_canvas.setAttribute('height', _this.settings.target.offsetHeight + 'px');
         m_canvas.setAttribute('width', _this.settings.target.offsetWidth + 'px'); // läs från css?
+        console.log('Width:', _this.settings.target.offsetWidth);
         _this.drawChart();
     };
 
@@ -2017,8 +2462,11 @@ function Milli_Chart(settings) {
                 //console.log(startpoint.x);
 
                 // TODO: här blir det fel när det är från 00:00: 23:59 men göms av tmpx < startpoint.x
-                if (_this.scaleinfoY.type == 'trades' && tmpx < startpoint.x)
+                if (_this.scaleinfoY.type == 'trades' && tmpx < startpoint.x) {
                     m_ctx.lineTo(startpoint.x, startpoint.y);
+                }
+
+                //m_ctx.lineTo(startpoint.x, startpoint.y);
 
             }
             //p.x = Math.round(parseInt(m_chartCss['margin-left']) + ((currentDate.getTime() - _this.scaleinfoX.startDate.getTime()) / _this.scaleinfoX.timePerPixel) - offset);    // from drawXaxis
@@ -2046,6 +2494,8 @@ function Milli_Chart(settings) {
                     if (tmpx < startpoint.x) {
                         if (_this.settings.hcurve) m_ctx.lineTo(startpoint.x, endpoint.y);
                         m_ctx.lineTo(startpoint.x, startpoint.y);
+                        //m_ctx.bezierCurveTo(startpoint.x, startpoint.y, endpoint.x - 1, endpoint.y - 1, endpoint.x, endpoint.y); // läs på om detta för "runda linjer"
+
                         if (instrument == 0) {
                             point = { price: data[i].price, open: data[i].openprice, x: startpoint.x - 0.5, y: startpoint.y - 0.5, timestamp: data[i].timestamp, date: new Date(data[i].timestamp) };
                             if (typeof data[i].dividend !== 'undefined') point.dividend = data[i].dividend;
@@ -2271,12 +2721,9 @@ function Milli_Chart(settings) {
                     }
                     //console.log('onmouseup', m_zoom.mousedown.timestamp, m_zoom.mouseup.timestamp)
                 }
-                //m_zoom.mousedown.timestamp = null;
-                //m_zoom.mouseup.timestamp = null;
                 if (m_zoom.div) m_canvas.parentNode.removeChild(m_zoom.div);
                 m_zoom.div = null;
                 m_zoom.isZooming = false;
-                //console.log('CLEAR');
             });
         } else {
             //m_ctx.clearRect(0, 0, m_canvas.width, m_canvas.height);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@millistream/millistream-widgets",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "description": "Millistream widgets node package",
   "main": "millistream-widgets.js",
   "scripts": {