This demo draws a complete bar chart on an HTML Canvas element using only the 2D context API. No charting library is involved. The sample data represents pageviews for five pages on a website — the kind of data your analytics pipeline would produce.
Define the sample data array and the margin convention that separates the chart area from the title and axis labels. Each data item has a page (category) and views (quantity).
Detect devicePixelRatio and scale the canvas drawing surface so the chart looks crisp on Retina displays. After this step, all coordinates are in logical (CSS) pixels.
Compute the maximum data value and define scaleY(value), which maps a pageview count to a y-pixel coordinate. Remember: larger values produce smaller y values because canvas y=0 is at the top.
Draw horizontal gridlines at evenly spaced value intervals, with numeric labels on the y-axis. Then draw the x-axis baseline.
Loop through the data array, compute each bar's x/y/width/height, fill the rectangle, and add the page name below and the view count above each bar.
Add a chart title centered at the top and a y-axis label to complete the chart.