[Chartjs]-How do I selecting a date range (like onClick but drag/select)

For all of you interested in Jony Adamits solution, I created a ChartJs plugin based on his implementation. Additionaly I fixed some minor issues in regard to resizing the chart and detection of the selected data points.

Feel free to use it or to create a plugin github repo for it.

Installation

import "chart.js";
import {Chart} from 'chart.js';
import {ChartJsPluginRangeSelect} from "./chartjs-plugin-range-select";

Chart.pluginService.register(new ChartJsPluginRangeSelect());

Configuration

let chartOptions = rangeSelect: {
  onSelectionChanged: (result: Array<Array<any>>) => {
    console.log(result);
  }
}

Plugin Code

import {Chart, ChartSize, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions} from "chart.js";

interface ChartJsPluginRangeSelectExtendedOptions {
  rangeSelect?: RangeSelectOptions;
}

interface RangeSelectOptions {
  onSelectionChanged?: (filteredDataSets: Array<Array<any>>) => void;
  fillColor?: string | CanvasGradient | CanvasPattern;
  cursorColor?: string | CanvasGradient | CanvasPattern;
  cursorWidth?: number;
  state?: RangeSelectState;
}

interface RangeSelectState {
  canvas: HTMLCanvasElement;
}

interface ActiveSelection {
  x: number;
  w: number;
}

export class ChartJsPluginRangeSelect implements PluginServiceRegistrationOptions, PluginServiceGlobalRegistration {
  public id = 'rangeSelect';

  beforeInit(chartInstance: Chart, options?: any) {
    const opts = (chartInstance.config.options as ChartJsPluginRangeSelectExtendedOptions);
    if (opts.rangeSelect) {
      const canvas = this.createOverlayCanvas(chartInstance);
      opts.rangeSelect = Object.assign({}, opts.rangeSelect, {state: {canvas: canvas}});
      chartInstance.canvas.parentElement.prepend(canvas);
    }
  }

  resize(chartInstance: Chart, newChartSize: ChartSize, options?: any) {
    const rangeSelectOptions = (chartInstance.config.options as ChartJsPluginRangeSelectExtendedOptions).rangeSelect;
    if (rangeSelectOptions) {
      rangeSelectOptions.state.canvas.width = newChartSize.width;
      rangeSelectOptions.state.canvas.height = newChartSize.height;
    }
  }

  destroy(chartInstance: Chart) {
    const rangeSelectOptions = (chartInstance.config.options as ChartJsPluginRangeSelectExtendedOptions).rangeSelect;
    if (rangeSelectOptions) {
      rangeSelectOptions.state.canvas.remove();
      delete rangeSelectOptions.state;
    }
  }

  private createOverlayCanvas(chart: Chart): HTMLCanvasElement {
    const rangeSelectOptions = (chart.config.options as ChartJsPluginRangeSelectExtendedOptions).rangeSelect;
    const overlay = this.createOverlayHtmlCanvasElement(chart);
    const ctx = overlay.getContext('2d');

    let selection: ActiveSelection = {x: 0, w: 0};
    let isDragging = false;

    chart.canvas.addEventListener('pointerdown', evt => {
      const rect = chart.canvas.getBoundingClientRect();
      selection.x = this.getXInChartArea(evt.clientX - rect.left, chart);
      isDragging = true;
    });

    chart.canvas.addEventListener('pointerleave', evt => {
      if (!isDragging) {
        ctx.clearRect(0, 0, overlay.width, overlay.height);
      }
    });

    chart.canvas.addEventListener('pointermove', evt => {
      ctx.clearRect(0, 0, chart.canvas.width, chart.canvas.height);

      const chartContentRect = chart.canvas.getBoundingClientRect();
      const currentX = this.getXInChartArea(evt.clientX - chartContentRect.left, chart);
      if (isDragging) {
        selection.w = currentX - selection.x;
        ctx.fillStyle = rangeSelectOptions.fillColor || '#00000044';
        ctx.fillRect(selection.x, chart.chartArea.top, selection.w, chart.chartArea.bottom - chart.chartArea.top);
      } else {
        const cursorWidth = rangeSelectOptions.cursorWidth || 1;
        ctx.fillStyle = rangeSelectOptions.cursorColor || '#00000088';
        ctx.fillRect(currentX, chart.chartArea.top, cursorWidth, chart.chartArea.bottom - chart.chartArea.top);
      }
    });

    chart.canvas.addEventListener('pointerup', evt => {
      const onSelectionChanged = rangeSelectOptions.onSelectionChanged;
      if (onSelectionChanged) {
        onSelectionChanged(this.getDataSetDataInSelection(selection, chart));
      }
      selection = {w: 0, x: 0};
      isDragging = false;
      ctx.clearRect(0, 0, overlay.width, overlay.height);
    });
    return overlay;
  }

  private createOverlayHtmlCanvasElement(chartInstance: Chart): HTMLCanvasElement {
    const overlay = document.createElement('canvas');
    overlay.style.position = 'absolute';
    overlay.style.pointerEvents = 'none';
    overlay.width = chartInstance.canvas.width;
    overlay.height = chartInstance.canvas.height;
    return overlay;
  }

  private getXInChartArea(val: number, chartInstance: Chart) {
    return Math.min(Math.max(val, chartInstance.chartArea.left), chartInstance.chartArea.right);
  }

  private getDataSetDataInSelection(selection: ActiveSelection, chartInstance: Chart): Array<any> {
    const result = [];
    const xMin = Math.min(selection.x, selection.x + selection.w);
    const xMax = Math.max(selection.x, selection.x + selection.w);
    for (let i = 0; i < chartInstance.data.datasets.length; i++) {
      result[i] = chartInstance.getDatasetMeta(i)
        .data
        .filter(data => xMin <= data._model.x && xMax >= data._model.x)
        .map(data => chartInstance.data.datasets[i].data[data._index]);
    }
    return result;
  }
}

Unfortunately, nothing like this is built into chart.js. You would have to implement your own event hooks and handlers that would render a highlighted section on a chart and then use the .getElementsAtEvent(e) prototype method to figure out what data has been highlighted. Even these hooks that are built in may not be enough to implement what you are wanting.

Event hook options are:

• Add event handlers on the canvas element itself (see example below)

  canvas.onclick = function(evt){
      var activePoints = myLineChart.getElementsAtEvent(evt);
      // => activePoints is an array of points on the canvas that are at the same position as the click event.
  };
  

• Add event handler on the chart.js chart object using the onClick config option (explained here).

• Extend some of the core charts event hooks and add your own. (see here for some guidance).

Assuming this approach works, then you could then filter your original chart data array accordingly (in the underlying chart.js object) and call the .update() prototype method to paint a new chart.

Update a few months later based on @jordanwillis’ answer: I’ve got the beginnings of range selection.

canvas.onpointerdown = function (evt) {
  clearAnnotations()
  const points = chart.getElementsAtEventForMode(evt, 'index', { intersect: false })
  const label = chart.data.labels[points[0]._index]
  addAnnotation(label)
}

canvas.onpointerup = function (evt) {
  const points = chart.getElementsAtEventForMode(evt, 'index', { intersect: false })
  const label = chart.data.labels[points[0]._index]
  addAnnotation(label)
}

function clearAnnotations () {
  if (chart.options.annotation) {
    chart.options.annotation.annotations = []
  }
}

function addAnnotation (label) {
  const annotation = {
    scaleID: 'x-axis-0',
    type: 'line',
    mode: 'vertical',
    value: label,
    borderColor: 'red'
  }
  chart.options.annotation = chart.options.annotation || {}
  chart.options.annotation.annotations = chart.options.annotation.annotations || []
  chart.options.annotation.annotations.push(annotation)
  chart.update()
}

Still need to figure out how to show a visual hover indicator as in the demo linked in the question, but it’s a start.

The people who made ChartJS also made a plugin called chartjs-plugin-zoom. To install the plugin type:

npm install chartjs-plugin-zoom. 

Implement:

import { Chart } from 'chart.js';
import zoomPlugin from 'chartjs-plugin-zoom';

Chart.register(zoomPlugin);

To add zooming functionality by dragging, add this to the chart configuration:

options: {
        plugins: {
          zoom: {
            pan: {
              enabled: true,
              mode: 'x',
              modifierKey: 'ctrl',
            },
            zoom: {
              drag: {
                enabled: true
              },
              mode: 'x'
            }
          }
        }
     }
 

A more thorough installation and use tutorial can be found here.
Instructions on how to implement zooming functionality can be found here.