CODEWITHSUNDEEP
chart.js
Wakil Khan
Wakil Khan

Reputation: 55

Adding vertical and horizontal scroll to Chart js Bar graph

I'm working with Chart.js (version: 3.5.1) to plot graphs like line chart, bar chart. I am facing an issue with horizontal bar chart. As data points are huge, so its tough to see each bar with their labels separately. How to add both vertical and horizontal scroll to my horizontal bar chart, so that I can scroll and see all the bars separately.

Image: Output

For more clarification please let me know, how I should describe.

Here is the code I have tried so far:

<!DOCTYPE html>

<style>
.col4{
    position: relative;
  min-height: 1px;
  float: left;
  padding-right: 10px;
  padding-left: 10px;

}

.col4 {
    width: 75%;
}

.chart_box {
    box-sizing: border-box;
  margin: 15px 0 15px 0;
  

}

#chart_01,#chart_02 {
  width: 500px;
  height: 265px;
}



</style> 




<html>

<head>
  <!-- Import Chart.js via CDN -->
  
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-date-fns.bundle.js"></script>
    
    
</head>


<div class="col4">
    <div class="chart_box">
        <canvas id="chart_01"></canvas>
            
    </div>
</div> <!--Graph_01-->

</body> 

</html>







<script src="color-generator.js"> </script>

<script> 

//// chart 1

//setup
const labels = [];
var mydata = [];
for (let i=0; i<1000; i++)
{
    labels.push("item-"+(i).toString());
    mydata.push((i-500)*(i-500));
}

const data = {
    labels: labels,
    datasets: [
        {
            label: "Data",
            data: mydata,
            backgroundColor: 'rgb(255, 199, 132)',
        },
    ]
};

const config = {
    type: 'bar',
    data: data,
    options: {
        indexAxis: 'y',
        plugins: {
            title: {
                display: true,
                text: 'Chart.js Bar Chart - Stacked'
            },
        },
        responsive: true,
        scales: {
            x: {
                stacked: true,
            },
            y: {
                stacked: true
            }
        }
    }
};


//chart render
var myChart = new Chart(
    document.getElementById('chart_01').getContext("2d"),
    config
);


</script>

Upvotes: 0

Views: 826

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31439

You can use the zoom plugin for this. It also has build in panning features so you can move the chart area:

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 30],
      borderColor: 'pink'
    }]
  },
  options: {
    plugins: {
      zoom: {
        zoom: {
          wheel: {
            enabled: false,
          },
          mode: 'x',
        },
        pan: {
          enabled: true,
          mode: 'x',
        },
        limits: {
          x: {
            minRange: 3
          },
        },
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);

setTimeout(() => {
  chart.zoom(2);
  chart.pan({
    x: Number.MAX_SAFE_INTEGER
  }, undefined, 'default');
}, 10)
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></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>
</body>

Upvotes: 0

Related Questions