Responsive charts

Now that we know some basics about absolute and relative units, we can start to define, design, and implement responsive charts. A responsive chart is a chart that automatically adapts its look and feel to the resolution of the user's device; thus, responsive charts need to adapt the following properties:

• The dimension (width and height)

• The resolution of data points

• Interactions and interaction areas

Adapting to the dimensions is the most obvious thing. The chart should always scale and adapt to the width of its parent element. In the previous section, you learned about relative and absolute lengths, so one may think that simply using relative values for the chart's dimensions would be enough. However, there are multiple ways with advantages and disadvantages to achieve this; in this section, we will discuss three of them.

Adapting to the resolution of the data is a little less obvious and often a neglected thing. The resolution of data points (the amount of data point per...