diff --git a/draftlogs/6924_fix.md b/draftlogs/6924_fix.md new file mode 100644 index 00000000000..a7a8d8d64e6 --- /dev/null +++ b/draftlogs/6924_fix.md @@ -0,0 +1 @@ + - Fix heatmap text color and `texttemplate` on cells with missing data [[#6924](https://github.com/plotly/plotly.js/pull/6924)] diff --git a/src/lib/index.js b/src/lib/index.js index 4c76991249c..a414f8e592d 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -1219,7 +1219,9 @@ function templateFormatString(string, labels, d3locale) { var fmt; if(format[0] === ':') { fmt = d3locale ? d3locale.numberFormat : lib.numberFormat; - value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value); + if(value !== '') { // e.g. skip missing data on heatmap + value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value); + } } if(format[0] === '|') { diff --git a/src/traces/heatmap/plot.js b/src/traces/heatmap/plot.js index a31513cdc4e..08ebf7e17c7 100644 --- a/src/traces/heatmap/plot.js +++ b/src/traces/heatmap/plot.js @@ -535,6 +535,7 @@ module.exports = function(gd, plotinfo, cdheatmaps, heatmapLayer) { var fontColor = font.color; if(!fontColor || fontColor === 'auto') { fontColor = Color.contrast( + d.z === undefined ? gd._fullLayout.plot_bgcolor : 'rgba(' + sclFunc(d.z).join() + ')' diff --git a/test/image/baselines/heatmap_xyz-gaps-on-sides.png b/test/image/baselines/heatmap_xyz-gaps-on-sides.png index 3247642795f..667076534f3 100644 Binary files a/test/image/baselines/heatmap_xyz-gaps-on-sides.png and b/test/image/baselines/heatmap_xyz-gaps-on-sides.png differ diff --git a/test/image/baselines/zz-heatmap-text-color-on-missing-data.png b/test/image/baselines/zz-heatmap-text-color-on-missing-data.png new file mode 100644 index 00000000000..a0a5487c15a Binary files /dev/null and b/test/image/baselines/zz-heatmap-text-color-on-missing-data.png differ diff --git a/test/image/mocks/zz-heatmap-text-color-on-missing-data.json b/test/image/mocks/zz-heatmap-text-color-on-missing-data.json new file mode 100644 index 00000000000..44ba15dcab0 --- /dev/null +++ b/test/image/mocks/zz-heatmap-text-color-on-missing-data.json @@ -0,0 +1,60 @@ +{ + "data": [ + { + "colorscale": "Reds", + "text": [ + [ + "One", + "Two", + "Three" + ], + [ + "Four", + "Five", + "Six" + ], + [ + "Seven", + "Eight", + "Nine" + ] + ], + "texttemplate": "%{text}", + "x": [ + 0, + 1, + 2 + ], + "y": [ + 0, + 1, + 2 + ], + "z": [ + [ + null, + 2, + 3 + ], + [ + 4, + null, + 6 + ], + [ + 7, + 8, + null + ] + ], + "type": "heatmap" + } + ], + "layout": { + "title": { + "text": "Heatmap text color should contrast with<br>background on cells with missing data" + }, + "width": 400, + "height": 400 + } +}