Drag and Click Charts

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<script src="https://d3js.org/d3-drag.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<body>
  
 <div>Chart Drag and Click Test</div>
<div class="wrapper">
        <canvas id="chart"></canvas>
</div>
</body>

CSS

.wrapper {
  display: "block";
}

JavaScript

(function () {
  let chartInstance;
  let chartElement;

  function createChart(chartElement) {
    const chartConfig = {
        type: 'scatter',
        data: {
          datasets: [
            {
              data: [
                {
                  x: 0,
                  y:0
                }
              ],
              fill: true,
              showLine: true,
              lineTension: 0
            }
          ]
        },
        options: {
          legend: {
            display: false,
          },
          layout: {
            padding: {
              left: 50,
              right: 50,
              top: 0,
              bottom: 0
            }
          },
          title: {
            display: false,
            text: 'Chart.js Interactive Points',
          },
          scales: {
            xAxes: [
              {
                type: 'linear',
                display: true,
                padding: 20,
                paddingLeft: 10,
                paddingRight: 10,
                paddingTop: 10,
                paddingBottom: 10,
                scaleLabel: {
                  display: true,
                  labelString: 'Time',
                },
                ticks: {
                  suggestedMin: -5,
                  suggestedMax: 5,
                  stepValue: 1,
                }
              }
            ],
            yAxes: [
              {
                type: 'linear',
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: 'Weight'
                },
                paddingLeft: 10,
                paddingRight: 10,
                paddingTop: 10,
                paddingBottom: 10,
                ticks: {
                  suggestedMin: 0,
                  suggestedMax: 3,
                  stepValue: 1
                },
              }
            ]
          },
          responsive: true,
          maintainAspectRatio: true,
         ...