Skip to content

New attributes to display text on the histogram trace #6038

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 1, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions draftlogs/6038_add.md
Original file line number Diff line number Diff line change
@@ -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)]
2 changes: 1 addition & 1 deletion src/traces/bar/plot.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you explain how this relates to the clearMinTextSize call above, where it's just 'bar', not trace.type at all?

// don't clear bar when this is called from waterfall or funnel
clearMinTextSize('bar', fullLayout);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Histogram plots in bar layer. But waterfall and funnel have their own layers.

calcBar.transform = transform;

transition(textSelection, fullLayout, opts, makeOnCompleteCallback)
Expand Down
40 changes: 40 additions & 0 deletions src/traces/histogram/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down
11 changes: 11 additions & 0 deletions src/traces/histogram/defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand All @@ -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');
Expand Down
Binary file modified test/image/baselines/hist_all_integer.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/hist_category.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/hist_cum_stacked.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/hist_stacked.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/hist_summed.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/histogram-offsetgroups.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/histogram_barmode_relative.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/histogram_colorscale.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions test/image/mocks/hist_all_integer.json
Original file line number Diff line number Diff line change
@@ -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}
Expand Down
25 changes: 23 additions & 2 deletions test/image/mocks/hist_category.json
Original file line number Diff line number Diff line change
@@ -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
}
}
4 changes: 4 additions & 0 deletions test/image/mocks/hist_cum_stacked.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"}},
Expand All @@ -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"}},
Expand Down
7 changes: 7 additions & 0 deletions test/image/mocks/hist_stacked.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
{
"data": [{
"x": [1, 1, 1, 2, 2],
"text": "Blues",
"textposition": "inside",
"texttemplate": "%{value}<br>%{text}",
"type": "histogram"
}, {
"x": [1, 2, 3, 4],
"text": "Orange",
"textposition": "outside",
"cliponaxis": false,
"texttemplate": "%{value}<br>%{text}",
"type": "histogram"
}],
"layout": {"height": 300, "width": 400, "barmode": "stack"}
Expand Down
1 change: 1 addition & 0 deletions test/image/mocks/hist_summed.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"Oranges",
"Bananas"
],
"texttemplate": "%{value}<br>%{label}",
"type": "histogram"
}
],
Expand Down
4 changes: 4 additions & 0 deletions test/image/mocks/histogram-offsetgroups.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@
}
],
"layout": {
"uniformtext": {
"mode": "hide",
"minsize": 5
},
"showlegend": false,
"grid": {
"rows": 2,
Expand Down
2 changes: 2 additions & 0 deletions test/image/mocks/histogram_barmode_relative.json
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
5 changes: 5 additions & 0 deletions test/image/mocks/histogram_colorscale.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
],
Expand Down
117 changes: 117 additions & 0 deletions test/plot-schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down Expand Up @@ -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": "",
Expand Down Expand Up @@ -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": {
Expand Down Expand Up @@ -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": {
Expand Down