データ可視化・ダッシュボード
バーチャート描画
棒が下から伸びるアニメーション。読み込みで自動再生し、ボタンで何度でも再生できる。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="bc-wrap">
<div class="bc-chart" aria-label="バーチャート">
<div class="bc-bar-group">
<div class="bc-bar" style="--h:62%;--c:#2b50c7"><span class="bc-val">62</span></div>
<div class="bc-label">月</div>
</div>
<div class="bc-bar-group">
<div class="bc-bar" style="--h:45%;--c:#4c6fd4"><span class="bc-val">45</span></div>
<div class="bc-label">火</div>
</div>
<div class="bc-bar-group">
<div class="bc-bar" style="--h:78%;--c:#2b50c7"><span class="bc-val">78</span></div>
<div class="bc-label">水</div>
</div>
<div class="bc-bar-group">
<div class="bc-bar" style="--h:55%;--c:#4c6fd4"><span class="bc-val">55</span></div>
<div class="bc-label">木</div>
</div>
<div class="bc-bar-group">
<div class="bc-bar" style="--h:91%;--c:#2b50c7"><span class="bc-val">91</span></div>
<div class="bc-label">金</div>
</div>
<div class="bc-bar-group">
<div class="bc-bar" style="--h:38%;--c:#7b96e2"><span class="bc-val">38</span></div>
<div class="bc-label">土</div>
</div>
<div class="bc-bar-group">
<div class="bc-bar" style="--h:29%;--c:#9aaee8"><span class="bc-val">29</span></div>
<div class="bc-label">日</div>
</div>
</div>
<button class="bc-btn" type="button">再生</button>
</div>