In this chapter, you will learn how to configure the look and feel of a chart so it will reflect a desired layout or style, follow good practices of chart design, and tune its interactive and responsive behavior. This includes configuring colors, gradients, patterns and fonts, setting margins, padding, borders, fills, backgrounds, line widths, dashes, positioning titles and legends, and configuring the behavior of transitions and animations. Some of these properties are easily configured using Chart.js configuration options, but others require plugins and extensions, which will also be introduced in this chapter.

In this chapter, you will learn the following:

• Default configuration
• Fonts
• Colors, gradients, patterns, and shadows
• Adding text elements and labels
• Interactions, data updates, and animation