Plot margins do not reset on Plotly.react() if layout.legend.xref or yref are set to "container"
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- JavaScript
- Star
- 18.3k
- Fork
- 2k
- Merge trung bình
- 2 ngày 12 giờ
- Pull request đã merge (30 ngày)
- 28
Mô tả
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 ?
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Tái hiện hành vi trong CodePen được liên kết, tập trung vào bản cập nhật Plotly.react() thay đổi xref/yref của chú giải thành "container", sau đó khôi phục bố cục không có dữ liệu. Theo dõi cách chú giải của container ảnh hưởng đến lề của biểu đồ và vị trí của annotation; hoàn tất khi các lề được đặt lại và annotation được căn giữa sau bản cập nhật, khớp với hành vi tham chiếu trên giấy.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- javascript
- Lĩnh vực
- data-visualization
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 42/100