Chartjs-How to reduce number of multiple gridlines in stack bar graph chart.js

by

1👍

✅

The horizontal grid lines can be removed through the following configuration in the chart options:

yAxes: [{
  gridLines: {
    display: false
  },

I changed this in your code and removed a few unnecessary definitions and it looks just fine to me as you can see in the following runnable code.

var colors = ['#299DFF', '#80FFFF', '#F8362B'];
var chartData = {
  labels: ["Product"],
  datasets: [{
      label: 'P2',
      data: [29566],
      backgroundColor: colors[0]
    },
    {
      label: 'P3',
      data: [2],
      backgroundColor: colors[1]
    },
    {
      label: 'P4',
      data: [3],
      backgroundColor: colors[2]
    }
  ]
};

new Chart('myChart', {
  type: 'bar',
  data: chartData,
  options: {
    scales: {
      xAxes: [{ 
          barPercentage: 0.5,
          categoryPercentage: 0.5
        }
      ],
      yAxes: [{
        gridLines: {
          display: false
        },
        type: 'logarithmic',
        ticks: {
          beginAtZero: true,
          userCallback: (value, index) => {
            const remain = value / (Math.pow(10, Math.floor(Chart.helpers.log10(value))));
            if (remain == 1 || remain == 2 || remain == 5 || index == 0) {
              return value.toLocaleString();
            }
            return '';
          }
        }
      }]
    },
    legend: {
      display: true,
      maxWidth: 100,
      padding: 30,
      fullWidth: true,
      position: 'bottom',
      lineHeight: 12,
      justifyContent: 'space-between',
      labels: {
        fontSize: 10,
        usePointStyle: true
      }
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart" height="150"></canvas>

Leave a comment