Chapter 4. Making the Chart Responsive Using Bootstrap and Media Queries
In the previous chapter, you learned all about loading, parsing, filtering, and grouping data from real sources. This gives us everything we need to design responsive charts using Bootstrap and Media Queries on some real data. In this chapter, you will learn the following:
- Learning absolute and relative units in the browsers
- Understanding what a responsive chart really is
- Drawing charts with percentage values
- Scaling charts using the
viewBoxandpreserveAspectRatioattributes - Adapting charts using JavaScript event listeners
- Learning to adapt the resolution of the data
- Using Bootstrap's Media Queries
- Understanding how to use media queries in CSS, LESS, and JavaScript
- Learning the usage of Bootstrap's grid system
First, we will discuss the most important absolute and relative units that are available in modern browsers. You will learn the difference between absolute pixels, relative percentages, em, rem, and...
