▤ Data visualization

Bar chart

막대 차트

The most basic chart for comparing a value across categories — length is the encoding the eye compares most accurately.

Also known as: Column chart바 차트

···

html

<div class="viz">
  <svg id="svg"></svg>
</div>

css

body{display:block}
.viz{position:relative;width:100%;height:100%}
svg{display:block;width:100%;height:100%;overflow:visible}
.axis{stroke:var(--line);stroke-width:1}
.tick{fill:var(--muted);font-weight:600}
.val{fill:var(--fg);font-weight:700}
.minor{display:none}
@media (min-width:460px){.minor{display:inline}}
.bar{fill:var(--accent)}

js

var svg = document.getElementById('svg');
var NS = 'http://www.w3.org/2000/svg';
function se(t){ return document.createElementNS(NS,t); }
function sa(e,o){ for (var k in o) e.setAttribute(k,o[k]); }
function R(a,b){ return a + Math.random()*(b-a); }

var CATS = ['A','B','C','D','E','F'];
var cur = CATS.map(function(){ return 0; });
var W = 300, H = 200;

function measure(){
  var r = svg.getBoundingClientRect();
  W = Math.max(r.width,10); H = Math.max(r.height,10);
  sa(svg,{ viewBox: '0 0 ' + W + ' ' + H });
}

function draw(){
  svg.innerHTML = '';
  var padL=26, padR=10, padT=18, padB=22;
  var pw=W-padL-padR, ph=H-padT-padB;
  var maxV=100, n=CATS.length;
  var fs = Math.max(8, Math.min(13, W/70));
  var gap = pw*0.16/n;
  var bw = Math.min(34,(pw-gap*(n-1))/n);
  var totalW = bw*n+gap*(n-1);
  var startX = padL+(pw-totalW)/2;

  var base = se('line');
  sa(base,{x1:padL,y1:H-padB,x2:W-padR,y2:H-padB,class:'axis'});
  svg.appendChild(base);

  var gtop = se('line');
  sa(gtop,{x1:padL,y1:padT,x2:W-padR,y2:padT,class:'axis minor'});
  svg.appendChild(gtop);
  var gl = se('text');
  sa(gl,{x:padL-5,y:padT+3,'text-anchor':'end',class:'tick minor','font-size':fs-1});
  gl.textContent = maxV;
  svg.appendChild(gl);
  var zl = se('text');
  sa(zl,{x:padL-5,y:H-padB+3,'text-anchor':'end',class:'tick','font-size':fs-1});
  zl.textContent = '0';
  svg.appendChild(zl);

  CATS.forEach(function(c,i){
    var v = cur[i];
    var bh = (v/maxV)*ph;
    var x = startX+i*(bw+gap);
    var y = H-padB-bh;
    var rect = se('rect');
    sa(rect,{x:x,y:y,width:bw,height:Math.max(bh,0.5),rx:4,ry:4,class:'bar'});
    svg.appendChild(rect);
    var lab = se('text');
    sa(lab,{x:x+bw/2,y:Math.max(y-5,padT+fs),'text-anchor':'middle',class:'val','font-size':fs});
    lab.textContent = Math.round(v);
    svg.appendChild(lab);
    var cat = se('text');
    sa(cat,{x:x+bw/2,y:H-padB+14,'text-anchor':'middle',class:'tick','font-size':fs-1});
    cat.textContent = c;
    svg.appendChild(cat);
  });
}

function animate(target){
  var from = cur.slice();
  var t0 = performance.now();
  function step(t){
    var p = Math.min(1,(t-t0)/650);
    var e = 1-Math.pow(1-p,3);
    cur = from.map(function(v,i){ return v+(target[i]-v)*e; });
    draw();
    if (p<1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

new ResizeObserver(function(){ measure(); draw(); }).observe(svg);
measure();
draw();
animate(CATS.map(function(){ return R(28,96); }));
setInterval(function(){
  animate(CATS.map(function(){ return R(15,98); }));
}, 3400);

This chart answers "which is bigger." Bars must start at zero — since length *is* the value, truncating the y-axis makes small gaps look enormous.

You rarely need a different color per bar. If every bar measures the same kind of thing, one consistent color is correct — coloring each bar differently just re-encodes information the bar's length already carries. Keep bars thin, and the gap between them under half the bar's width.

Vertical (column) vs horizontal (bar) is mostly a label-length decision — long category names fit better as horizontal bars so nothing gets clipped.

When to use

Best under ~10 categories where precise magnitude comparison is the point. If time is the story, use a line chart instead.