Как в Chart JS вывести значения второй Y-оси, синхронизированные с первой осью?

В идеале нужен вот такой график. Чтобы было 2 вертикальных оси, а данные правой оси синхронизировались с левой и подстраивались уже по значениям. Как выглядим сам график меня не интересует.

необходимый график

У меня получается вот такая история. В коде задаются отдельно данные для обеих осей через админку, и они не синхронизируются, в итоге получается дублирование горизонтальных осей. Слева - свои, справа - свои. Можно ли настроить автоматический пересчет значений правой оси в соответствии с левой?

Например, чтобы к значению 60000 тыс руб было значение 1800, допустим, а не заданное изначально 2000.

тот что есть сейчас

var $mixChart = $('#myChart');


 var graphicsData = $mixChart.data('values');

  var labels = [];

  $.each(graphicsData, function(key, item){
    var month_caption = (((''+item.month).length == 1) ? '0'+item.month : item.month)+'.'+item.year;
    labels.push(month_caption);
  });


  var revenues = []; //Доход

  $.each(graphicsData, function(key, item){
    revenues.push(item.income);
  });

  var clients = []; //прибыль

  $.each(graphicsData, function(key, item){
    clients.push(item.profit);
  });

  var lines = []; //траффик

  $.each(graphicsData, function(key, item){
    lines.push(item.traffic);
  });

  const dataLine1 = {
    label: "Траффик",
    data: lines, //траффик
    borderColor: '#99b3ff',
    backgroundColor: 'rgba(0, 0, 0, 0)',
    yAxisID: 'lines',
  };

  const dataLine2 = {
    label: "Прибыль",
    data: clients, //прибыль
    borderColor: '#ff9999',
    backgroundColor: 'rgba(0, 0, 0, 0)',
    yAxisID: 'clients',
  };

  const dataLine3 = {
    type: 'line',
    label: "Доход",
    data: revenues, //Доход
    borderColor: '#6bb39a',
    backgroundColor: 'rgba(0, 0, 0, 0)',
    yAxisID: 'revenues',
  };

  const revenuesMax = Math.max.apply(null, revenues) + 2000;
  const clientsMax = Math.max.apply(null, clients) + 2000;
  const linesMax = Math.max.apply(null, lines) + 2000;


  var newChart = document.getElementById("myChart");

  if (newChart) {

    var mix = newChart.getContext('2d');
    mix.canvas.width = 740;
    mix.canvas.height = 270;

    var mixChart = new Chart(mix, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [
        {
          type: 'line',
          label: false,
          data: income,
          borderColor: 'rgba(75, 192, 192, 1)',
          backgroundColor: 'rgba(0, 0, 0, 0)',
          yAxisID: 'revenues',
          display: false
        },
        {},
        {}

        ]
      },
      options: {
        responsive: false,
        legend: {
          display: false
        },
        scales: {
          yAxes: [
          {
            id: "revenues",
            ticks: {
              beginAtZero: false,
              max: revenuesMax,
              min: -1000,
            },
            scaleLabel: {
              display: true,
              labelString: 'тыс руб'
            }
          },
          {   display: false,
            id: "clients",
            position: 'right',
            ticks: {
              beginAtZero: false,
              max: clientsMax,
              min: -1000,
            },
            scaleLabel: {
              display: true,
              labelString: 'Clients'
            }
          },
          {
            id: "lines",
            position: 'right',
            ticks: {
              beginAtZero: false,
              max: linesMax,
              min: -1000,
            },
            scaleLabel: {
              display: true,
              labelString: 'млн руб'
            }
          },
          ]
        },
      }
    });

Ответы (0 шт):