Plotly.jsで1つのチャート上でレンジスライダーを実現する

はじめに

チャートライブラリPlotly.jsでは、チャート上をマウスドラッグすることで参照するx軸の範囲を指定するレンジスライダーが実現可能です。
しかしこの方法は、データを表示するチャートと、レンジを指定するチャートの2種類が必要です。
このエントリでは1つのチャート上でレンジスライダーのような範囲指定を簡単に実現する方法を紹介します。

やり方

layoutにてselectdirection属性を指定します。
従来はdragmodeがselectの時、チャート上でマウスをドラッグした矩形箇所が選択範囲となります。
しかしselectdirectionで'h'と指定することで、水平方向のみが選択可能となり、垂直方向は最上部から最下部まで常に選択状態となります。
結果、レンジスライダーと同じような選択の動作になります。

const plotLayout = {
  title: 'Range slider chart',
  dragmode: 'select',
  selectdirection: 'h' // 'h' or 'v' or 'd' or 'any'
};

またドラッグ箇所のスタイルを変更するため、plotly_selectingイベントを取得し、ドラッグ箇所を示すDOMのスタイルを指定します。

plotDiv.on('plotly_selecting', (eventData) => {
  Plotly.d3.selectAll('.select-line,.select-outline-1,.select-outline-2')
    .style('stroke', 'blue')
    .style('fill', 'rgba(0, 0, 255, 0.1)');
});

サンプルコードは下記のとおりです。

See the Pen Range slider chart by Susumu SUZUNASHI (@suzunashi) on CodePen.