Minimalist Bar (Column) Charts with HTML5 Canvas – bar-js

Sometimes you just need a basic bar chart. No complex animations, no crazy interactions, just data represented visually. You could pull in a massive library, but that often feels like overkill, bringing dependencies and configuration overhead you don’t need. That’s where bar-js comes in.

bar-js is an ultra-light, dependency-free JavaScript library that allows you to render bar (column) charts using only HTML5 Canvas API. It solves the problem of needing basic data visualization without the complexity or weight of full-featured charting suites.

Features:

• Zero dependencies – No jQuery, no D3, just pure JavaScript
• Canvas-based rendering – Better performance for larger datasets
• Simple configuration – Get up and running in minutes with a clean API
• Auto-generated color schemes – Random colors assigned with consistent opacity
• Built-in grid and label support – Automatically creates axes, labels, and guidelines

How to use it:

1. Download the bar.min.js script and import it into your HTML document.

<script src="bar.min.js"></script>

2. Prepare your chart data as follows. The data needs to be an array of objects, each with a label (string) and a value (number).

const chartData = [
    {label: 'Jan', value: 111},
    {label: 'Feb', value: 222},
    {label: 'March', value: 333},
    {label: 'April', value: 444},
    {label: 'May', value: 555}
];

3. Specify the target element ID, desired canvas dimensions, and your data. Then, create a new BarChart instance.

<div id="chart">This is a bar chart</div>

var targetId = 'chart';
var canvasWidth = 600;
var canvasHeight = 450;
var chart = new BarChart(targetId, canvasWidth, canvasHeight, data);

4. That’s it! The library handles the rest, including:

• Creating the canvas element
• Drawing axes and guidelines
• Scaling values appropriately
• Generating random colors for bars
• Rendering labels

Comparison with Alternatives:

• Chart.js: Much more feature-rich. Offers various chart types (line, pie, radar, etc.), animations, tooltips, extensive customization, and plugin support. It’s also larger and has dependencies. Use Chart.js if you need more than just a basic bar chart or require built-in interactivity.
• D3.js: A powerful data visualization library, not just for charts. Steeper learning curve but offers ultimate flexibility for bespoke visualizations. D3 is overkill if all you need is a simple bar chart; it operates at a lower level, manipulating the DOM (often SVG) based on data.
• ApexCharts: Other comprehensive libraries with more features, interactivity, and potentially different rendering approaches (SVG vs. Canvas).

FAQs:

Q: Can I customize the bar colors instead of random ones?

A: Not directly via configuration in v1.0. The drawBars function uses createRandomRGBColor. You’d need to modify the library’s source code, by passing in a color array or a color generation function, and adjusting drawBars to use it.

Q: Is the chart responsive?

A: No, it renders to a fixed-size canvas specified during initialization. For responsiveness, you’d need to implement a resize handler that destroys the current chart instance and creates a new one with updated dimensions based on the container size.

Q: How does it handle large datasets?

A: Performance depends on the browser’s Canvas implementation. With hundreds or thousands of bars, rendering might slow down. The data handling itself is simple iteration, so that’s unlikely to be the bottleneck unless the dataset is truly massive. For typical use cases (dozens of bars), it’s perfectly adequate.

Q: Can I add tooltips or click events to bars?

A: bar-js doesn’t include built-in support for tooltips or interactivity. You would have to add event listeners to the canvas yourself, calculate which bar (if any) is under the cursor based on coordinates, and display your own tooltip element. This requires understanding the bar positioning logic within drawBars.