Chartjs-I want to hide the line as shown below

by

0👍

Why not just reduce the lineWidth from the y axis?

document.addEventListener('DOMContentLoaded', () => {
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["test", "test2"],
      datasets: [{
        data: [
          // 68,32
          {
            y: 68,
            x: 10
          },
          {
            y: 32,
            x: 10
          }
        ],
        backgroundColor: [
          '#549ed2',
          '#f88a4b',
        ],
        borderColor: [
          '#549ed2',
          '#f88a4b',
        ],
        borderWidth: {
          top: 7,
          right: 0,
          bottom: 0,
          left: 0
        },

      }]
    },
    options: {
      legend: {
        display: false
      },
      responsive: true,
      scales: {
        xAxes: [{
          stacked: true,
          gridLines: {
            color: "#fdfdfd",
            display: true,
            zeroLineColor: '#ccc',
          },
          ticks: {
            fontColor: "#000", // this here
          },
        }],
        yAxes: [{
          stacked: true,
          gridLines: {
            display: true,
            color: "rgba(84, 210, 210, 0.2)",
            lineWidth: 1,
          }
        }],
      },
    }
  })
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart" width="200" height="400"></canvas>

Leave a comment