[Chartjs]-Charts.js data doesn't fit second y-axis

by

2👍

✅

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>

Leave a comment