chartjs-plugin-dragsegment

A plugin for Chart.js

Add ability to drag segments (line chartsjs).

Demo

Installation

Use npm to install plugin:

npm install chartjs-plugin-dragsegment

Register plugin in Chartjs:

import Chart from 'chart.js';
import ChartJSdragSegment from 'chartjs-plugin-dragsegment';
// ...
Chart.pluginService.register(ChartJSdragSegment);
// ...

Or include it in your html (Chart should be available on window):

<script src="node_modules/chartjs-plugin-dragsegment/dist/chartjs-plugin-dragsegment.min.js"></script>

Usage

Important options in config when you create new chart:

const ctx = getChartContext();
const chartConfig = {
  // ...
  type: 'line',
  // ...
  options: {
    // ...
    dragSegment: true,
    // ...
  }
};

new Chart(ctx, chartConfig);

If dragSegment is Object it contain plugin options.

new Chart(ctx, {
  type: 'line',
  options: {
    // ...
    dragSegment: {
      // allow to drag segments verticaly (default: true)
      vertical: true,

      // allow to drag segments horizontaly (default: false)
      horizontal: false,

      // onDrag will be executed before coordinates updating
      // @chart - ChartJS instance
      // @points - Object , of points {x, y} for each dataset, witch will update their coordinates
      //   points = {
      //     datasetIndex: {
      //       elementIndex: {
      //         x // optional, not present if not modified
      //         y // optional, not present if not modified
      //       }
      //     }
      //   }
      //   You can set new values (add, remove, ...) for points
      onDrag(chart, points) {
        if (Math.random() < 0.5) {
          return false;
        }
        return true;
      }
    }
    // ...
  }
);