1

The question is, if it's possible to remove this extra ticks

extra ticks

from the chart, to let the graph start exactly from the beginning, without those extra ticks. It's very important for me, because originally I need to hide X axes, and it looks a bit weird, when the chart starts not from the beginning

enter image description here

Roman
  • 83
  • 7

2 Answers2

1

Yes, you can set tickLength to 0 in the grid config:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {
    scales: {
      y: {
        grid: {
          tickLength: 0,
          drawBorder: false
        }
      },
      x: {
        grid: {
          display: false
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
</body>
LeeLenalee
  • 27,463
  • 6
  • 45
  • 69
0

So I've found the best way to do that

scales: {
  x: {
    grid: {
      display: false,
      drawTicks: false,
    },
  },

Just add drawTicks: false and it will solve the problem.

Roman
  • 83
  • 7