score:1

i've searched and found this comment:

be sure you don't have the dataset barthickness value set, or it will override the barpercentage setting. philip f

i change the chart settings as follows:

mychart = new chart(document.getelementbyid('thischart'), {
    type: 'bar',
    data: {
    labels: myscales,
    datasets: [{
        backgroundcolor: 'rgba(54, 162, 235, 0.6)',
        bordercolor: 'rgba(54, 162, 235, 1.0)',
        data: myvalues,
        barthickness: 16 // 
    }]
    },
    options: option
});

here is the working jsfiddle.


full code:

var thischart = null;
var myscales = [];
var myvalues = [];
var numbars = 50;

var option = {
  responsive: true,
  maintainaspectratio: false,
  interaction: {
    intersect: false,
    mode: 'nearest'
  },
  scales: {
    x: {
      display: true,
      grid: {
        drawonchartarea: false,
        drawticks: false
      }
    },
    y: {
      max: 100,
      grace: '5%',
      grid: {
        drawticks: false
      },
      display: true
    }
  },
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      enabled: false
    },
    hover: {
      mode: null
    }
  }
};

mychart = new chart(document.getelementbyid('thischart'), {
  type: 'bar',
  data: {
    labels: myscales,
    datasets: [{
      backgroundcolor: 'rgba(54, 162, 235, 0.6)',
      bordercolor: 'rgba(54, 162, 235, 1.0)',
      //borderwidth: 2,
      data: myvalues,
      barthickness: 16,
      //categorypercentage: 1.0,
      //barpercentage: 0.1
    }]
  },
  options: option
});

for (var i = 1; i != numbars; i++) {
  myscales[i] = i;
  myvalues[i] = math.floor(math.random() * (100 - 50 + 1) + 50);
}
displaygraph();


function displaygraph() {

  // remove the old data
  mychart.data.labels.pop();
  mychart.data.datasets.foreach((dataset) => {
    dataset.data.pop();
  });
  mychart.update();

  // add in the new data
  mychart.data.labels = myscales;
  mychart.data.datasets.foreach((dataset, i) => {
    dataset.data = myvalues;
  });

  if (myvalues.length > 100) {
    mychart.data.datasets.foreach((dataset, i) => {
      dataset.barpercentage = 1.0; // remove gap between bars
      dataset.borderwidth = 0; // remove bar border
      dataset.backgroundcolor = 'rgba(54, 162, 235, 1.0)'; // remove transparency
    });
  } else {
    mychart.data.datasets.foreach((dataset, i) => {
      dataset.barpercentage = 0.8; // default width of gap between bars
      dataset.borderwidth = 2; // default bar border
      dataset.backgroundcolor = 'rgba(54, 162, 235, 0.6)'; // default bar background colour
      dataset.bordercolor = 'rgba(54, 162, 235, 1.0)'; // default bar border colour
    });
  }
  mychart.update();
}

function switchbars() {

  if (numbars == 50) { // toggle number of bars
    numbars = 120;
  } else {
    numbars = 50;
  }

  myscales.length = numbars;
  myvalues.length = numbars;
  for (var i = 1; i != numbars; i++) {
    myscales[i] = i;
    myvalues[i] = math.floor(math.random() * (100 - 50 + 1) + 50);
  }

  displaygraph();
}
.chart-container {
  width: 100vw;
  height: 60vh;
  margin-top: 4em;
  position: relative;
}

canvas {
  display: block;
  margin-left: 2em;
  margin-right: 2em;
}

.styleselectorbutton {
  width: 100vw;
  height: 5em;
  margin-top: 1em;
  display: flex;
  justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.2.0/chart.min.js"></script>
<div class="chart-container">
  <canvas id="thischart"></canvas>
</div>

<div id="selectorbutton" class="styleselectorbutton">
  <input type="button" onclick="switchbars()" class="button" value="switch">
</div>


Related Query

More Query from same tag