Search code examples
htmlcssgraphchartsscale

Issue with building a Resizeable Graph/Chart compatible with IE8

Now, I have made a bullet graph using pure html and css. No javascript/jquery libraries were used.

The whole HTML page has just the bullet chart with size 1000px * 500px (almost full page). In my application I also need to display the same chart in roughly 300px * 300px in some other new page.

Now, I don't want to build another smaller chart for the new page, I just want to be able to reduce the scale of the existing full page version of the chart and reuse it. How do I achieve this?

Solution

  • In CSS:

    transform:scale(0.25);         /* IE 10, Firefox */
-webkit-transform:scale(0.25); /* Chrome */
-ms-transform:scale(0.25);     /* IE 9 */

    Adjust the scale coefficient as needed.

    Also note you could use Viewport Units if the fullsize graph has a width like 60% but note that browser support is currently very low.

    transform:scale(calc(300px / 60vw));