CODEWITHSUNDEEP
javascriptchart.js
Cloudias
Cloudias

Reputation: 1

How to enable zoom plugin using Chart JS?

I have been using Chart JS with zoom plugin first, before I code this code. But for some reason, I delete the plugin syntax from my code and now I want to add it again. But the zoom is not working now, my code is same like before when I use the zoom plugin but the zoom does not work. What should I do?


let myChart = new Chart(chart, {
    type: 'line',
    data: {
        labels: dataInputGlobal[0],
        datasets: [{
            label: 'ECG',
            data: dataInputGlobal[1],
            fill: false,
            borderColor: [
                'rgba(255, 0,0, 1)'
            ],
            borderWidth: 1,
            pointStyle: 'line'
        }]
    },
    options: {

        legend: {
            position: "top",
            align: "end"
        },
        title: {
            text: "ECG",
            display: true,
            fontSize: 40
        }
    },
    plugins: {
        zoom: {
            zoom: {
                enabled: true,
                drag: true,
                speed: 0.1,
                threshold: 2
            }
        }
    }
});

this is my HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cloudias</title>
    <style>
        .chart {
            height: 800px;
            width: 50%;
        }
    </style>

</head>

<body>
    <h1>Input file</h1>
    <label for="txtFile">Input File</label>
    <input type="file" name="txtFile" id="txtFile" multiple>
    <div class="chart">
        <canvas id="cobaPlot"></canvas>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"
        integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g=="
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.7.7/chartjs-plugin-zoom.js"
        integrity="sha512-qeclqxc+2KW7GtbmHcj/Ev5eBoYpPnuAcPqusYRIfvaC9OWHlDwu1BrIVPYvfNDG+SRIRiPIokiSvhlLJXDqsw=="
        crossorigin="anonymous"></script>
    <script src="script.js"></script>

</body>

</html>

Upvotes: 0

Views: 2647

Answers (1)

G.W Kalpa Sathjana De Silva
G.W Kalpa Sathjana De Silva

Reputation: 309

const chart = document.querySelector("#cobaPlot");

let myChart = new Chart(chart, {
  type: 'line',
  data: {
    labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
    datasets: [{
      label: 'ECG',
      data: ['100', '150', '500', '200', '300', '500', '200', '320', '450', '100'],
      fill: false,
      borderColor: [
        'rgba(255, 99, 132, 1)'
      ],
      borderWidth: 1,
      pointStyle: 'line'
    }]
  },
  options: {
    legend: {
      position: "top",
      align: "end"
    },
    title: {
      text: "ECG",
      display: true,
      fontSize: 35
    },
    zoom: {
      enabled: true,
      drag: true,
      speed: 0.1,
      threshold: 2
    }
  }
});
.chart {
  position: relative;
  margin: auto;
  width: 90%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
</head>

<body>

  <div class="chart">
    <canvas id="cobaPlot"></canvas>
  </div>


  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.7.7/chartjs-plugin-zoom.js" integrity="sha512-qeclqxc+2KW7GtbmHcj/Ev5eBoYpPnuAcPqusYRIfvaC9OWHlDwu1BrIVPYvfNDG+SRIRiPIokiSvhlLJXDqsw==" crossorigin="anonymous"></script>

</body>

</html>

Simply refer this:

    options: {
        legend: {
            position: "top",
            align: "end"
        },
        title: {
            text: "ECG",
            display: true,
            fontSize: 35
        },
        zoom: {
            enabled: true,
            drag: true,
            speed: 0.1,
            threshold: 2
        }
    }

Upvotes: 1

Related Questions