CSSのみで縦型の棒グラフをつくるコピペで使えるHTML+CSS グラフ編

CSSのみで円グラフを作ります

INDEX

HTML+CSSで縦型の棒グラフを描く

HTML+CSSで縦型の棒グラフを描く

棒グラフの例

左から80%、60%、70%の値の棒グラフです。

コードの説明

HTML

<div class="bar-chart">
 <div class="bar a" style="--value-a: 80;"></div>
 <div class="bar b" style="--value-b: 60;"></div>
 <div class="bar c" style="--value-c: 70;"></div>
</div>

CSS

.bar-chart {
  display: flex;
  align-items: flex-end;
  height: 300px;
}

.bar {
  width: 100px;
  margin: 0 10px;
}

.a {
  height: calc(var(--value-a) / 100 * 300px);
  background-color: blue;
}

.b {
  height: calc(var(--value-b) / 100 * 300px);
  background-color: red;
}

.c {
  height: calc(var(--value-c) / 100 * 300px);
  background-color: green;
}

仕組みの説明

全体として高さ300pxのdivを用意します。

flexとして、flex-endを指定して内部divを下側に固定します。

その上で各々の高さを指定します

height: calc(var(--value-a) / 100 * 300px);

とすることで、styleで指定した--value-aの値(80)を読み込み、その値を300pxの割合で表示しています。

calc(80 / 100 * 300)でheightが240pxとなります

a(80%)	b(60%)	c(70%)
240px	180px	210px

棒グラフを増やすには

増やしたければ、以下のように追加してゆけばよい。

その際は、グラフの幅に注意すること。

<div class="bar-chart">
 <div class="bar a" style="--value-a: 80;"></div>
 <div class="bar b" style="--value-b: 60;"></div>
 <div class="bar c" style="--value-c: 70;"></div>
 <div class="bar c" style="--value-d: 40;"></div>
</div>


.d {
  height: calc(var(--value-d) / 100 * 300px);
  background-color: yellow;
}

カラージェネレータ

RGB部分をクリックし、HEXを選択するとCSS用のカラーコードが表示されます。

円グラフ作成時の色設定にご利用ください。