0

I would like to change the direction of scrolling on a horizontal scrollable bar chart in such way scrolling start from right to left (RTL). I'm not sure if it is supported or not. in case, it is not, then is there a way to programmatically scroll to the far right of the chart upon loading to achieve the desired outcome.

const chartsoptions = {
 type: 'bar',
 data: {
  labels: ["1", "2", "3", "4", "5", "6",],
  datasets: [{
   label: 'OFF',
   data: [1, 2, 3, 4, 5, 6],
   backgroundColor:   [ 'rgba(255, 99, 132, 0.4)', ],
   borderColor:   [ 'rgb(255, 99, 132)',  ],
   borderWidth: 1
  },{
   label: 'On',
   data: [6, 5, 4, 3, 2, 1],
   backgroundColor:  [ 'rgba(75, 192, 192, 0.4)', ],
   borderColor:   ['rgb(75, 192, 192)',   ],
   borderWidth: 1
  }]
 },
 options: {
  plugins: {
    legend: {
       display: true,
       labels: {
        font: {
         size: 20,
         weight: "bold",
        },
       }
    },
    datalabels: {
     anchor: 'center', 
     clamp: true, 
     display: true, 
     textAlign: 'center', 
     borderRadius: 3, 
     color: "black", 
     clip: true,
     font: {
      size: 20,
      weight: "bold",
     },

   },  
   zoom: {
    zoom: {   wheel: { enabled: false, },  mode: 'x', },
    pan: {   enabled: true,  mode: 'x', },
    limits: { x: { minRange: 3 }, },
   }
  },
  scales: {
   x: { ticks: { font: { size: 20, weight: "bold" }, } },
   y: { ticks: { font: { size: 20, weight: "bold" }, } },
  }
 }
}

const ctx = document.getElementById('dailyonoff').getContext('2d');
document.getElementById('dailyonoff').style.backgroundColor = "white"; 
const chart = new Chart(ctx, chartsoptions);

setTimeout(() => {
  chart.zoom(2);
  chart.pan({
    x: Number.MAX_SAFE_INTEGER
  }, undefined, 'default');
}, 10)
<!DOCTYPE html>
<html lang="en">
 <head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js" integrity="sha256-+8RZJua0aEWg+QVVKg4LEzEEm/8RFez5Tb4JBNiV5xA=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.1.1/chartjs-plugin-zoom.js"></script>   

 </head>
 <body>
  <canvas id="dailyonoff"   class="onoff" width="300" height="200" ></canvas>
 </body>

</html>
ASH
  • 89
  • 1
  • 11

1 Answers1

0

I found the solution to navigate (pan) to the end of the graph. just replace:

MAX_SAFE_INTEGER

with:

MIN_SAFE_INTEGER
ASH
  • 89
  • 1
  • 11