charts.js data doesn't fit second y-axis

user_6800396 0
Viewed 78

I have a simple element, containing whole dataset.
Subset "change" is meant for second Y-Axis but using the code below, the "change" dataset still displays in relation to left axis.
Please advise, documentation is not very clear on this topic. I would expect the blue line to be in relation to the right axis, using below code.

  let chartElement = $('#mainChart');
  const data = chartElement.data('chart-dataset');
  const cfg = {
      type: 'line',
      data: {
          datasets: [{
              'label': 'Total balance',
              data: data.stats,
              parsing: {
                  xAxisKey: 'time',
                  yAxisKey: 'total',
                  yAxisID: 'y',
              },
              backgroundColor: 'rgb(98,250,2)',
              borderColor: 'rgb(98,250,2)',
          }, {
              'label': 'Risk balance',
              data: data.stats,
              parsing: {
                  xAxisKey: 'time',
                  yAxisKey: 'risk',
                  yAxisID: 'y',
              },
              backgroundColor: 'rgb(255,191,34)',
              borderColor: 'rgb(255,191,34)',
          }, {
              'label': 'Average risk',
              data: data.stats,
              parsing: {
                  xAxisKey: 'time',
                  yAxisKey: 'avRisk',
                  yAxisID: 'y',
              },
              backgroundColor: 'rgb(236,4,4)',
              borderColor: 'rgb(236,4,4)',
          }, {
              'label': 'Change %',
              data: data.change,
              parsing: {
                  xAxisKey: 'time',
                  yAxisKey: 'change',
                  yAxisID: 'yPercent',
              },
              backgroundColor: 'rgb(31,116,241)',
              borderColor: 'rgb(31,116,241)',
          }]
      },
      options: {
          scales: {
              y: {
                  id: 'y',
                  type: 'linear',
                  position: 'left',
                  ticks: {
                      beginAtZero: true,
                  }
              },
              yPercent: {
                  id: 'yPercent',
                  type: 'linear',
                  position: 'right',
                  suggestedMax: 1.0,
                  suggestedMin: -1.0,
                  ticks: {
                      precision: 4,
                  }
              },
          }
      }
  }
  const mainChart = new Chart(
      chartElement,
      cfg
  )
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="mainChart" data-chart-dataset="{&quot;stats&quot;:[{&quot;time&quot;:&quot;2022-03-27 00:00:05&quot;,&quot;total&quot;:424.97014172,&quot;risk&quot;:307.70675152,&quot;avRisk&quot;:34.18963905777778},{&quot;time&quot;:&quot;2022-03-27 00:30:06&quot;,&quot;total&quot;:424.97666652,&quot;risk&quot;:307.70675152,&quot;avRisk&quot;:34.18963905777778},{&quot;time&quot;:&quot;2022-03-27 01:00:06&quot;,&quot;total&quot;:425.22301931,&quot;risk&quot;:307.70675152,&quot;avRisk&quot;:34.18963905777778},{&quot;time&quot;:&quot;2022-03-27 01:30:06&quot;,&quot;total&quot;:424.91940821,&quot;risk&quot;:307.70675151999995,&quot;avRisk&quot;:34.189639057777775}],&quot;change&quot;:[{&quot;time&quot;:&quot;2022-03-27 00:00:05&quot;,&quot;change&quot;:0},{&quot;time&quot;:&quot;2022-03-27 00:30:06&quot;,&quot;change&quot;:0.0015353549248324776},{&quot;time&quot;:&quot;2022-03-27 01:00:06&quot;,&quot;change&quot;:0.05796854495972885},{&quot;time&quot;:&quot;2022-03-27 01:30:06&quot;,&quot;change&quot;:-0.07140043840822045}]}" width="1639" height="819" style="display: block; box-sizing: border-box; height: 819px; width: 1639px;"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>

chart.js charts javascript
1 Answers

yAxisID is not supposed to be part of the parsing object. You need to define it in the root of the dataset:

let chartElement = $('#mainChart');
const data = chartElement.data('chart-dataset');
const cfg = {
  type: 'line',
  data: {
    datasets: [{
      'label': 'Total balance',
      data: data.stats,
      parsing: {
        xAxisKey: 'time',
        yAxisKey: 'total',
      },
      backgroundColor: 'rgb(98,250,2)',
      borderColor: 'rgb(98,250,2)',
    }, {
      'label': 'Risk balance',
      data: data.stats,
      parsing: {
        xAxisKey: 'time',
        yAxisKey: 'risk',
      },
      backgroundColor: 'rgb(255,191,34)',
      borderColor: 'rgb(255,191,34)',
    }, {
      'label': 'Average risk',
      data: data.stats,
      parsing: {
        xAxisKey: 'time',
        yAxisKey: 'avRisk',
      },
      backgroundColor: 'rgb(236,4,4)',
      borderColor: 'rgb(236,4,4)',
    }, {
      'label': 'Change %',
      data: data.change,
      parsing: {
        xAxisKey: 'time',
        yAxisKey: 'change',
      },
      yAxisID: 'yPercent',
      backgroundColor: 'rgb(31,116,241)',
      borderColor: 'rgb(31,116,241)',
    }]
  },
  options: {
    scales: {
      y: {
        id: 'y',
        type: 'linear',
        position: 'left',
        ticks: {
          beginAtZero: true,
        }
      },
      yPercent: {
        id: 'yPercent',
        type: 'linear',
        position: 'right',
        suggestedMax: 1.0,
        suggestedMin: -1.0,
        ticks: {
          precision: 4,
        }
      },
    }
  }
}
const mainChart = new Chart(
  chartElement,
  cfg
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="mainChart" data-chart-dataset="{&quot;stats&quot;:[{&quot;time&quot;:&quot;2022-03-27 00:00:05&quot;,&quot;total&quot;:424.97014172,&quot;risk&quot;:307.70675152,&quot;avRisk&quot;:34.18963905777778},{&quot;time&quot;:&quot;2022-03-27 00:30:06&quot;,&quot;total&quot;:424.97666652,&quot;risk&quot;:307.70675152,&quot;avRisk&quot;:34.18963905777778},{&quot;time&quot;:&quot;2022-03-27 01:00:06&quot;,&quot;total&quot;:425.22301931,&quot;risk&quot;:307.70675152,&quot;avRisk&quot;:34.18963905777778},{&quot;time&quot;:&quot;2022-03-27 01:30:06&quot;,&quot;total&quot;:424.91940821,&quot;risk&quot;:307.70675151999995,&quot;avRisk&quot;:34.189639057777775}],&quot;change&quot;:[{&quot;time&quot;:&quot;2022-03-27 00:00:05&quot;,&quot;change&quot;:0},{&quot;time&quot;:&quot;2022-03-27 00:30:06&quot;,&quot;change&quot;:0.0015353549248324776},{&quot;time&quot;:&quot;2022-03-27 01:00:06&quot;,&quot;change&quot;:0.05796854495972885},{&quot;time&quot;:&quot;2022-03-27 01:30:06&quot;,&quot;change&quot;:-100.07140043840822045}]}"
  width="1639" height="819" style="display: block; box-sizing: border-box; height: 819px; width: 1639px;"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>

user_86829830
Related