Charts are far better for displaying data visually than tables and have the added benefit that no one is ever going to press-gang them into use as a layout tool. They’re easier to look at and convey data quickly, but they’re not always easy to create.
- Creating a Chart
It's easy to get started with Chart.js. All that's required is the script included in your page along with a single (canvas) node to render the chart.
In this example, we create a bar chart for a single dataset and render that in our page. You can see all the ways to use Chart.js in the usage documentation.
- Contributing
Before submitting an issue or a pull request to the project, please take a moment to look over the contributing guidelines first.
- License
Chart.js is available under the MIT license .
Let's start this tutorial by looking at the (canvas) HTML element itself. At the end of this page, you will know how to set up a canvas 2D context and have drawn a first example in your browser.
- The (canvas) element
- Fallback content
- The rendering context
- Checking for support
- A skeleton template
- A simple example
Now that we have set up our canvas environment, we can get into the details of how to draw on the canvas. By the end of this article, you will have learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when drawing objects onto the canvas and we will see how that can be done.
- The grid
- Drawing rectangles
- Drawing paths
In the chapter about drawing shapes, we used only the default line and fill styles. Here we will explore the canvas options we have at our disposal to make our drawings a little more attractive. You will learn how to add different colors, line styles, gradients, patterns and shadows to your drawings.
After having seen how to apply styles and colors in the previous chapter, we will now have a look at how to draw text onto the canvas.
