'Having trouble returning to the initial dataset with chartjs-plugin-crosshair on reset zoom

Did anyone have the chance to work with the chartjs plugin - chartjs-plugin-crosshair? I'm having trouble after having zoomed in the datasets several times and when clicking the 'reset zoom' button I can only zoom out the last zoom in action, but I would like to return to the initial dataset before having initialized the zoom in action. Does anyone know how to tackle this problem?

Below is the code in jsfiddle:

https://jsfiddle.net/u0594jed/

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <link rel="stylesheet" href="">
  <script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js></script>
 <script src=https://cdn.jsdelivr.net/npm/[email protected]></script>

</head>
<body>

  <canvas id="myChart" width="400" height="400"></canvas>

<script type="text/javascript">




    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'line',
      data: {
          labels: ['a','b','c','d','e','f','g','h','i','a','b','c','d','a', 'c','d', 'a'],
          datasets: [{
              label: '# of Votes',
              data: [100,200,400,321,345,1234,456,5675,345,456,678,79,456,345,234,34,345],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)'
              ],
              borderWidth: 1
          }]
      },
    options: {
        scales: {
              y: {
                  beginAtZero: true
              }
          },
      plugins: {
        tooltip: {
          mode: 'interpolate',
          intersect: false
        },
        crosshair: {
          line: {
            color: '#F66',  // crosshair line color
            width: 1        // crosshair line width
          },
          sync: {
            enabled: true,            // enable trace line syncing with other charts
            group: 1,                 // chart group
            suppressTooltips: false   // suppress tooltips when showing a synced tracer
          },
          zoom: {
            enabled: true,                                      // enable zooming
            zoomboxBackgroundColor: 'rgba(66,133,244,0.2)',     // background color of zoom box 
            zoomboxBorderColor: '#48F',                         // border color of zoom box
            zoomButtonText: 'Reset Zoom',                       // reset zoom button text
            zoomButtonClass: 'reset-zoom',                      // reset zoom button class
          },
          callbacks: {
            beforeZoom: () => function(start, end) {                  // called before zoom, return false to prevent zoom
              return true;
            },
            afterZoom: () => function(start, end) {  
                        // called after zoom
            }
          }
        }
      }
    }
  });


</script>




</body>
</html>

javascript

Solution 1:^[1]

colleague:). Had the same problem... Found the answer into crosshair plugin src file: chartjs-plugin-crosshair.esm.js (line 477)

var filterDataset = (chart.config.options.scales.x.type !== 'category');

It means that you need to use another type of scale. I used type "time" - and voila, zoom fixed. Sample of code here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Igor Savvov

'Having trouble returning to the initial dataset with chartjs-plugin-crosshair on reset zoom

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]