Color cells of a table

plotly.js
1

How can I conditionally set color to the cells of a table? I would like to set green if the value is less than a certain number, red otherwise (for example).

     var data = [{ type: 'table',
	 header: {
			    values: fore_draft_lst_show,

			    align: "center",
			    line: {width: 1, color: 'black'},
			    fill: {color: "grey"},
			    font: {family: "Arial", size: 12, color: "white"}
			  },
      cells: {
			    values: values,
			    align: "center",
			    line: {color: "black", width: 1},
			    font: {family: "Arial", size: 11, color: ["black"]},
			    fill: {
					color: [
					'rgba(140,124,66,1)',
					cellColorArray] // cellColorArray = ['rgba(255, 255, 255, 1)', 'rgba(100, 100, 100, 1)',...]
					}}
			}];

Here, cellColorArray is an array containing rgba values for each cell. However, when I run this code, it sets colors for entire rows and not individual cells.

2

Hi @lekha welcome to the forum! I think you need to pass the fill color as an array of arrays (where each row has an array). The Python documentation has an example which you could adapt to Javascript: https://plot.ly/python/table/#cell-color-based-on-variable

3

@lekha This https://plot.ly/~empet/14689/ is a plotly.py example of conditional cell color. You should adapt to plotly.js the line of code that assigns colors according to the cell value (green for positive numbers and red for negative):

fill = dict(color=['rgb(245, 245, 245)',#unique color for the first column
                  ['rgba(0, 250, 0, 0.8)' if val >= 0 else 'rgba(250, 0, 0, 0.8)' for val in vals] ]# colors for second column
4

Hello. I was able to get it to work using your suggestions. Thank you.