1. Using 'resize' event
There are 3 things you need to keep in mind:
- the object that draws the chart where there will be a main svg. This svg is accessible at either from a key within itself or any node under this svg such as rect.ownerSVGElement
- The 'viewport' of the above svg and the 'style' are different. Viewport defines userSpace whereas style defines how it will be painted by the browser. For example viewport can be "0 0 1000 1000" meaning x0 is 0, y0 is 0, width is 100 0 and height 1000 units (user space units). However the style can be 100px width and 100px height.
- Combine the above 2 with the window.onresize event or window.addEventlistener("resize", ....)
In short, a function will be triggered (onresize) which in turn invokes a method in the object which in turn modifies the svg.
This one is straight forward. You define a media query such as:
```
@media screen and (max-width: 980px) {
....
}
} ```
There are also some other ways, but these are the main ones that came to my mind