サンプルコード付き！CSSとJavaScriptで棒グラフを作ってみよう！

flex-direction: row; /* 要素を横に並べる */
justify-content: space-evenly; /* 要素を均等間隔に分散させる */

<div class="container"></div>

.container {
  background-color: #c5d1d8;
  height: 200px;
  width: 100%;
  display: flex;
  flex-direction: column; /* 要素を縦に並べる */
  justify-content: space-evenly; /* 要素を均等間隔に分散させる */
}

.item {
  box-sizing: border-box;
  background-color: #FFFFFF;
  padding: 4px;
}

.item_label {
  white-space: nowrap;
}

body {
  padding: 8px;
  font-size: 12px;
  background-color: #20262e;
}

$(function(){
	// 何らかの投票データの配列
	var voteData = [
  	{ label: '良い', point: 300 },
  	{ label: 'どちらかといえば良い', point: 800 },
  	{ label: 'どちらかといえば悪い', point: 240 },
  	{ label: '悪い', point: 100 }
  ];
  
  // 投票の合計値（全体の100％となる値）を求める
  var total = voteData.reduce(function(a,b){ 
  	return {point: a.point + b.point }
  });
  
  // 投票データから項目を作成してコンテナに追加する
  $.each(voteData, function() {
    // 項目要素
  	var $item = $('<div>').addClass('item');
    // 項目のラベル
    var $itemLabel = $('<span>').addClass('item_label');
    // 項目投票数の全体のうちの割合を出す
    var percentage = (this.point / total.point) * 100;
    // 項目要素の長さを割り出して設定する
    $item.css({
    	width: percentage + '%'
    });
    // ラベルに文字列を設定する
    $itemLabel.text(this.label + ' : ' + this.point + '票');
    // 項目にラベルを入れる
    $item.append($itemLabel);
    // 項目をコンテナに入れる
    $('.container').append($item);
  });
});

<div class="container">
<div class="item item1">&nbsp;</div>
<div class="item item2">&nbsp;</div>
<div class="item item3">&nbsp;</div>
</div>
<a href="#" id="sort_asc">多い順に並べ替える</a>
<a href="#" id="sort_desc">少ない順に並べ替える</a>

.item1 {
width: 15%;
}
.item2 {
width: 80%;
}
.item3 {
width: 5%;
}

$(function(){
// 並べ替え対象の項目
var $items = $('.item');
// 多い順に並べ替えるリンクのクリック
$('#sort_asc').on('click', function (e) {
e.preventDefault();
// 横幅が大きい順にソート
$items.sort(function(a,b){ return $(a).width() > $(b).width() ? -1 : 1 });
// ソートした順にorderプロパティを設定する
$items.each(function(i) {
$(this).css({ order: i });
});
});

// 少ない順に並べ替えるリンクのクリック
$('#sort_desc').on('click', function (e) {
e.preventDefault();
// 横幅が狭い順にソート
$items.sort(function(a,b){ return $(a).width() > $(b).width() ? 1 : -1 });
$items.each(function(i) {
$(this).css({ order: i });
});
});
});

<div class="container">
<div class="item item1 hidden"></div>
<div class="item item2 hidden"></div>
<div class="item item3 hidden"></div>
</div>
<a href="#" id="toggleItem">表示を切り替える</a>

.item {
box-sizing: border-box;
background-color: #FFFFFF;
padding: 4px;
transition: width 1000ms 0s ease;
}

.hidden {
padding: 0;
width: 0;
}

$(function(){
// グラフの項目
var $items = $('.item');
// 表示を切り替える
$('#toggleItem').on('click', function(){
$items.toggleClass('hidden');
});
});