График Plotly неправильно изменяет размер при печати, автоматизирует изменение размера с помощью пользовательского JS

Question

Я пытаюсь распечатать компоновку dcc.Graph компонентов, где компоненты dcc.Graph имеют размеры в единицах области просмотра (например, {'height': '.25vw', 'width': '.25vw'}). В моем браузере макет выглядит так, как ожидается, а графики меняются с изменением размера при изменении размера экрана. Однако, когда я пытаюсь распечатать экран, компоненты dcc.Graph имеют неправильный размер и занимают больше напечатанной страницы, чем указано их размерами в макете браузера.

Во время поиска обходного пути / решения я наткнулся на следующий JS, чтобы запросить изменение размера dcc.Graph компонентов здесь , однако при определении * 1010 возникает синтаксическая ошибка *. Я получаю следующую ошибку:

Uncaught ReferenceError: $ не определено

Может ли кто-нибудь указать мне правильное направление здесь (извинения за то, что я относительно новичок в JS):

/* params divId & chartNode */
// Resize the chart if the window size changes
window.addEventListener('resize', () => {
  const chartDiv = $(`#${divId}`);
  Plotly.relayout(chartNode, { width: chartDiv.width(), height: chartDiv.height() });
});

// Resize Plotly charts for printing
const resizeChartWidth = () => {
  const chartDiv = $(\`#${divId}\`);
  Plotly.relayout(chartNode, { width: chartDiv.width() });
};

if (window.matchMedia) { // Webkit
  window.matchMedia('print').addListener((print) => {
    if (print.matches) {
      resizeChartWidth();
    }
  });
}

window.onbeforeprint = resizeChartWidth; // FF, IE