Skip to content

Latest commit

 

History

History
38 lines (24 loc) · 1.49 KB

File metadata and controls

38 lines (24 loc) · 1.49 KB

Chart.js, Canvas API

Chart.js

Chart.js

  • simple .js charting software, free open-source .js library for data visualization
  • .js plugin that uses HTML5 canvas element to make a graph
  • download, import script Chart.min.js
  • create canvas element in HTML - allows Chart.js to draw the chart
    • give height and width
  • grab context of canvas element via .js (see article)
  • create data for values of the chart
  • can draw graphs, pie charts, bar charts, etc.

Chart.js Documentation

Canvas API

MDN: Basic Usage of Canvas

  • canvas element: <canvas id="" width="" height=""></canvas>
    • will be 300px wide and 150px if no width/height set
    • CSS will need to consider the default sizing or the chart will look distorted
    • additional CSS styling wont impact the chart drawing
  • define fallback for older browsers
  • canvas represents a rendering context
  • rendering context is used in .js to create and manipulate chart content

MDN: Drawing Shapes with Canvas

MDN: Applying Styles and Colors

MDN: Draw Text