Как сделать графики Altair отзывчивыми

Это невозможно сделать. Размеры диаграмм Altair/Vega-Lite заранее определяются спецификацией диаграммы и данными, и их нельзя настроить в соответствии с размером окна браузера.

Хотя верно то, что вега-лайт определяет размер самой диаграммы, можно обращаться с диаграммой (отображенной как холст) как с изображением.

Я использовал пример из w3css, который применялся к моим диаграммам вега-лайт, соответственно масштабировал диаграммы. В основном он затем масштабируется пропорционально окружающему контейнеру.

Пример HTML, сгенерированный vega-light:

<div id = "visInteractiveYear" class = "vega-embed">
<canvas width = "1366" height = "960" class = "marks" style = "width: 976px; height: 686px;"></canvas>
</div>

Вот фрагмент CSS, который в основном перезаписывает ширину/высоту (стиль) холста:

canvas.marks {
    max-width: 100%!important;
    height: auto!important;
}

Вот тест без масштабирования и исходный размер:

Здесь тест с масштабированием, чтобы соответствовать окружающему окну.

Если вы используете интерактивные диаграммы, масштабирование может быть проблемой. Я предполагаю, что позиции щелчка не переведены правильно (поскольку холст масштабируется, но логика веги об этом не знает), поэтому в результате происходит странное поведение. В моем случае выделение всегда имеет смещение относительно курсора мыши.

Кроме того, пользователь должен увеличить масштаб, чтобы прочитать диаграмму, поскольку она пропорционально масштабируется. Вероятно, в большинстве случаев это не идеальный удобный способ.

Возможно, лучшим вариантом будет переключиться на другую спецификацию vega-light, которая отображает диаграмму для определенного размера дисплея, или переключиться на другое представление (например, стандартный список), который затем можно будет легко прочитать на небольших дисплеях (адаптивное дизайн).

Для сложных диаграмм открытие диаграммы в другой вкладке браузера также может быть хорошим решением. Пользователь знает о новой вкладке, мобильный браузер должен отображать только одну диаграмму/изображение, так что не о чем беспокоиться. Таким образом, на новой вкладке легко перемещаться/прокручивать, поскольку она содержит только диаграмму и, возможно, кнопку возврата/закрытия вкладки.

Если вы используете Altair 4.0 или более позднюю версию, вы можете использовать properties() и container:

import altair as alt
from vega_datasets import data

source = data.cars()

plot = alt.Chart(source).mark_circle(size=60).encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
    tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']
).properties(
    width='container',
    height='container'
)

Это сделает его отзывчивым, обратите внимание, что это размер каждого графика, если у вас есть несколько, он не работает, как вы ожидаете, но вместо этого каждый график будет иметь размер родительского контейнера.