[Chartjs]-Chartjs with multiple y axes and different scales

6👍

I found the problem, updated fiddle: https://jsfiddle.net/psycocandy/fwncq25a/14/

To set the correspondent ID in the dataset with the yAxes, the correct way is to use yAxisID:

var chartData = [
                [1450478, 2645844, 1840524, 640057, 1145844, 1530500, 1695844, 1778654, 1450478, 1645844, 1450478, 1645844],
                [3.14, 4.15, 3.09, 3.48, 4.05, 3.99, 4.39, 4.15, 4.10, 3.98, 3.54, 3.50]
    ];

var dataSet = {
  labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
    'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
  ],
  datasets: [{
                type: 'line',
                label: 'Preço Médio Mensal',
                yAxisID: 'y-axis-0',
                borderColor: '#17522f',
                fill: false,
                backgroundColor: '#17522f',
                borderWidth: 3,
                radius: 4,
                hoverBorderWidth: 4,
                rotate: 90,
                data: chartData[1],
                datalabels: {
                    display: true,
                    align: 'end',
                    anchor: 'end',
                    rotation: -90,
                    clamp: true,
                    clip: true,
                    color: '#17522f',
                    padding: 10,
                    formatter: function (value, context) {
                        return numeral(value).format('0,0.00');
                    },
                    font: {
                        weight: 'bold',
                    }
                }
            },{
                type: 'bar',
                label: 'Total Mensal',
                yAxisID: 'y-axis-1',
                backgroundColor: '#7579ef',
                borderColor: '#171951',
                borderWidth: 2,
                data: chartData[0],
                datalabels: {
                    display: true,
                    clamp: true,
                    anchor: 'start',
                    align: 'end',
                    offset: 10,
                    rotation: -90,
                    color: '#171951',
                    formatter: function (value, context) {
                        return numeral(value).format('0,0');
                    },
                    font: {
                        weight: 'bold',
                    }
                }
            }]
};

var chart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: dataSet,
  options: {
    title: {
      display: false
    },
    tooltips: {
      mode: 'label',
      callbacks: {
        label: function(tooltipItem, data) {
          var value = parseFloat(tooltipItem.value);
          var formatedValue;
          if(tooltipItem.datasetIndex > 0){
            formatedValue = numeral(value).format('$ 0,0.00');
          }else{
            formatedValue = numeral(value).format('$ 0,0.00');
          }
          return ' ' + formatedValue;
        },
      }
    },
    responsive: true,
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true,
        position: 'left',
        type: 'linear',
        scaleLabel: {
          display: true,
        },
        id: 'y-axis-1',
        ticks: {
          beginAtZero:true,
          callback: function (tick, index, ticks) {
            return numeral(tick).format('(0,0)');
          },
        }
      }, {
        stacked: false,
        position: 'right',
        type: 'linear',
        id: 'y-axis-0',
        ticks: {
          max: 10,
          stepSize: 1,
          display: true,
          beginAtZero: true,
          fontSize: 13,
          padding: 10,
          callback: function (tick, index, ticks) {
            return numeral(tick).format('$ 0,0');
          }
        }
      }]
    }
  }
});

0👍

In Chart.js 3, the syntax is slightly different. The axes are identified by their scaleId:

Namespace: options.scales[scaleId]

datasets: [
  {
    type: 'line',
    yAxisID: 'y1',
  },
  {
    type: 'line',
    yAxisID: 'y2',
  }
]
scales: {
    x: {
      stacked: false,
    y1: {
      position: 'left',
      stacked: false,
    },
    y2: {
      position: 'right',
      stacked: false,
    },
}

See the Charts.js axes documentation for more.

Leave a comment