Changing the way of data plotting

plotly.js
1

Hello,

I have the following issue: I need to plot a different chart which has 1 as its “zeroline”

Something like this:

image
image1869×291 12.1 KB

and this:
image

I tried transforming the texts of the values using tickmode array:

var trace = {
  x: [1, 2, 3, 4, 5, 6, 7],
  y: [-0.9, -0.6, -0.3, 0.3, 0.6, 0.9, 1],
  type: 'scatter'
};

var layout = {
  yaxis: {
    automargin: true,
    tickmode: 'array',
    ticktext: ['0.9', '0.6', '0.3', '1',  '-0.3', '-0.6', '-0.9'],
    tickvals: [0.3, 0.6, 0.9, 0, -0.9, -0.6, -0.3],
  }
};

Plotly.newPlot('myPlotlyDiv', [trace], layout);

but using this the plotted data is not faithful, as it undergoes the same transformations as ticks

As you can see, when x is 1, y should be -0.9, but it is transformed and presented like -0.3.

Here a codepen with the content of the first picture

Any idea?

I really appreciate any help you can provide.