diff --git a/draftlogs/6038_add.md b/draftlogs/6038_add.md
new file mode 100644
index 00000000000..0073d0eb108
--- /dev/null
+++ b/draftlogs/6038_add.md
@@ -0,0 +1,3 @@
+ - Add `texttemplate`, `textposition`, `textfont`, `textangle`,
+ `outsidetextfont`, `insidetextfont`, `insidetextanchor`,
+ `constraintext` and `cliponaxis` to `histogram` trace [[#6038](https://github.com/plotly/plotly.js/pull/6038)]
diff --git a/src/traces/bar/plot.js b/src/traces/bar/plot.js
index 8923665593d..efa169fc631 100644
--- a/src/traces/bar/plot.js
+++ b/src/traces/bar/plot.js
@@ -428,7 +428,7 @@ function appendBarText(gd, plotinfo, bar, cd, i, x0, x1, y0, y1, opts, makeOnCom
}
transform.fontSize = font.size;
- recordMinTextSize(trace.type, transform, fullLayout);
+ recordMinTextSize(trace.type === 'histogram' ? 'bar' : trace.type, transform, fullLayout);
calcBar.transform = transform;
transition(textSelection, fullLayout, opts, makeOnCompleteCallback)
diff --git a/src/traces/histogram/attributes.js b/src/traces/histogram/attributes.js
index 4eac95a177d..2eba375a3bb 100644
--- a/src/traces/histogram/attributes.js
+++ b/src/traces/histogram/attributes.js
@@ -3,6 +3,8 @@
var barAttrs = require('../bar/attributes');
var axisHoverFormat = require('../../plots/cartesian/axis_format_attributes').axisHoverFormat;
var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
+var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
+var fontAttrs = require('../../plots/font_attributes');
var makeBinAttrs = require('./bin_attributes');
var constants = require('./constants');
var extendFlat = require('../../lib/extend').extendFlat;
@@ -198,6 +200,44 @@ module.exports = {
keys: constants.eventDataKeys
}),
+ texttemplate: texttemplateAttrs({
+ arrayOk: false,
+ editType: 'plot'
+ }, {
+ keys: ['label', 'value']
+ }),
+
+ textposition: extendFlat({}, barAttrs.textposition, {
+ arrayOk: false
+ }),
+
+ textfont: fontAttrs({
+ arrayOk: false,
+ editType: 'plot',
+ colorEditType: 'style',
+ description: 'Sets the text font.'
+ }),
+
+ outsidetextfont: fontAttrs({
+ arrayOk: false,
+ editType: 'plot',
+ colorEditType: 'style',
+ description: 'Sets the font used for `text` lying outside the bar.'
+ }),
+
+ insidetextfont: fontAttrs({
+ arrayOk: false,
+ editType: 'plot',
+ colorEditType: 'style',
+ description: 'Sets the font used for `text` lying inside the bar.'
+ }),
+
+ insidetextanchor: barAttrs.insidetextanchor,
+
+ textangle: barAttrs.textangle,
+ cliponaxis: barAttrs.cliponaxis,
+ constraintext: barAttrs.constraintext,
+
marker: barAttrs.marker,
offsetgroup: barAttrs.offsetgroup,
diff --git a/src/traces/histogram/defaults.js b/src/traces/histogram/defaults.js
index c71c7927f95..78842de9f8e 100644
--- a/src/traces/histogram/defaults.js
+++ b/src/traces/histogram/defaults.js
@@ -4,6 +4,7 @@ var Registry = require('../../registry');
var Lib = require('../../lib');
var Color = require('../../components/color');
+var handleText = require('../bar/defaults').handleText;
var handleStyleDefaults = require('../bar/style_defaults');
var attributes = require('./attributes');
@@ -22,6 +23,16 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
}
coerce('text');
+ var textposition = coerce('textposition');
+ handleText(traceIn, traceOut, layout, coerce, textposition, {
+ moduleHasSelected: true,
+ moduleHasUnselected: true,
+ moduleHasConstrain: true,
+ moduleHasCliponaxis: true,
+ moduleHasTextangle: true,
+ moduleHasInsideanchor: true
+ });
+
coerce('hovertext');
coerce('hovertemplate');
coerce('xhoverformat');
diff --git a/test/image/baselines/hist_all_integer.png b/test/image/baselines/hist_all_integer.png
index 996aa7f3fb0..1ff41fcd34b 100644
Binary files a/test/image/baselines/hist_all_integer.png and b/test/image/baselines/hist_all_integer.png differ
diff --git a/test/image/baselines/hist_category.png b/test/image/baselines/hist_category.png
index 66619f674da..24b2379fc46 100644
Binary files a/test/image/baselines/hist_category.png and b/test/image/baselines/hist_category.png differ
diff --git a/test/image/baselines/hist_cum_stacked.png b/test/image/baselines/hist_cum_stacked.png
index b5253189f97..950ffa6510f 100644
Binary files a/test/image/baselines/hist_cum_stacked.png and b/test/image/baselines/hist_cum_stacked.png differ
diff --git a/test/image/baselines/hist_stacked.png b/test/image/baselines/hist_stacked.png
index 02d78d81828..b5b580fb99b 100644
Binary files a/test/image/baselines/hist_stacked.png and b/test/image/baselines/hist_stacked.png differ
diff --git a/test/image/baselines/hist_summed.png b/test/image/baselines/hist_summed.png
index e3e4f17c008..3020f02b0fc 100644
Binary files a/test/image/baselines/hist_summed.png and b/test/image/baselines/hist_summed.png differ
diff --git a/test/image/baselines/histogram-offsetgroups.png b/test/image/baselines/histogram-offsetgroups.png
index 7fda2229010..74a1b96cdc6 100644
Binary files a/test/image/baselines/histogram-offsetgroups.png and b/test/image/baselines/histogram-offsetgroups.png differ
diff --git a/test/image/baselines/histogram_barmode_relative.png b/test/image/baselines/histogram_barmode_relative.png
index f8fa0844253..86e129a2d46 100644
Binary files a/test/image/baselines/histogram_barmode_relative.png and b/test/image/baselines/histogram_barmode_relative.png differ
diff --git a/test/image/baselines/histogram_colorscale.png b/test/image/baselines/histogram_colorscale.png
index f3c150bbee3..f3e859c2f49 100644
Binary files a/test/image/baselines/histogram_colorscale.png and b/test/image/baselines/histogram_colorscale.png differ
diff --git a/test/image/mocks/hist_all_integer.json b/test/image/mocks/hist_all_integer.json
index ffc5a32748a..944c9e0f12f 100644
--- a/test/image/mocks/hist_all_integer.json
+++ b/test/image/mocks/hist_all_integer.json
@@ -1,6 +1,13 @@
{
"data":[{
"x":["1","2","3","1","2","4","2","3","4","1","2","3","1","2","3","1","2","3","1","2","3","1","2","3","1","2","3","2","3","4","2","3","4","2","3","4","2","3","4"],
+ "texttemplate": "%{value}",
+ "textangle": -45,
+ "textfont": {
+ "size": 32,
+ "color": "rgba(255,255,0,0.5)",
+ "family": "Times New Roman"
+ },
"type":"histogram"
}],
"layout":{"height":300,"width":400}
diff --git a/test/image/mocks/hist_category.json b/test/image/mocks/hist_category.json
index 30de419297c..d9860092596 100644
--- a/test/image/mocks/hist_category.json
+++ b/test/image/mocks/hist_category.json
@@ -1,2 +1,23 @@
-{"data":[{"x":["a","b","c","a","b","d","b","c","d"],"type":"histogram"}],
-"layout":{"height":300,"width":400}}
+{
+ "data": [
+ {
+ "x": [
+ "a",
+ "b",
+ "c",
+ "a",
+ "b",
+ "d",
+ "b",
+ "c",
+ "d"
+ ],
+ "texttemplate": "%{value} X %{label}",
+ "type": "histogram"
+ }
+ ],
+ "layout": {
+ "height": 300,
+ "width": 400
+ }
+}
diff --git a/test/image/mocks/hist_cum_stacked.json b/test/image/mocks/hist_cum_stacked.json
index 4d4c5c655c3..cf24af2ba36 100644
--- a/test/image/mocks/hist_cum_stacked.json
+++ b/test/image/mocks/hist_cum_stacked.json
@@ -2,6 +2,8 @@
"data": [{
"x": [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5, 6, 6, 6, 6, 7, 7, 7, 8, 8, 9, 9, 10],
"type": "histogram",
+ "texttemplate": "%{value}",
+ "insidetextanchor": "middle",
"cumulative": {"enabled": true},
"xbins": {"start": 0.5, "end": 10.5, "size": 1},
"marker": {"color": "blue", "line": {"width": 2, "color": "#000"}},
@@ -10,6 +12,8 @@
{
"x": [3, 3, 4, 5, 6, 7, 7],
"type": "histogram",
+ "texttemplate": "%{value}",
+ "insidetextanchor": "middle",
"cumulative": {"enabled": true, "currentbin": "exclude"},
"xbins": {"start": 0.5, "end": 10.5},
"marker": {"color": "red", "line": {"width": 2, "color": "#000"}},
diff --git a/test/image/mocks/hist_stacked.json b/test/image/mocks/hist_stacked.json
index 5588ec4989e..64aefa505a0 100644
--- a/test/image/mocks/hist_stacked.json
+++ b/test/image/mocks/hist_stacked.json
@@ -1,9 +1,16 @@
{
"data": [{
"x": [1, 1, 1, 2, 2],
+ "text": "Blues",
+ "textposition": "inside",
+ "texttemplate": "%{value}
%{text}",
"type": "histogram"
}, {
"x": [1, 2, 3, 4],
+ "text": "Orange",
+ "textposition": "outside",
+ "cliponaxis": false,
+ "texttemplate": "%{value}
%{text}",
"type": "histogram"
}],
"layout": {"height": 300, "width": 400, "barmode": "stack"}
diff --git a/test/image/mocks/hist_summed.json b/test/image/mocks/hist_summed.json
index 0c306cd1107..ab18eae5539 100644
--- a/test/image/mocks/hist_summed.json
+++ b/test/image/mocks/hist_summed.json
@@ -16,6 +16,7 @@
"Oranges",
"Bananas"
],
+ "texttemplate": "%{value}
%{label}",
"type": "histogram"
}
],
diff --git a/test/image/mocks/histogram-offsetgroups.json b/test/image/mocks/histogram-offsetgroups.json
index 42cb0d4f567..d27a969f75e 100644
--- a/test/image/mocks/histogram-offsetgroups.json
+++ b/test/image/mocks/histogram-offsetgroups.json
@@ -58,6 +58,10 @@
}
],
"layout": {
+ "uniformtext": {
+ "mode": "hide",
+ "minsize": 5
+ },
"showlegend": false,
"grid": {
"rows": 2,
diff --git a/test/image/mocks/histogram_barmode_relative.json b/test/image/mocks/histogram_barmode_relative.json
index 7437af5f8e0..fb5373351e9 100644
--- a/test/image/mocks/histogram_barmode_relative.json
+++ b/test/image/mocks/histogram_barmode_relative.json
@@ -1,9 +1,11 @@
{
"data": [{
"type": "histogram",
+ "texttemplate": "%{value}",
"x": [9, 9, 3, 2, 5, 1, 3, 0, 6, 8, 5, 7, 2, 9, 9, 8, 5, 4, 1, 9, 2, 8, 0, 7, 2, 3, 5, 0, 3, 8, 2, 1, 7, 7, 7, 3, 9, 7, 8, 1, 7, 9, 4, 6, 2, 4, 2, 9, 3, 1, 5, 1, 6, 7, 6, 1, 6, 8, 6, 7, 8, 3, 7, 3, 1, 0, 2, 6, 1, 2, 7, 2, 9, 6, 2, 8, 0, 0, 9, 8, 5, 5, 8, 3, 5, 7, 7, 8, 3, 9, 3, 1, 5, 3, 5, 0, 8, 9, 4, 3]
}, {
"type": "histogram",
+ "texttemplate": "%{value}",
"x": [6, 7, 8, 0, 8, 1, 5, 4, 4, 3, 4, 7, 5, 3, 9, 5, 2, 5, 5, 4, 3, 5, 2, 6, 3, 9, 8, 5, 3, 8, 7, 2, 2, 7, 3, 7, 0, 1, 1, 1, 2, 1, 4, 9, 3, 5, 4, 1, 1, 2, 0, 2, 8, 1, 0, 3, 1, 2, 3, 5, 3, 8, 6, 1, 1, 0, 0, 0, 8, 6, 0, 8, 6, 8, 0, 9, 4, 4, 0, 7, 7, 9, 2, 8, 0, 9, 0, 5, 7, 2, 9, 6, 5, 0, 0, 4, 6, 0, 9, 8]
}],
"layout": {
diff --git a/test/image/mocks/histogram_colorscale.json b/test/image/mocks/histogram_colorscale.json
index 2bec28f0766..e991ebe5626 100644
--- a/test/image/mocks/histogram_colorscale.json
+++ b/test/image/mocks/histogram_colorscale.json
@@ -13,6 +13,11 @@
"cmax": 5
},
"x": [ 0, 1, 1, 2, 2, 2, 3, 3, 4 ],
+ "texttemplate": "%{value}",
+ "textposition": "inside",
+ "textfont": {
+ "size": 64
+ },
"type": "histogram"
}
],
diff --git a/test/plot-schema.json b/test/plot-schema.json
index a49f77f14a5..7a5a985e8c5 100644
--- a/test/plot-schema.json
+++ b/test/plot-schema.json
@@ -27922,6 +27922,24 @@
"editType": "calc",
"valType": "string"
},
+ "cliponaxis": {
+ "description": "Determines whether the text nodes are clipped about the subplot axes. To show the text nodes above axis lines and tick labels, make sure to set `xaxis.layer` and `yaxis.layer` to *below traces*.",
+ "dflt": true,
+ "editType": "plot",
+ "valType": "boolean"
+ },
+ "constraintext": {
+ "description": "Constrain the size of text inside or outside a bar to be no larger than the bar itself.",
+ "dflt": "both",
+ "editType": "calc",
+ "valType": "enumerated",
+ "values": [
+ "inside",
+ "outside",
+ "both",
+ "none"
+ ]
+ },
"cumulative": {
"currentbin": {
"description": "Only applies if cumulative is enabled. Sets whether the current bin is included, excluded, or has half of its value included in the current cumulative value. *include* is the default for compatibility with various other tools, however it introduces a half-bin bias to the results. *exclude* makes the opposite half-bin bias, and *half* removes it.",
@@ -28338,6 +28356,38 @@
"editType": "none",
"valType": "string"
},
+ "insidetextanchor": {
+ "description": "Determines if texts are kept at center or start/end points in `textposition` *inside* mode.",
+ "dflt": "end",
+ "editType": "plot",
+ "valType": "enumerated",
+ "values": [
+ "end",
+ "middle",
+ "start"
+ ]
+ },
+ "insidetextfont": {
+ "color": {
+ "editType": "style",
+ "valType": "color"
+ },
+ "description": "Sets the font used for `text` lying inside the bar.",
+ "editType": "plot",
+ "family": {
+ "description": "HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include *Arial*, *Balto*, *Courier New*, *Droid Sans*,, *Droid Serif*, *Droid Sans Mono*, *Gravitas One*, *Old Standard TT*, *Open Sans*, *Overpass*, *PT Sans Narrow*, *Raleway*, *Times New Roman*.",
+ "editType": "plot",
+ "noBlank": true,
+ "strict": true,
+ "valType": "string"
+ },
+ "role": "object",
+ "size": {
+ "editType": "plot",
+ "min": 1,
+ "valType": "number"
+ }
+ },
"legendgroup": {
"description": "Sets the legend group for this trace. Traces part of the same legend group hide/show at the same time when toggling legend items.",
"dflt": "",
@@ -29182,6 +29232,27 @@
"h"
]
},
+ "outsidetextfont": {
+ "color": {
+ "editType": "style",
+ "valType": "color"
+ },
+ "description": "Sets the font used for `text` lying outside the bar.",
+ "editType": "plot",
+ "family": {
+ "description": "HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include *Arial*, *Balto*, *Courier New*, *Droid Sans*,, *Droid Serif*, *Droid Sans Mono*, *Gravitas One*, *Old Standard TT*, *Open Sans*, *Overpass*, *PT Sans Narrow*, *Raleway*, *Times New Roman*.",
+ "editType": "plot",
+ "noBlank": true,
+ "strict": true,
+ "valType": "string"
+ },
+ "role": "object",
+ "size": {
+ "editType": "plot",
+ "min": 1,
+ "valType": "number"
+ }
+ },
"selected": {
"editType": "style",
"marker": {
@@ -29248,11 +29319,57 @@
"editType": "calc",
"valType": "string"
},
+ "textangle": {
+ "description": "Sets the angle of the tick labels with respect to the bar. For example, a `tickangle` of -90 draws the tick labels vertically. With *auto* the texts may automatically be rotated to fit with the maximum size in bars.",
+ "dflt": "auto",
+ "editType": "plot",
+ "valType": "angle"
+ },
+ "textfont": {
+ "color": {
+ "editType": "style",
+ "valType": "color"
+ },
+ "description": "Sets the text font.",
+ "editType": "plot",
+ "family": {
+ "description": "HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include *Arial*, *Balto*, *Courier New*, *Droid Sans*,, *Droid Serif*, *Droid Sans Mono*, *Gravitas One*, *Old Standard TT*, *Open Sans*, *Overpass*, *PT Sans Narrow*, *Raleway*, *Times New Roman*.",
+ "editType": "plot",
+ "noBlank": true,
+ "strict": true,
+ "valType": "string"
+ },
+ "role": "object",
+ "size": {
+ "editType": "plot",
+ "min": 1,
+ "valType": "number"
+ }
+ },
+ "textposition": {
+ "arrayOk": false,
+ "description": "Specifies the location of the `text`. *inside* positions `text` inside, next to the bar end (rotated and scaled if needed). *outside* positions `text` outside, next to the bar end (scaled if needed), unless there is another bar stacked on this one, then the text gets pushed inside. *auto* tries to position `text` inside the bar, but if the bar is too small and no bar is stacked on this one the text is moved outside. If *none*, no text appears.",
+ "dflt": "auto",
+ "editType": "calc",
+ "valType": "enumerated",
+ "values": [
+ "inside",
+ "outside",
+ "auto",
+ "none"
+ ]
+ },
"textsrc": {
"description": "Sets the source reference on Chart Studio Cloud for `text`.",
"editType": "none",
"valType": "string"
},
+ "texttemplate": {
+ "description": "Template string used for rendering the information text that appear on points. Note that this will override `textinfo`. Variables are inserted using %{variable}, for example \"y: %{y}\". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example \"Price: %{y:$.2f}\". https://github.com/d3/d3-format/tree/v1.4.5#d3-format for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example \"Day: %{2019-01-01|%A}\". https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format for details on the date formatting syntax. Every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available. variables `label` and `value`.",
+ "dflt": "",
+ "editType": "plot",
+ "valType": "string"
+ },
"transforms": {
"items": {
"transform": {