This book was designed as a practical hands-on guide on how to create data visualizations with Chart.js. It doesn't cover all aspects of Chart.js, but does cover most of the features you are likely to use to create visualizations. All eight Chart.js charts are covered, exploring different configurations and applications using external data obtained from public repositories.
Each chapter covers fundamental concepts. Each concept is always illustrated with a simple code example, but more complex examples that might require extra JavaScript programming are also presented in each chapter, and include solutions to real-world problems, such as downloading, parsing, and filtering a data file to convert it into a format usable by Chart.js.
Code listings are used throughout the book, but most of the time, they focus on a specific feature and show only a fragment of the full code. But you can download the full listing. All the code examples used in the book are available from a public GitHub repository located at:Â https://github.com/PacktPublishing/Learn-charts.js.
There is a folder for each chapter in the repository, named Chapter01, Chapter02, and so on. Each code listing and every image generated by code contains a relative reference to a file located in the corresponding folder for each chapter. You can try out all the code examples as you learn. You can also use it in any way you like, since it's free and open source.
Here's a brief summary of each chapter:
Chapter 2, Technology Fundamentals, covers technology fundamentals, data formats, and also explores some techniques for loading and parsing files. It gives a general background on topics used by Chart.js, such as JavaScript, CSS, DOM, and Canvas. You may skip these sections if you wish.
Chapter 3, Chart.js – Quick Start, includes a quick start and overview of several Chart.js features. It shows how to set up a web page to use Chart.js and how to create your first chart. You will learn a bit of everything Chart.js has to offer. It also introduces the bar chart type (vertical and horizontal).
Chapter 4, Creating Charts, covers all other chart types available: line/area, radar, polar area, pie, doughnut, scatter, and bubble. It also shows how to load and parse external CSV and JSON data from public data portals and use them to create real-world visualizations.
Chapter 5, Scales and Grid Configuration, focuses on configuring scales, axes, and grid lines for all charts. You will learn how to use radial grids and Cartesian grids with linear, logarithmic, category, and time axes.
Chapter 6, Configuring Styles and Interactivity, deals with configuration of several properties, for which Chart.js already provides defaults: fonts, titles, and labels. It also explores some neat labeling plugins and color schemes, which are important for accessible charts. This chapter also shows how to configure transitions, animations, and interactions.
Chapter 7, Advanced Charts.js, covers some advanced features that you will are less likely to use on a regular basis, since Chart.js already provides good defaults. These include tooltip configuration, creating custom legends, mixed charts, how to display multiple charts on a single page, overlaying Chart.js on a Canvas, and creating plugins.
I believe the book covers the most important topics in Chart.js. It leaves out some advanced programming topics, several plugins, and integration with front-end frameworks, which are also not covered.Â
I am not affiliated with Chart.js in any way and this book does not replace the official Chart.js documentation, which is the ultimate reference guide on the topic. The documentation is community-maintained and freely available at www.chartjs.org/docs/latest. There are also many samples that explore its main features that are also part of the documentation at www.chartjs.org/samples/latest.
When writing this book, I did my best to provide the most accurate information possible. All code listings were tested, and additional efforts were made to guarantee that all code examples are properly referenced in the book and work as expected. This book is based on Chart.js version 2.7.3. I expect that the examples should continue working with any 2.x version, but there is a small possibility that some code may not work as expected if you are using a later version.
The Chart.js community is very active on GitHub and StackOverflow. If you have any questions about Chart.js, you can submit a question on stackoverflow.com and you will probably have an answer within a few hours or less.
I hope you enjoy this book and have as much fun as I had when learning Chart.js.
