jqplot to image: legend swatches overlapping in jQuery > 3.2.1

[SunflowerFuchs]

In jQuery up to 3.2.1, when asking for the position() of a div in a td, the position would be relative to the table. Since 3.3.0+, the position is relative to the td, so that all swatches have a position of 0/0 and lay over each other.

jQuery 3.2.1:

jQuery 3.3.1:

[FacilitorKoen]

Experiencing the same issue.
Legend-labels, when centered, also seem affected (unsure if this is the same problem)

[robertoferreirajrr]

I have implemented a fix in function _jqpToImage, works for me:

$(el).find('div.jqplot-table-legend-swatch-outline').each(function () {
     // get the first div and stroke it
     var elem = $(this);
     newContext.strokeStyle = elem.css('border-top-color');

     newContext.strokeStyle = elem.css('border-top-color');


    var containerOffset = elem.parent().parent().offset();

    var rowOffset = elem.offset();
    console.log(containerOffset.top);

    var position = {
               top: ((rowOffset.top - containerOffset.top) * 5) == 0 ? 3 : (rowOffset.top - containerOffset.top) * 5,
               left: rowOffset.left - containerOffset.left
                              };
    console.log(position);

    var l = left + position.left;
    var t = top + position.top;
    //newContext.strokeRect(l, t, elem.innerWidth(), elem.innerHeight());

    // now fill the swatch

    l += parseInt(elem.css('padding-left'), 10);
    t += parseInt(elem.css('padding-top'), 10);
    var h = elem.innerHeight() - 2 * parseInt(elem.css('padding-top'), 10);
    var w = elem.innerWidth() - 2 * parseInt(elem.css('padding-left'), 10);


    var swatch = elem.children('div.jqplot-table-legend-swatch');
    newContext.fillStyle = swatch.css('background-color');
    newContext.fillRect(l, t, w, h);
    console.log(t);
});

[GitHubUser4234]

Hi @robertoferreirajrr, I have tried your fix for pie charts (jqplot.1.0.9.d96a669 / jquery 3.6.0), but unfortunately it doesn't really fix the issue in this case. However a slight change in the legend swatches can be noticed:

Without the fix:

With the fix:

[GitHubUser4234]

With the following code it looks quite right:

            // find all the swatches
            $(el).find('div.jqplot-table-legend-swatch-outline').each(function() {
                // get the first div and stroke it
                var elem = $(this);
                newContext.strokeStyle = elem.css('border-top-color');
				
				var elOffset = $(el).offset();
				
				var rowOffset = elem.parent().offset();
				
				var customPosition = {
					top: rowOffset.top - elOffset.top + parseInt(elem.parent().css('padding-top'), 0),
					left: rowOffset.left - elOffset.left + parseInt(elem.parent().css('padding-left'), 0)
				};
				
                var l = left + customPosition.left;
                var t = top + customPosition.top;
                newContext.strokeRect(l, t, elem.innerWidth(), elem.innerHeight());

                // now fill the swatch
                
                l += parseInt(elem.css('padding-left'), 10);
                t += parseInt(elem.css('padding-top'), 10);
                var h = elem.innerHeight() - 2 * parseInt(elem.css('padding-top'), 10);
                var w = elem.innerWidth() - 2 * parseInt(elem.css('padding-left'), 10);

                var swatch = elem.children('div.jqplot-table-legend-swatch');
                newContext.fillStyle = swatch.css('background-color');
                newContext.fillRect(l, t, w, h);
            });

Result: