leeoniya / uPlot

📈 A small, fast chart for time series, lines, areas, ohlc & bars
MIT License
8.51k stars 371 forks source link

Add outliers in box & whisker graph to tooltip #853

Open hugovoerman opened 10 months ago

hugovoerman commented 10 months ago

Perhaps you can give me a pointer in how to add the outliers to the tooltip. Much appreciated!

I now add them just to another element in the page, but adding them to the tooltip would be much better. What I do I 'compress' the outliers to a count of the different numbers (to prevent enormous lists). Something like this in the update function of the tooltipplugin. outliersEl is document.getElementById("outliers"); set in the outerscope, where let legendEl; is positioned.

With your knowledge of uPlot, I think this can be done in a far more elegant way.

       outliersEl.innerText = "";
        if (u.data[6][u.cursor.idx] && u.data[6][u.cursor.idx].length > 0) {
            outliersEl.style.display = "block";
            let outliers = {};
            u.data[6][u.cursor.idx].forEach((outlier) => {
                if (typeof outliers[outlier] == 'undefined') {
                    outliers[outlier] = 1;
                } else {
                    outliers[outlier]++;
                }
            });
            outliersEl.innerHTML = "<strong>Outliers:</strong>" + JSON.stringify(outliers, null, 2);
        } else {
            outliersEl.style.display = "none";
        }

Originally posted by @hugovoerman in https://github.com/leeoniya/uPlot/issues/852#issuecomment-1622607372