Icons for category y-labels

[pmbert]

Hello,
happy new year to everybody.

I need help with a very specific issue. Using chartjs 3.6 with zoom plugin 1.2.

I had the audacious idea to replace the category labels of the y-axes with icons using drawImage in an afterRender plugin. It even works in principle. But there are 2 problems:

1. The icons are shown at the right places in the chart, but not after refreshing the browser. I have to move the mouse pointer over the data so that they can be seen. I read about to use onload function, but then the icons are flickering at zooming.

2. The first 1/2/3/4.. runs (the number depends) of the afterRender plugin a wrong y coordinate is determined: The position is slightly shifted upwards. I noticed, that also the height of the chartArea is too small in these cases. Is it possible, that the correct height is not yet known in afterRender at that time, because the height of the time-axis (x) depends on the displayed time interval?

I hope someone can help me or at least has an explanation of this behavior. It would be helpful if I could at least see in the afterRender plugin if the y-values are not yet correct. Then I could react to it.

My code:

var afterRenderDone = 0;
var config = {
    plugins: [{
        //exchanges category labels by icons
        afterRender: function(chart) {
            function processScale(scaleObj) {
                scaleObj._labelItems.forEach( function (label, ix) {
                    processLabel(label, scaleObj.position,
                                 scaleObj._labelSizes.widest.width);
                });
            } //processScale

            function processLabel(label, axPosition, labelSize) {
                var x = label.translation[0];
                if (axPosition === 'left') {x -= labelSize;}
                var y = label.translation[1] - labelSize/2;
                var labelText = label.label;
                if (labelText && y3Icons[labelText]) {
                    var icon = new Image();
                    icon.src = y3Icons[labelText];
                    ctx.drawImage(icon, x, y, labelSize, labelSize);
                    //console.log(afterRenderDone+' ctx.drawImage('+
                    //            labelText+','+x+','+y+','+
                    //            labelSize+','+labelSize+')');
                }
            } //processLabel

            afterRenderDone++;
            console.log(afterRenderDone+' afterRender');
            console.log('>> console.log(chart)');
            console.log(chart);
            console.log('>> console.log(chart.chartArea)');
            console.log(chart.chartArea);

            if (!y3Icons) {return;}
            var ctx = chart.ctx; 

            Object.keys(chart.scales).forEach(function(scaleKey) {
                var scaleObj = chart.scales[scaleKey];
                if (scaleObj.type === 'category' && scaleObj._ticksLength > 0 &&
                    scaleObj.axis === 'y') {
                    processScale(scaleObj);
                    config.options.scales[scaleObj.id].ticks.color = 'white';
                }
            });
        }, //afterRender
    }],
};

`

[kurkle]

Same problem as in this one: #10028

[pmbert]

With a lot of tests and trials, I found a solution for my problems:

1. I avoid the flickering of the icons by using icon.onload only for the first drawImage.

2. The second problem was a bit more difficult to solve. I found out that after creating the
   chart the plugin afterRender is called several times (mostly). The first time(s) with incorrect chartArea size, the last time(s) with correct chartArea size. The idea was, to skip the first afterRender calls. But how to do, if you don't know how many, and which is the correct size? The solution was to postpone the drawing till all afterRender calls are through.

It's ugly, but it's working for me. I wish chartjs would provide better possibilities.

My code now:

var y3Icons;
var y3IconsWidth;
var afterRenderCount = 0; //reset to 0 each time when updating the chart
var drawIconsTimer;

function drawIcons(chart, onload) {
    function enumLabels(scaleObj) {
        var font = scaleObj._labelItems[0].font;
        var iconSize = '0'.width(font) * y3IconsWidth;
        scaleObj._labelItems.forEach( function (label, ix) {
            processLabel(scaleObj.id, label, scaleObj.position,
                         Math.min(iconSize, scaleObj._labelSizes.widest.width));
        });
    } //enumLabels

    function processLabel(scaleId, label, axPosition, labelSize) {
        var x = label.translation[0];
        if (axPosition === 'left') {x -= labelSize;}
        var y = label.translation[1] - labelSize/2;
        var labelText = label.label;

        if (labelText && y3Icons[labelText]) {
            var icon = new Image();
            icon.src = y3Icons[labelText];
            if (onload) {
                //use onload only once to avoid flickering 
                icon.onload = function() {
                    ctx.drawImage(icon, x, y, labelSize, labelSize);
                };
            } else {
                ctx.drawImage(icon, x, y, labelSize, labelSize);
            }
            //console.log(afterRenderCount+' ctx.drawImage('+
            //            labelText+','+x+','+y+','+
            //            labelSize+','+labelSize+')');
            //make text labels invisible
            config.options.scales[scaleId].ticks.color = 'white';
        }
    } //processLabel

    drawIconsTimer = undefined;
    var ctx = chart.ctx; 

    //enum scales
    Object.keys(chart.scales).forEach(function(scaleKey) {
        var scaleObj = chart.scales[scaleKey];
        if (scaleObj.type === 'category' && scaleObj._ticksLength > 0 &&
            scaleObj.axis === 'y') {
            enumLabels(scaleObj);
        }
    });
    if (onload) {   //don't create a loop!!
        window.myLine.update(); //make text labels invisible
    }
} //drawIcons

var config = {
    plugins: [{
        //exchanges category labels by icons
        afterRender: function(chart) {
            afterRenderCount++;
            if (afterRenderCount > 1000) {afterRenderCount = 2;}

            if (!y3Icons) {return;}

            var scaleKeys = Object.keys(chart.scales);
            for (var i = 0; i < scaleKeys.length; i++) {
                var scaleObj = chart.scales[scaleKeys[i]];
                if (scaleObj.type === 'category' && scaleObj._ticksLength > 0 &&
                    scaleObj.axis === 'y') {
                    if (afterRenderCount === 1) {
                        //postpone drawing till all afterRenders are through, cause 
                        //only the last chartArea size is correct
                        if (!drawIconsTimer) {
                            drawIconsTimer = setTimeout(drawIcons, 1, chart, true);
                        }
                    } else {
                        if (!drawIconsTimer) {
                            drawIcons(chart, false);
                        }
                    }
                }
            }
        }, //afterRender
    }], //plugins
};

`

[pmbert]

Maybe there is someone who is interested in this topic after all. So here is the optimized solution for my particular problem:

In scale configuration:

            //hide text label, if icon defined or icon = blank
            //ensure that there's enough space for the icons
           .bounds: 'ticks',
           .ticks: 
                {color :   'black',
                 font:     {family: 'Monospace'}, //necessary to compute space 
                 callback: function(val, index, ticks) {
                               var text = y3Labels[index];
                               if(y3Icons[index]) {text = ' ';}
                               return text.padStart(Math.ceil(y3IconsWidth), ' ');
                           },
                 };

``

var y3Icons;            //icons array
var y3IconsWidth;       //icon size in characters
var iconSize;           //icon size in px
var drawIconsTimer, y3IconsCache = {}, y3IconsVisible, chartAreaBottomLast;

function drawIcons(chart) {
    function enumLabels(scaleObj) {
        if (!iconSize) {
            //all label texts have same length
            var charWidth = scaleObj._labelSizes.widest.width/
                            scaleObj._labelItems[0].label.length;
            iconSize = Math.min(charWidth * y3IconsWidth, 
                                scaleObj._labelSizes.widest.width);
        }

        scaleObj._labelItems.forEach( function (labelItem, ix) {
            if (y3Icons[ix] && y3Icons[ix] !== ' ') {
                var k = scaleObj.id+'_'+ix;

                var x = labelItem.translation[0];
                if (scaleObj.position === 'left') {x -= iconSize;}
                var y = labelItem.translation[1] - iconSize/2;

                if (y3IconsCache.hasOwnProperty(k)) {
                    changeIconPosition(k, x, y, iconSize);
                    y3IconsVisible[k] = true;
                } else {
                    setNewIcon(k, x, y, iconSize, y3Icons[ix]);
                }
            }
        });
    } //enumLabels

    function setNewIcon(k, x, y, iconSize, y3Icon) {
        var entry = [new Image(), x, y, iconSize];
        entry[0].src = y3Icon;

        //wait till image loaded
        entry[0].onload = function() {
            ctx.drawImage(entry[0], x, y, iconSize, iconSize);
            y3IconsCache[k] = entry;
            y3IconsVisible[k] = true;
        };
    } //setNewIcon

    function changeIconPosition(k, x, y, iconSize) {
        var entry = y3IconsCache[k];
        entry[1] = x;
        entry[2] = y;
        ctx.drawImage(entry[0], x, y, iconSize, iconSize);
    } //changeIconPosition

    var ctx = chart.ctx; 

    if (chartAreaBottomLast === chart.chartArea.bottom) {
        //chartArea not changed, we can just redraw
        Object.keys(y3IconsVisible).forEach(function(k) {
            var entry = y3IconsCache[k];
            ctx.drawImage(entry[0], entry[1], entry[2], entry[3], entry[3]);
        });
        return;
    }
    y3IconsVisible = {};

    //enum scales
    Object.keys(chart.scales).forEach(function(scaleKey) {
        var scaleObj = chart.scales[scaleKey];
        if (scaleObj.type === 'category' && scaleObj._ticksLength > 0 &&
            scaleObj.axis === 'y') {
            enumLabels(scaleObj);
        }
    });

    chartAreaBottomLast = chart.chartArea.bottom;
    drawIconsTimer = undefined;
} //drawIcons

var config = {
    plugins: [{
        //replaces category text labels by icons
        afterRender: function(chart) {
            if (drawIconsTimer) {return;}

            if (!chartAreaBottomLast) {
                //postpone drawing till all afterRenders are through, cause 
                //only the last chartArea position is definitively useful
                drawIconsTimer = setTimeout(drawIcons, 0, chart);
            } else {
                drawIcons(chart);
            }
        }, //afterRender
    }], //plugins

`