Chartjs-ChartJs. How to stretch up line graph to the edges?

by

1👍

Set xAxes.ticks.min to the minimum X value and .max to the maximum value, and set yAxes.ticks.padding to 0.

Here’s an example. I had to make up some numbers because the data is missing from your post:

Chart without left padding

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
        data: [{
          x: 1,
          y: 12
        }, {
          x: 2,
          y: 11
        }, {
          x: 3,
          y: 10
        }, {
          x: 4,
          y: 1
        }, ],
        fill: true,
        pointHitRadius: 10,
        pointBorderWidth: 0,
        pointHoverRadius: 4,
        pointHoverBorderColor: 'white',
        pointHoverBorderWidth: 2,
        pointRadius: 0,
        backgroundColor: 'rgba(58, 196, 174, 0.4)',
        borderColor: '#3ac4ae',
        lineTension: 0.7,
        borderJoinStyle: 'miter',
      },
      {
        data: [{
          x: 6,
          y: 1
        }, {
          x: 7,
          y: 3
        }, {
          x: 8,
          y: 5
        }, {
          x: 9,
          y: 11
        }, ],
        pointRadius: 0,
        fill: true,
        pointHitRadius: 10,
        pointBorderWidth: 0,
        pointHoverRadius: 4,
        pointHoverBorderColor: 'white',
        pointHoverBorderWidth: 2,
        backgroundColor: 'rgba(255, 107, 66, 0.4)',
        borderColor: '#ff6b42',
        lineTension: 0.7,
        cubicInterpolationMode: 'default',
        borderJoinStyle: 'miter',
      }
    ]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        display: true,
        type: 'linear',
        gridLines: {
          borderDashOffset: 0,
          display: true,
          color: 'rgba(255, 255, 255, .1)'
        },
        ticks: {
          autoSkip: false,
          callback: (value, index, values) => {
            console.log('valueskol', values)
            return value
          },
          beginAtZero: true,
          padding: 20,

          min: 1,
        },
      }],
      yAxes: [{
        display: true,
        type: 'linear',
        position: 'left',
        gridLines: {
          display: true,
          color: 'rgba(255, 255, 255, .1)',
          drawBorder: false,
          offsetGridLines: true,
          tickMarkLength: 0,
          drawOnChartArea: true
        },
        ticks: {
          padding: 0,
        }
      }]
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Leave a comment