Possible bug with table cell font colors

plotly.js
1

image
image.png867×168 12.3 KB

Hi,
I noticed a potential bug when trying to assign cell colors to a financial dashboard i’m working on. After about 17 rows or so, the coloring for 18th row is skipped (instead of positive values as green and negative values as red, the entire row shows default black values) and I noticed that the error happens again around row 35. I am only modeling 52 weeks of data so i’m unsure if the issue would pop up again around row 53 or so.

To reproduce I tried simple alternating colors against the Bird Test demo from the plotly.js source code & I noticed that the color alternation skips row 26 and picks up again on row 27.

This textbox doesn’t allow enough characters for me to post my entire code but this is the content of table.data.cells.font.color as an example:

for(var c = 0; c < 7; c++){
var cellColorArray = [];
for(var i < 0; i < 52; i++){
cellColorArray.push(i%2 != 1 ? “red” : “black”)
}
table.data.cells.font.color.push(cellColorArray);
}

1 Like
2

Would you mind sharing a fully reproducible example (not just your color cells) to help us debug? Thank you.

3 
var table = {
    "layout": {
        "width": 1000,
        "height":  550,
        "title": "Deep-water horizon oil spill - observed birds<br><sup><i>U.S. Fish & Wildlife Service</i></sup>"
    },

    "data": [{

        "type": "table",

        "domain": {
            "x": [0, 1],
            "y": [0, 1]
        },

        "columnwidth": [20, 40, 25, 25, 30, 20, 30],
        "columnorder": [0, 1, 2, 3, 4, 5, 6],

        "header": {

            "height": 30,

            "values": [["<b>#</b>", ""], ["<b>Species</b>", ""], ["Latitude", "$\\phi °$"], ["Longitude", "$\\lambda °$"], ["Exposure", ""], ["Condition", "<i>Live / Dead</i>"], ["Date", "<i>yyyy-mm-dd</i>"]],

            "align": ["right", "left", "right", "right", "left", "left", "left"],

            "line": {
                "color": "lightgray",
                "width": 0.0
            },

            "fill": {
                "color": ["dimgray", "grey"]
            },

            "font": {
                "family": "Arial",
                "size": [[14, 12]],
                "color": ["white", "white", "white", "white", "white", ["pink", "white"], "white"]
            }
        },

        "cells": {

            "values": [],

            "format": [
                null, null, ",.2f", ",.2f", null
            ],

            "prefix": null,
            "suffix": [".", null, "°", "°", null],

            "height": 26,

            "align": ["right", "left", "right", "right", "left", "left", "left"],

            "line": {
                "color": [
                    "grey"
                ],
                "width": 1
            },

            "font": {
                "family": "Arial",
                "size": 12,
                "color": []
            }
        }
    }]
}

for(var c = 0; c < 7; c++){
    var cellColorArray = [];
    var testValueArray = [];
    for(var i = 0; i < 52; i++){
        testValueArray.push(i);
        var color = (i%2 != 1) ? 'red' : 'black'
        cellColorArray.push(color);
    }
    table.data[0].cells.values.push(testValueArray);
    table.data[0].cells.font.color.push(cellColorArray);
}




Plotly.plot('chartSpace', table.data, table.layout);
4

(I hope you’ll be able to wrap that in some simple HTML, again the chart div should have the ID ‘chartSpace’)

in this example you’ll notice that rows 12 & 13 are both red, as well as 25 & 26

image
image.png881×389 9.56 KB

5

Thanks.

You can subscribe to https://github.com/plotly/plotly.js/issues/2130 for the latest development info.

6

Hi, any idea if this is being worked on? I Have it in front of traders with the incorrect colors still.

Thanks!

7

I’m having a similar issue. Is there an update on this?

49%20PM
Screen Shot 2019-10-15 at 2.33.49 PM.png1446×816 203 KB

1 Like
8

I’m also having the same issue with another table. I guess Plotly hasn’t worked on it yet :frowning: