Responsive Charts

We can add responsiveness to our charts by adding the viewBox attribute to the SVG element.

We'll cover the following

We are going to talk about responsiveness. Responsiveness is the idea of a website rendering differently for different screen resolutions. A site will appear differently on a desktop than it does on a smartphone. We have not had the opportunity to discuss how we would make a chart responsive.

There are dozens of solutions at our disposal. In the old days, we would use JavaScript to detect if the window has been resized. If it had, we would redraw the chart based on the current dimensions of the window. Luckily, the web has evolved to the point where we do not need to use such a convoluted solution.

Get hands-on with 1200+ tech skills courses.