{% macro x(n) -%}
{{ 15+((91-15)/(lines|length))*(n-1) }}%
{%- endmacro %}
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <style>
        svg {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
        }
    </style>
    <g class="bg">
    {% for n in scale %}
        <line x1="10%" y1="{{ 16.6 * loop.index }}%" x2="96%" y2="{{ 16.6 * loop.index }}%" stroke="#ddd" stroke-width="2px" />
    {% endfor %}
    </g>
    <g class="legend" style="font-size: 0.9em; text-align:right;">
    {% for n in scale | reverse %}
        <text x="10%" y="{{ 16.6 * (loop.index) }}%" style="text-anchor: end; font-weight: semibold" dx="-.6em" dy=".3em" fill="#aaa">{{ n }}</text>
    {% endfor %}
    </g>
    <g class="lines">
    {% for y1, y2 in lines %}
        <line x1="{{ x(loop.index) }}" y1="{{ y1 }}%" x2="{{ x(loop.index + 1) }}" y2="{{ y2 }}%" stroke="#48bb78" stroke-width="3" />
    {% endfor %}
    </g>
    <g class="dots">
    {% for cy in dots %}
        <circle cx="{{ x(loop.index) }}" cy="{{ cy }}%" r="4" stroke-width="0" fill="#2f855a" />
    {% endfor %}
    </g>
    <g class="legend" style="font-size: 0.9em; text-anchor: middle">
    {% for day in days %}
        <text x="{{ x(loop.index) }}" y="95%" fill="#888">{{ day }}</text>
    {% endfor %}
    </g>
</svg>