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
viewBox
andpreserveAspectRatio
attributesAdapting 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 many more.
In the next...