html - How to scale x axis values on svg chart?

Question

I have a line chart (no library). I need to scale value on X axis only depends on screen with.

This is my chart

<svg width="100%" height="300">
    <rect x="40" y="280" width="100%" height="1" fill="#E6E6E6"></rect>
    <rect x="40" y="0" width="1" height="280" fill="#E6E6E6"></rect>

    <g>
        <path
            d="
                M70,250
                L120,220
                L170,200
                L220,160
                "
            stroke="#FE5131" stroke-width="2" fill="none"></path>
    </g>
</svg>

How to scale with css? I mean L120, become L150... on wider screens and so on.

question from:https://stackoverflow.com/questions/65869525/how-to-scale-x-axis-values-on-svg-chart

Answer 1

Waitting for answers