ChartJs。 如何将折线图拉伸到边缘？

Question

I use ChartJs library for building graphs. For now my graphs have "side gaps". I want stretch line graphics to the full width and height like this:

I tried to change canvas width and it works if canvas has not a full width, but I need to make it works also on full width:

My configurations:

data: {
    datasets: [
      {
        data: bids,
        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: asks,
        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,
          },
        }
      ],
      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: {
            min: 0.02,
            padding: 20,
            stepSize: 0.1,
          }
        }

Would be very grateful, if someone can help me.

Answer 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:

 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>