Plot margins do not reset on Plotly.react() if layout.legend.xref or yref are set to "container"
还没有人认领这个 Issue。
- 主要语言
- JavaScript
- 星标
- 18.3k
- 派生
- 2k
- 平均合并
- 2 天 12 小时
- 30 天内合并 PR
- 28
描述
I have designed an use case where there is no data to display on the chart: please imagine an user selecting from a list of countries to display some data and the selected country has no data to be displayed. I have all the data available, the page doesn't need to be refreshed (we're trying to keep it dynamic) so the Plot needs to be updated.
Please check this pen: https://codepen.io/bleah1/pen/NWOoZXd where, after 4 seconds, both plots are updated.
As such, I update the Plot using Plotly.react() with no data and a special layout:
const noDataChartLayout = {
width: 400,
autosize: true,
title: null,
margin: { t: 0, b: 0, pad: 0 },
// showlegend: false,
legend: {
yref: "paper",
xref: "paper",
y: 0,
x: 0
},
hovermode: false,
dragmode: false,
xaxis: {
visible: false
},
yaxis: {
visible: false
},
annotations: [
{
text: "Chart unavailable.<br>No matching data found.",
xref: "paper",
yref: "paper",
showarrow: false,
font: {
size: 20
}
}
]
};
The issue is that when the legend is set with the new layout.legend.xref / yref features to container the margins of the plot do not reset even after updating the layout.
I've tried using or commenting the following layout props:
// showlegend: false,
legend: {
yref: "paper",
xref: "paper",
y: 0,
x: 0
},
but the annotations still aren't centered when using layout.legend.xref / yref set to container.
With container:
With paper:
I would like to use the new layout.legend.xref / yref features because with them I don't need to manually calculate legend.x and y positioning and layout.margin for each view size for each chart.
Any thoughts ?
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
复现链接的 CodePen 中的行为,重点关注将图例的 xref/yref 更改为 "container",然后恢复无数据布局的 Plotly.react() 更新。跟踪容器图例如何影响绘图边距和注释定位;当边距重置且注释在更新后居中,并与纸质参考的行为一致时,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- javascript
- 领域
- data-visualization
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 42/100