JSFiddle - React, Tailwind, and code Playground

by bairog

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.7.7/chartjs-plugin-zoom.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"></canvas>
    </div>
    <button id="reset_zoom"> Reset zoom </button>
  </body>
</html>

CSS

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

JavaScript

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        //labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            borderColor: 'black',
                    backgroundColor: 'black',
                    data: [{
                        x: 0.1,
                        y: 0
                    }, {
                        x: 0.7,
                        y: 0
                    }, {
                        x: 0.3,
                        y: 1
                    }, {
                        x: 0.9,
                        y: 1
                    }]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        plugins: {
            zoom: {
                // Container for pan options
                pan: {
                    // Boolean to enable panning
                    enabled: true,
                  
                    // Panning directions. Remove the appropriate direction to disable 
                    // Eg. 'y' would only allow panning in the y direction
                    mode: 'xy'
                },

                // Container for zoom options
                zoom: {
                    // Boolean to enable zooming
                    enabled: true,
                    //drag: true,
                    // Zooming directions. Remove the appropriate direction to disable 
                    // Eg. 'y' would only allow zooming in the y direction
                    mode: 'xy',
                }
            }
        }
    }
});

$('#reset_zoom').click(function() {
   myChart.resetZoom();
});