با استفاده از Canvas API در جاوااسکریپت یک نمودار ستونی ساده بساز که یک آرایه داده نمونه را نمایش دهد؛ هر ستون رنگ متفاوت و برچسب مقدار زیر آن داشته باشد.

در یک صفحه HTML یک تگ canvas ایجاد کنید و با document.getElementById(...).getContext('2d') به کانتکست 2D دسترسی پیدا کنید. طول و عرض کانواس را تنظیم کرده، آرایه داده‌ها را پیمایش کنید، عرض هر ستون را محاسبه و ارتفاع را بر مبنای بیشترین مقدار مقیاس کنید، سپس با fillStyle و fillRect ستون‌ها را رسم کنید و مقدار یا برچسب زیر هر ستون را با fillText بنویسید. برای ظاهر بهتر از stroke برای قاب ستون‌ها و فونت مناسب برای برچسب‌ها استفاده کنید. نکات: برای کشیدن واضح در صفحه‌های با رزولوشن بالا از devicePixelRatio استفاده کنید و قبل از بازنقاشی canvas را با clearRect پاک کنید؛ کد را طوری بنویسید که آرایه داده‌ها قابل تغییر باشد تا نمودار به‌راحتی بروزرسانی شود.