[Chartjs]-Artefacts when showing compact vertical bar chart in chart.js

by

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>

Leave a comment