Графическая диаграмма некорректно работает с вызовом HTMX

Я добавил HTMX в свой проект на Django, и после этого моя диаграмма plotly начала давать сбои. Я сгенерировал HTML для диаграммы с помощью:

def get_chart(f, power, resolution):
    import pandas as pd

    yaxis_title = "Power, %"

    try:
        df = pd.read_csv(
            os.path.join(settings.MEDIA_ROOT, f),
            compression="zip",
            sep=" ",
            header=None,
            names=["Date", "Val"],
        )

        if power and power != 100:
            df.Val = df.Val.apply(lambda x: x * power / 100)
            yaxis_title = "Power, kW"

        fig = go.Figure(
            data=[
                go.Scatter(
                    x=df["Date"],
                    y=df["Val"],
                ),
            ],
        )

        fig.update_layout(
            title="",
            yaxis_title=yaxis_title,
            hovermode="x unified",
            width=resolution.value[0],
            height=resolution.value[1],
            margin=dict(
                l=4,
                r=4,
                b=4,
                t=40,
                pad=4,
            ),
        )

        fig.update_yaxes(
            fixedrange=False,
        )

        return fig.to_html(full_html=False, div_id="rtv-chart")

    except (OSError, ValueError, BadZipFile) as e:
        print(e)
        return None

Которые я отправляю обратно с видом:

def chart(request, pk):
    obj = RtvLog.objects.get(id=pk)
    if res := request.GET.get("size"):
        chart = get_chart(obj.log.file.name, obj.power, Resolution[res])
    else:
        chart = get_chart(obj.log.file.name, obj.power, Resolution.SVGA)
    if chart:
        return HttpResponse(chart, content_type="text/html")
    return HttpResponse(status=404)

И затем отрисовать в шаблоне:

  <div class="flex gap-4 w-fit">
    <div hx-get="{% url 'tools:get_chart' object.id %}"
         hx-trigger="load once, change from:#size"
         hx-include="#size"
         hx-indicator="#chart-indicator"
         hx-target="this">
      <div class="htmx-indicator"
           id="chart-indicator">{% include "block-spinner.html" %}</div>
    </div>
   
      <fieldset id="size">
        <legend>Select chart size:</legend>
        {% for size in sizes %}
          <div>
            <input type="radio"
                   id="size_{{ size }}"
                   name="size"
                   value="{{ size }}"
                   {% if forloop.counter == 2 %}checked{% endif %} />
            <label for="size_{{ size }}">{{ size }}</label>
          </div>
        {% endfor %}
      </fieldset>
    </div>
  </div>

При первой загрузке все работает нормально, за исключением того, что кнопки управления находятся в странном положении. Если я выполню еще один вызов (запустив #size), диаграмма будет отображаться в нерабочем состоянии: кнопки теперь находятся слева, метка оси Y и наложение (информация о наведении курсора и выделении) отображаются под диаграммой. Если я попытаюсь что-то выбрать, оно восстановит исходное состояние (значки в правом углу, но все равно будут расположены в ряд, как и должно быть). И я также получаю это предупреждение в консоли: WARN: Calling _doPlot as if redrawing but this container doesn't yet have a plot.

Первая загрузка:

Последующие загрузки:

Вернуться на верх