Hiden Gridline in chart JS

Question

I try to hide the Gridline of Chart.js . But I can not hide it. I want a chart like the one below.

But the result of the charting is not what I expected

I can not hoiden it. Besides, vertical can not bold. Here is the config chart (I am using angular and chart js library)

this.chartDemo = {
    title: {
      display: false,
    },
    legend: {
      position: 'right',
      display: false,
    },
    scales: {
      xAxes: [
        {
          ticks: {
            beginAtZero: true,
            max: 100,
            min: 0,
          },
          gridLines: {
            drawOnChartArea: false
          },
          display: false,
        },
      ],
      yAxes: [
        {
          display: this.handleShow(),
          gridLines: {
            drawOnChartArea: false
          }
        },
      ],
    },
    responsive: false,
    plugins: {
      grace: {
        grace: 2,
        hardMax: true,
      },
      datalabels: {
        anchor: 'end',
        align: 'end',
        rotation: 0,
        padding: 12,
        clip: false,
        labels: {
          value: {
            color: '#000',
          },
        },
        font: {
          size: '12',
          weight: 'bold',
        },
      },
    },
  };

Please give me the solution

You need check this same question https://stackoverflow.com/questions/36676263/chart-js-v2-hiding-grid-lines — Raeesh Alam, Aug 12 '21 at 04:23
Does this answer your question? [Chart.js v2 - hiding grid lines](https://stackoverflow.com/questions/36676263/chart-js-v2-hiding-grid-lines) — LeeLenalee, Aug 12 '21 at 11:18

score 0 · Answer 1 · answered Aug 12 '21 at 05:26

You can set display:false on gridLines attribute, like this:

  scales: {
    yAxes: [{
      stacked: true,
      gridLines: {
        display: false,
      }
    }],
    xAxes: [{
      gridLines: {
        display: false
      }
    }]
  }

Here is working snippet:

var data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
  datasets: [{
    label: "Dataset #1",
    backgroundColor: "rgba(255,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 2,
    hoverBackgroundColor: "rgba(255,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
    data: [65, 59, 20, 81, 56, 55, 40],
  }]
};

var options = {
  maintainAspectRatio: false,
  scales: {
    yAxes: [{
      stacked: true,
      gridLines: {
        display: false
      }
    }],
    xAxes: [{
      gridLines: {
        display: false
      }
    }]
  }
};

Chart.Bar('chart', {
  options: options,
  data: data
});

console.clear();

body {  
  background: #1D1F20;
  padding: 16px;
}

canvas {
  border: 1px dotted red;
}

.chart-container {
  position: relative;
  margin: auto;
  height: 80vh;
  width: 80vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div class="chart-container">
    <canvas id="chart"></canvas>
</div>

Hiden Gridline in chart JS

1 Answers1