chart.js - Bar charts flickering issue in charts js

Question

I am getting the flickering issue as well as zoom issue in charts js.that means I have a bar chart in this some levels are so high means some of them are 20k 30k and some of them 0.1 data so when I hover to the nearest less data bar it vanishes all the charts and it shows me only that charts but I don't want this how to disable that thing.

Real Charts :

the zoom or flickering that issue image :

 options: {
          legend: {

              display: true,
              position: 'left',
              labels: {
                boxWidth:12
            }
          },
         title: {

            fontSize: 14,
             text: output[k],
             display: true
         },
         responsive: true,
         maintainAspectRatio: false,

         scales: {

            yAxes: [{
                ticks: {
                    beginAtZero:true
                },
                scaleLabel: {
                 display: true,
                 labelString: 'No. of People'
               }

            }],
            xAxes: [{
             scaleLabel: {
              display: true,
              labelString: 'Age Group'
            }

         }],
         }
        }

标签： chart.js

Answer 1

将此添加到您的代码中以禁用缩放 Y 方向

zoom: {
            // Boolean to enable zooming
            enabled: false,                     
            // Zooming directions. Remove the appropriate direction to disable 
            // Eg. 'y' would only allow zooming in the y direction
            mode: 'y',
        }

例如：

    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        pan: {
            enabled: true,

            mode: 'x',

            speed: 1
        },

        zoom: {
            enabled: false,                     
            mode: 'y',
        }
    }
});

下次请提供您的代码