How to align multiple axis with distinct scale and tickformat?

I plot y axis with value in percentage and on y2 axis the values in decimal

image

const signal = {
      x,
      y,
      name: 'Sinal',
      type: 'scatter',
      yaxis: 'y2',
      line: {
        width: 1.5,
        shape: 'hvh'
      },
      hovertemplate: '%{y}'
    }
const distortion = {
      x,
      y,
      name: 'Distortion',
      fill: 'tozeroy',
      line: {
        width: 0
      },
      hovertemplate: '%{y:.2%}'
    }
const layout = {
          legend: {
            orientation: 'h',
            y: -0.2,
            x: 0.5,
            xanchor: 'center',
            yanchor: 'top'
          },
          xaxis: {
            title: 'Date',
            hoverformat: '<b>%d/%m/%Y</b>'
          },
          yaxis: {
            title: 'Distortion',
            tickformat: '%'
          },
          yaxis2: {
            title: 'Signal',
            overlaying: 'y',
            side: 'right',
            tickformat: ',d'
          },
          hovermode: 'x unified',
          margin: {
            l: 60,
            r: 60,
            b: 50,
            t: 30
          }
        }