Advanced Chart.js

When you create data visualizations with Chart.js, most of the work you will have involves preparing the data so that it can be loaded and used by a chart instance. You don't have to worry much about fonts, padding, axes, screen resizing, or responsiveness, since new charts are preconfigured with defaults intended for optimal presentation and interactivity. In the last chapter, we learned how to adjust colors, labels, animations, and other typical configurations in different types of charts. In this chapter, we will explore configuration topics that you won’t use as frequently, and that may require additional coding, extensions, and integration with other libraries, such as tooltip behavior configuration, label generation, scripting, creating mixed charts, creating plugins, using the Chart.js API, and using HTML Canvas with Chart.js.

What you will learn in this chapter includes the following:

  • Tooltip configuration
  • Advanced legend configuration
  • Displaying multiple charts
  • Extending Chart.js