0

I have this chart which I try to make responsive. The original size is width: 800px and height: 400px

I am trying to make it responsive and dependant on the size of the parent div.
- First when I change the width and height to 100%, the chart size actually reduces to full width but only 156px of height.
- Second, when I add to the svg element the attribute viewBox= 0 0 100 100, it completely disturbs the size of the different elements, with only the YAxis labels being seen/drawn.

Any idea on how I should modify this, to make it dependant on the size of the parent div?

Bondifrench
  • 1,272
  • 1
  • 20
  • 35

1 Answers1

0

The viewbox defines the co-ordinate system for the value used in the SVG elements / paths etc....it's not clear exactly what that should exactly be but based on the numbers actually used in the SVG I'd approximate...

viewBox= "0 0 1700 400"

Then the SVG scales appropriately.

.chart {
  border: 1px solid #ccc;
}
.wrapper {
  width: 80%;
  margin:1em auto;
}
<div class="wrapper">
  <svg class="chart" xmlns="http://www.w3.org/2000/svg" style="background-color: rgb(42, 52, 63);" viewBox="0 0 1700 400">
    <g id="xGrid" class="grid x-grid" style="stroke: white; stroke-dasharray: 1px, 2px; stroke-width: 1px;">
      <line x1="113" x2="113" y1="10" y2="310.5"></line>
      <line x1="329" x2="329" y1="10" y2="310.5"></line>
      <line x1="545" x2="545" y1="10" y2="310.5"></line>
      <line x1="761" x2="761" y1="10" y2="310.5"></line>
      <line x1="977" x2="977" y1="10" y2="310.5"></line>
      <line x1="1193" x2="1193" y1="10" y2="310.5"></line>
      <line x1="1409" x2="1409" y1="10" y2="310.5"></line>
      <line x1="1625" x2="1625" y1="10" y2="310.5"></line>
    </g>
    <g id="yGrid" class="grid y-grid" style="stroke: white; stroke-dasharray: 1px, 2px; stroke-width: 1px;">
      <line x1="86" x2="1625" y1="10" y2="10"></line>
      <line x1="86" x2="1625" y1="56.75" y2="56.75"></line>
      <line x1="86" x2="1625" y1="103.5" y2="103.5"></line>
      <line x1="86" x2="1625" y1="150.25" y2="150.25"></line>
      <line x1="86" x2="1625" y1="197" y2="197"></line>
      <line x1="86" x2="1625" y1="243.75" y2="243.75"></line>
      <line x1="86" x2="1625" y1="290.5" y2="290.5"></line>
    </g>
    <g style="font-family: Arial; font-size: 14px; text-anchor: middle; fill: orange;">
      <text x="113" y="330.5">2008</text>
      <text x="329" y="330.5">2009</text>
      <text x="545" y="330.5">2010</text>
      <text x="761" y="330.5">2011</text>
      <text x="977" y="330.5">2012</text>
      <text x="1193" y="330.5">2013</text>
      <text x="1409" y="330.5">2014</text>
      <text x="1625" y="330.5">2015</text>
      <text x="869" y="370.5">Years</text>
    </g>
    <g style="font-family: Arial; font-size: 14px; text-anchor: end; fill: orange;">
      <text x="80" y="15">15</text>
      <text x="80" y="108.5">10</text>
      <text x="80" y="202">5</text>
      <text x="80" y="295.5">0</text>
      <text x="56.5" y="15">Weeks</text>
    </g>
    <g transform="translate(113,28.699999999999996)" style="fill-opacity: 0.5;">
      <path d="M 0 127.16 L 216 110.33 L 432 117.81 L 648 134.64 L 864 136.51 L 1080 114.07 L 1296 56.1 L 1512 0" stroke="#00554d" fill="none" stroke-width="2"></path>
      <g style="stroke: white; stroke-width: 3px; fill: rgb(0, 85, 77);">
        <circle cx="0" cy="127.16" r="5"></circle>
        <circle cx="216" cy="110.33000000000001" r="5"></circle>
        <circle cx="432" cy="117.81" r="5"></circle>
        <circle cx="648" cy="134.64000000000001" r="5"></circle>
        <circle cx="864" cy="136.51" r="5"></circle>
        <circle cx="1080" cy="114.07" r="5"></circle>
        <circle cx="1296" cy="56.099999999999994" r="5"></circle>
        <circle cx="1512" cy="0" r="5"></circle>
      </g>
      <path d="M 0 28.05 L 216 168.3 L 432 74.8 L 648 50.49 L 864 80.41 L 1080 134.64 L 1296 95.37 L 1512 50.49" stroke="#6aab19" fill="none" stroke-width="2"></path>
      <g style="stroke: white; stroke-width: 3px; fill: rgb(106, 171, 25);">
        <circle cx="0" cy="28.05000000000001" r="5"></circle>
        <circle cx="216" cy="168.3" r="5"></circle>
        <circle cx="432" cy="74.80000000000001" r="5"></circle>
        <circle cx="648" cy="50.49000000000001" r="5"></circle>
        <circle cx="864" cy="80.41" r="5"></circle>
        <circle cx="1080" cy="134.64000000000001" r="5"></circle>
        <circle cx="1296" cy="95.37" r="5"></circle>
        <circle cx="1512" cy="50.49000000000001" r="5"></circle>
      </g>
      <path d="M 0 191.675 L 216 142.681 L 432 224.4 L 648 177.65 L 864 112.2 L 1080 154.275 L 1296 149.6 L 1512 93.5" stroke="#c12627" fill="none" stroke-width="2"></path>
      <g style="stroke: white; stroke-width: 3px; fill: rgb(193, 38, 39);">
        <circle cx="0" cy="191.675" r="5"></circle>
        <circle cx="216" cy="142.68099999999998" r="5"></circle>
        <circle cx="432" cy="224.4" r="5"></circle>
        <circle cx="648" cy="177.65" r="5"></circle>
        <circle cx="864" cy="112.20000000000002" r="5"></circle>
        <circle cx="1080" cy="154.275" r="5"></circle>
        <circle cx="1296" cy="149.6" r="5"></circle>
        <circle cx="1512" cy="93.5" r="5"></circle>
      </g>
      <path d="M 0 74.8 L 216 121.55 L 432 168.3 L 648 121.55 L 864 215.05 L 1080 171.105 L 1296 168.3 L 1512 121.55" stroke="#7eadd5" fill="none" stroke-width="2"></path>
      <g style="stroke: white; stroke-width: 3px; fill: rgb(126, 173, 213);">
        <circle cx="0" cy="74.80000000000001" r="5"></circle>
        <circle cx="216" cy="121.55000000000001" r="5"></circle>
        <circle cx="432" cy="168.3" r="5"></circle>
        <circle cx="648" cy="121.55000000000001" r="5"></circle>
        <circle cx="864" cy="215.05" r="5"></circle>
        <circle cx="1080" cy="171.10500000000002" r="5"></circle>
        <circle cx="1296" cy="168.3" r="5"></circle>
        <circle cx="1512" cy="121.55000000000001" r="5"></circle>
      </g>
    </g>
    <use xlink:href="#xGrid" style="stroke: white; stroke-dasharray: 1px, 2px; stroke-width: 1px; stroke-opacity: 0.4;"></use>
    <use xlink:href="#yGrid" style="stroke: white; stroke-dasharray: 1px, 2px; stroke-width: 1px; stroke-opacity: 0.4;"></use>
  </svg>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161