title: How to make points in chartjs draggable?
body: <h1>Question</h1>
  
  <p>I'm looking to make 3 points on a graph draggable between 0 and 100. I'm looking to do this in React with <a href="https://www.chartjs.org/" rel="nofollow noreferrer">ChartJS</a> via <a href="https://github.com/jerairrest/react-chartjs-2" rel="nofollow noreferrer">react-chartjs-2</a>.</p>
  
  <p><a href="https://jsfiddle.net/Coltin/7nf6dmhh/2/" rel="nofollow noreferrer">Here is a fiddle</a> with everything setup (js also below).</p>
  
  <h1>Extra Info</h1>
  
  <p>The fiddle uses some random version of react-chartjs-2 because I couldn't figure out how to import. On my local setup I use <code>import { Line } from 'react-chartjs-2';</code> but I'm not sure how to do that in jsfiddle. Webdev is super new to me.</p>
  
  <h1>What have I tried so far?</h1>
  
  <ul>
  <li><p>I tried using a few chartjs plugins (<a href="https://github.com/chrispahm/chartjs-plugin-dragData" rel="nofollow noreferrer">like this one</a>) that claimed
  to do draggable points, but I couldn't figure out how to get them
  working in React. This might be the easiest solutin.</p></li>
  <li><p>I tried adding my own event listeners for mouseDown/Up/Enter/Leave,
  but I was unable to attach these to the actual points. If I just have
  access to <code>&lt;Line /&gt;</code> is there a way in React for me to attach to the
  points themselves? If I could get the coordinates and have these
  events, I could kludge together a solution.</p></li>
  <li><p>I tried searching on the chartjs and react-chartjs-2 docs, but I
  couldn't find anything that would let me drag, or attach the right
  listeners.</p></li>
  </ul>
  
  <h1>Code</h1>
  
  <pre><code>var Line = reactChartjs2.Line;
  
  const options = {
    tooltips: {enabled: true},
    scales: {
      xAxes: [{
        gridLines: {display: false, color: 'grey',},
        ticks: {fontColor: '#3C3C3C', fontSize: 14,},
      }],
      yAxes: [{
        scaleLabel: {display: true, labelString: 'Color Strength', fontSize: 14,},
        ticks: {
          display: true,
          min: -5,
          max: 100,
          scaleSteps: 50,
          scaleStartValue: -50,
          maxTicksLimit: 4,
          fontColor: '#9B9B9B',
          padding: 30,
          callback: point =&gt; (point &lt; 0 ? '' : point),
        },
        gridLines: {
          display: false,
          offsetGridLines: true,
          color: '3C3C3C',
          tickMarkLength: 4,
        },
      }],
    },
  };
  
  class DraggableGraph extends React.Component {
      state = {
      dataSet: [0, 0, 0],
      labels: ['red', 'green', 'blue'],
      };
  
      render() {
          const data = {
        labels: this.state.labels,
        datasets: [{
          data: this.state.dataSet,
          borderColor: '9B9B9B',
          borderWidth: 1,
          pointRadius: 10,
          pointHoverRadius: 10,
          pointBackgroundColor: '#609ACF',
          pointBorderWidth: 0,
          spanGaps: false,
        }],
      };
  
      return (
        &lt;div&gt;
          &lt;Line
            data={data}
            options={options}
            legend={{display: false}}
            plugins={{}}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;DraggableGraph /&gt;, document.getElementById('app'));
  </code></pre>