Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

How to change baseline of yAxis from 0 to negative value

I am trying to use Area Charts of Plotly. My data contains only negative values on y-axis and positive values on x-axis. I observed that traces are drawn with 0 as baseline but in my case I want some non negative number for ex : -150 as baseline value. I tired yaxis: {autorange: ‘reversed’} but it will also plot trace with 0 as baseline but reverses the axis. I do not want reversing of axis, I want to Plot trace with some non-negative value as baseline. how can I do this ?
Please find below image of how I want my chart to plot.

Hello @Belli
I tried to create an executable example in codepen on top of the line-chart example on the official plotly.js site:

Here I use only negative values from -150 to -166. As you can see the baseline moves near to -150… so isn’t that the desired behaviour that you explained?:slight_smile:

HI @philschka
Not exactly. When using “fillcolor” and “fill” you can see what I am talking about, I am not able to achieve the desired plotting as seen in the image I embedded in my post.
Please find example with fill and fillcolor :

Ah ok, I understand. I think you could achieve this behaviour with setting the yaxis-range manually. In addition to your given jsFiddle example you must give Plotly a layout-object in that you set the yaxis with a range in that way:

var layout={
	yaxis: {range: [-180, -88]}
Plotly.newPlot('myDiv', data, layout);

If you don’t want to set this hard coded you can iterate before it over your data and determine max and min value:

//determine min und max y-value of data
var minValue = undefined;
var maxValue = undefined;

for(i=0; i<data.length; i++){
	var aTrace = data[i];
	for(j=0; j<aTrace.y.length; j++){
  	var aValue = aTrace.y[j];
    if(maxValue==null || aValue>maxValue){
    	maxValue = aValue;
    if(minValue==null || aValue<minValue){
    	minValue = aValue;
var layout={
	yaxis: {range: [minValue, maxValue]}

Here is your jsFiddle example with an update:
Hope it helps:-)


To avoid confusion I added an image :slight_smile:

If you see the above image, I want my chart to look like chart A not Chart B

Sorry, it seems that I fully misunderstand ur question:P
Unfortunately, I have no answer to your question:-( Maybe @etienne can help you.

Hi @Belli,
I’m also trying to do the same thing . did u find any solution ?