ちいつる

データ可視化・ダッシュボード

グラフ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>

タグ

関連パーツ