Блог

Я использую библиотеку ChartJS для построения графиков. На данный момент мои графики имеют «боковые пробелы». Я хочу растянуть линейную графику на всю ширину и высоту вот так:

Я попытался изменить ширину холста, и это работает, если холст имеет не полную ширину, но мне нужно, чтобы он также работал на полную ширину:

Мои конфигурации:

 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,
          }
        }
  

Был бы очень благодарен, если кто-нибудь сможет мне помочь.

Установите xAxes.ticks.min минимальное значение X и .max максимальное значение, а также установите yAxes.ticks.padding значение 0.

Вот пример. Мне пришлось составить некоторые цифры, потому что в вашем сообщении отсутствуют данные:

 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>