Horizonal lines on chart messing around when setting on dynamic value for multiple charts

[iusmanarshad]

Hi,

I have a scenario where I have multiple cards on a page, each card having a line chart in it. Basically I'm showing multiple stocks, one on each card and showing their price chart within card.

I'm trying to show horizontal lines on y-axis at different positions. When I set horizontal lines at same value for all charts, it works fine. But If I set lines at different value for each chart, lines are messed up. Following is the code and examples

HTML File canvas code:

<div class="flex-grow">
    <canvas id="s-{{ $stock->id }}"></canvas>
    <script>
        var graphType = "{{ $type }}"
        var id = "s-{{ $stock->id }}"
        var tickerData = "{{ json_encode($stock) }}"
        tickerData = tickerData.replace(/&quot;/g, '"')
        tickerData = JSON.parse(tickerData)

        var stockData = {
            id: tickerData.id,
            ticker: tickerData.ticker,
            category: 'shorts',
            data: tickerData.data,
            emaDetail: tickerData.ema_detail
        }
        createTopTradeChart(graphType, id, stockData);
    </script>
</div>

JS graph config file horizontal lines code

var horizonalLinePlugin = {
    id: horizonal_line,
    afterDraw: function(chartInstance) {
        var yScale = graphYScale = chartInstance.scales["y"];

        setTTHorizontalLines(stockData);
        hl = [horizontal_line_1, horizontal_line_2, horizontal_line_3];
        console.log(hl)

        var index;
        var line;
        var style;
        if (chartInstance.options.horizontalLine) {
            for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
                line = chartInstance.options.horizontalLine[index];
                if (!line.style) {
                    style = "rgba(169,169,169, .6)";
                } else {
                    style = line.style;
                }
                if (line.y) {
                    yValue = yScale.getPixelForValue(hl[index]);
                } else {
                    yValue = 0;
                }
                ctx1.lineWidth = 1;
                if (yValue) {
                    ctx1.beginPath();
                    ctx1.moveTo(50, yValue);
                    ctx1.lineTo(canvas.width, yValue);
                    ctx1.setLineDash([5, 10]);
                    ctx1.strokeStyle = style;
                    ctx1.stroke();
                }
                if (line.text) {
                    ctx1.fillStyle = style;
                    ctx1.fillText(line.text, 0, yValue + ctx1.lineWidth);
                }
            }
            return;
        }
    }
};


function setTTHorizontalLines(stockData) {
  
    switch (chartType) {
        case "price":
            let h1 = stockData.emaDetail.take_profit;
            let h2 = stockData.emaDetail.current_price;
            let h3 = stockData.emaDetail.stop_loss;
            horizontal_line_1 = parseInt(h1);
            horizontal_line_2 = parseInt(h2);
            horizontal_line_3 = parseInt(h3);
            break;
        case "fisher":
        case "rpi":
        case "z-score":
        case "modified-stochastic":
            let minVal = graphYScale.min;
            let maxVal = graphYScale.max;
            let diffVal = maxVal - minVal;
            horizontal_line_1 = ((90/100) * diffVal) + minVal;
            horizontal_line_2 = ((50/100) * diffVal) + minVal;
            horizontal_line_3 = ((10/100) * diffVal) + minVal;
            break;
        case "rsi":
            horizontal_line_1 = 80;
            horizontal_line_2 = 50;
            horizontal_line_3 = 20;
            break;
        default:
            break;
    }
}

In above code, setting horizontal lines at different positions in different cases.

1. In a case, when setting horizontal lines on static values like 20, 50 etc. it's working fine and showing like following (Note: horizontal lines positions are same for all charts)

   case "rsi":
   horizontal_line_1 = 80;
   horizontal_line_2 = 50;
   horizontal_line_3 = 20;
   break;

2. In 2nd case, when setting lines based on y-axis percentage like at 10%, 50% etc. It's also working fine and showing like following (Note: horizontal lines positions are same for all charts)

   case "modified-stochastic":
   let minVal = graphYScale.min;
   let maxVal = graphYScale.max;
   let diffVal = maxVal - minVal;
   horizontal_line_1 = ((90/100) * diffVal) + minVal;
   horizontal_line_2 = ((50/100) * diffVal) + minVal;
   horizontal_line_3 = ((10/100) * diffVal) + minVal;
   break;

3. In 3rd case, when setting lines based on price values of each stock which is a dynamic value, graph lines are messing around (Note: horizontal lines positions are different for each chart, these are mixing up and showing as following)

   case "price":
   let h1 = stockData.emaDetail.take_profit;
   let h2 = stockData.emaDetail.current_price;
   let h3 = stockData.emaDetail.stop_loss;
   horizontal_line_1 = parseInt(h1);
   horizontal_line_2 = parseInt(h2);
   horizontal_line_3 = parseInt(h3);
   break;

The problem can be seen in case 3, when setting horizontal lines at different positions for each chart. Looks like they are mixing and as a result showing extra lines on each chart. When I hover on a chart, extra lines disappear and only the actual lines are showing which is fine but as soon as I move my mouse pointer on other chart, previous chart is disturbing again.

So by default all charts are showing extra lines, If I hover on 1st chart, extra lines disappear for that but other charts keep showing extra lines.
When I hover on 2nd chart, extra lines disappear for 2nd chart, but 1st chart again start showing extra lines and other charts keep showing extra lines, and so on.

I'm trying to figure out the issue and fix it from couple of days but unable to track the bug. It looks like some issue with library when there are multiple charts and horizontal lines are at different positions for all charts.

Anyone else faced same issue and managed to fix, or anyone can help me on this

I can provide complete code files if required