データ可視化・ダッシュボード
グラフtooltip
棒グラフの各棒にホバー(PC)またはタップ(スマホ)でその棒の値がツールチップで表示される。
プレビュー
ホバー
操作カーソルを乗せると動きます(スマホはタップ)。
コード(コピーして使えます)
<div class="ct-wrap">
<div class="ct-chart">
<div class="ct-col">
<div class="ct-bar" style="--h:68%" data-val="68pt" tabindex="0">
<div class="ct-tip">68pt</div>
</div>
<div class="ct-lbl">Q1</div>
</div>
<div class="ct-col">
<div class="ct-bar" style="--h:45%" data-val="45pt" tabindex="0">
<div class="ct-tip">45pt</div>
</div>
<div class="ct-lbl">Q2</div>
</div>
<div class="ct-col">
<div class="ct-bar" style="--h:83%" data-val="83pt" tabindex="0">
<div class="ct-tip">83pt</div>
</div>
<div class="ct-lbl">Q3</div>
</div>
<div class="ct-col">
<div class="ct-bar" style="--h:57%" data-val="57pt" tabindex="0">
<div class="ct-tip">57pt</div>
</div>
<div class="ct-lbl">Q4</div>
</div>
<div class="ct-col">
<div class="ct-bar" style="--h:92%" data-val="92pt" tabindex="0">
<div class="ct-tip">92pt</div>
</div>
<div class="ct-lbl">Q5</div>
</div>
</div>
</div>