How to align vertical axis area on two charts in chart.js

Question

in chart.js I'd like to have 2 charts (one under another) with ticks syncronized. Currently it looks so

as you can see dates are not aligned. Setting equal min-max values is impossible here since values are too different.

I think the solution would be to set equal width to both y-axes. The case is complicated by the second y-axes in upper chart, but may be it's possible to place an empty right scale on the bottom chart?

My current options for the top chart are

    options: {
      tooltips: {
          enabled: true,
          trigger: 'axis',
          intersect: false,
          mode : 'index'
      },        
      responsive: true,
      maintainAspectRatio: false,
      layout: {
        padding: {
          // left: 500,
          right: 0,
          top: 0,
          bottom: 0,
        },
      },
      scales: {
        xAxes: [
          {
            boundaryGap : false,
            gridLines: {
              display: false,
            },
            ticks: {
                // Include a dollar sign in the ticks
                callback: function(value, index, values) {
                    return  value.split('.').slice(0,2).join('.');
                }
            },          
          },
        ],
       yAxes: [
          {
            id: keys[0],
            position: "left",
            gridLines: {
              drawBorder: false,
              zeroLineColor: "rgba(147, 147, 147, 0.2)",
              color: "rgba(147, 147, 147, 0.2)",
            },
            ticks: {
              padding: 20,
              fontColor: "#2C71C3",
              beginAtZero: false,
            },
          },  {
            id: keys[1],
            position: "right",
            gridLines: {
              drawBorder: false,
              color: "rgba(147, 147, 147, 0)",
            },
            ticks: {
              padding: 20,
              fontColor: "#C6C6C6",
              beginAtZero: false,
            },
          },  
        ],
      },

and for the bottom one

    options: {
      tooltips: {
          enabled: true,
          trigger: 'axis',
          intersect: false,
          mode : 'index'
      },        
      responsive: true,
      maintainAspectRatio: false,
      layout: {
        padding: {
          // left: 500,
          right: 0,
          top: 0,
          bottom: 0,
        },
      },
      scales: {
        yAxes: [
          {
            ticks: {
                reverse: true,
            },          
          },        
        ], 
        xAxes: [
          {
            gridLines: {
              display: false,
            },
            ticks: {
                // Include a dollar sign in the ticks
                callback: function(value, index, values) {
                    return  value.split('.').slice(0,2).join('.');
                }
            },          
          },
        ],
      },

user_8682983 · Answer

I dont know how to or if it is even possible to define a width for a scale, but what you can do is add a second Y axis on the right with the grid dissabled and the callback returning a few spaces for spacing

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
          position: 'left'
        },
        {
          position: 'right',
          gridLines: {
            display: false
          },
          ticks: {
            callback: () => ('     ')
          }
        }
      ]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

How to align vertical axis area on two charts in chart.js

1 Answers