plotly / plotly/plotly.js

Plot margins do not reset on Plotly.react() if layout.legend.xref or yref are set to "container"

Đang mở
#6,612 3 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

bug P3
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:

image

With paper:

image

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

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. 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.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. 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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.