Как я могу заставить оси моего графика использовать одинаковые пропорции для масштабирования?

Question

Используя Chart.js, я сделал точечный график. Точки на графике всегда будут на оси. В настоящее время я использую следующие параметры и данные:

public scatterChartLabels:string[] = ['Experiencing', 'Ideation', 'Thinking', 'Evaluation'];

public scatterChartData = [
    {
      x: 0,
      y: localStorage.getItem('col1')
    }, {
      x: localStorage.getItem('col2'),
      y: 0
    }, {
      x: 0,
      y:  - localStorage.getItem('col3')
    },
    {
      x: - localStorage.getItem('col4'),
      y: 0
    },
    {
      x: 0,
      y: localStorage.getItem('col1')
    }
  ]

  public scatterChartOptions = {
    showLines: true,
    yAxes: {
      gridLines: {
        zeroLineWidth: 100
      }
    },
    scales: {
      xAxes: [{
        gridLines: {
          zeroLineColor: '#c1272d'
        },
      }],
      yAxes: [{
        gridLines: {
          zeroLineColor: '#c1272d'
        }
      }],
    }
  }

  public scatterChartType: string = 'scatter';

  public scatterChartCustomColors = [{
    backgroundColor: 'rgba(255, 147, 29, 0.5)',
    borderColor: 'rgba(255, 147, 29)',
    pointBackgroundColor: 'rgba(255, 147, 29, 0.5)',
    pointBorderColor: 'rgba(255, 255, 255)'
  }]

Это дает следующий график:

Как я могу заставить диаграмму использовать одинаковый масштаб на обеих осях? Например, если наибольшее значение по оси Y равно 130, как я могу сделать минимальный тик по оси Y 130, а по оси X -130 и 130?

Answer 1

Я смог сделать это, обновив настройки галочки для каждой оси:

public scatterChartOptions = {
    ...
    scales: {
      xAxes: [{
        ticks: {
          min : - 130,
          max : 130
        }
      }],
      yAxes: [{
        ticks: {
          min : - 130,
          max : 130
        }
      }]
    }
  }