Learn Chart.js will make visualization easy and attractive for websites that are data intensive. I will explain how to make complicated data simple, accessible, and intuitive, so that your users will be able to better understand your website.
This book is a practical introduction to creating and publishing your own interactive data visualization projects on the Web.
After reading this book, you will be able to create beautiful charts for the Web with Chart.js.
The book is for designers and artists who wish to create interactive data visualizations for the Web.
Basic knowledge of HTML, CSS, and JavaScript would be of great help.
Chapter 1, Introduction, introduces Chart.js and explains the basic concepts.
Chapter 2, TechnologyFundamentals, explains the various fundamentals and setups needed for Chart.js
Chapter 3, Chart.js - Quick Start, provides a quick start to creating web-based data visualizations with Chart.js. It will show you how to set up the library and configure a basic web page on which you can place a chart. We will walk through a complete step-by-step example, describing how to create a bar chart and configure it with labels, tooltips, titles, interactions, colors, animations, and more.
Chapter 4, Creating Charts, covers several charts that can be created with Chart.js to efficiently communicate quantitative information and relationships. The choice of a chart depends on the type of data, how each set of values is related to one another, and what kind of relationships you want to show.
Chapter 5, Scales and Grid Configuration, explains how to configure the look and feel of a chart so it reflects a desired layout or style, follow good practices of chart design, and tune its interactive and responsive behavior.
Chapter 6, Configuring Styles and Interactivity, explores 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.
Chapter 7, Advanced Chart.js, will explore fonts, padding, axes, screen resizing, and responsiveness.
I recommend that you read the first chapter to make sure that you are up to speed with the basic concepts and fundamentals of Chart.js. In the next chapters, we will see the setup that Chart.js needs and the various visual representation techniques this book will teach us and their uses. There will be tutorials on using the different chart types, and we will explore their interactivity.
You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packt.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
- Log in or register at www.packt.com.
- Select the
SUPPORTtab. - Click on
Code Downloads & Errata. - Enter the name of the book in the
Searchbox and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
- WinRAR/7-Zip for Windows
- Zipeg/iZip/UnRarX for Mac
- 7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Learn-Charts.js. In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
There are a number of text conventions used throughout this book.
CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "This sets the color to be used in fill() commands."
A block of code is set as follows:
const chartObj = {…}; // the chart data is here
const context = canvas.getContext("2d");
new Chart(context, chartObj); // this will display the chart in the canvasAny command-line input or output is written as follows:
npm install chart.js --save bower install chart.js --save
Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "You just need to add the Chart.js CDN in the Resources tab."
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packt.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packt.com.