Need help with plotly layout

plotly.js
1

Hello,

I need some help with my plotly layout.

Following points:

  • I don’t want to see any legends (I marked them on the screenshot)
  • I don’t need the zero-line. If I now use “fill-to-zero” the filling just goes to the zero line but it should go to the end of graph

Is there a way to change this?

plotly

        var trace1 = {
					x: xvals,
					y: yvals,
					mode: 'scatter',
					fillcolor: 'rgba(51, 122, 183, 0.3)'
				};
		var trace2 = {
					x: markerx,
					y: markery,
					mode: 'markers'
				};
		var dataplot = [trace1,trace2];
		var layout = {
					xaxis: {x0: '20', range: [-135, 20], gridcolor: 'grey', tickcolor: 'white', linecolor: 'white', color: 'white', type: 'linear', autorange: 'true'},
					yaxis: {range: [-135, 20], gridcolor: 'grey', tickcolor: 'white', linecolor: 'white', color: 'white'},
					margin: {l: 30, t: 20, b: 30, r: 10},
					showlegend: false,
					plot_bgcolor: '#3f3f3f',
					paper_bgcolor: '#3f3f3f'
				};
		Plotly.newPlot("plot_compressor", dataplot, layout);

trace1 is the blue graph, trace2 are the 3 orange dots.

Thanks in advance
Regards
Bernhard

2

See Configuration options in JavaScript

I’m not sure I understand what you’re trying to do. Sharing the data arrays referenced in your code snippet would help.

3

Hi Étienne,

thank you for your fast reply.

Attached the screenshot what makes my problem with the fill more clear. I need the fill till the end of the graph. Right now the filling ends at the 0 line but I need the fill till the end of the graph (in my case the graph ends at +20).

Regards
Bernhard

IMG_6994

    var trace1 = {
			x: xvals,
			y: yvals,
			mode: 'scatter',
			fillcolor: 'rgba(51, 122, 183, 0.5)',
			fill: 'tonextx',
			
		};
var trace2 = {
			x: markerx,
			y: markery,
			mode: 'markers'
		};
var trace3 = {
			x: VuIndB,
			y: VuOutdB,
			mode: 'markers'
		};
var trace4 = {
			x: x_back,
			y: y_back,
			mode: 'none',
			fill: 'tonextx',
			fillcolor: 'rgba(51, 122, 183, 0.3)'
		};
var dataplot = [trace1,trace2,trace3,trace4];
var layout = {
			xaxis: {zeroline: false, range: [-135, 20], gridcolor: 'grey', tickcolor: 'white', linecolor: 'white', color: 'white'},
			yaxis: {zeroline: false, range: [-135, 20], gridcolor: 'grey', tickcolor: 'white', linecolor: 'white', color: 'white'},
			margin: {l: 30, t: 20, b: 30, r: 10},
			showlegend: false,
			plot_bgcolor: '#3f3f3f',
			paper_bgcolor: '#3f3f3f'
		};
4

Attached a screenshot of how the filling should look like.
My data is ok, the graph is correct. All good but the filling needs to fill the area between x line and the graph line like shown on the pic attached to this post.

graph_filling

5

How can we be sure that your data is correct if you don’t provide it in your code snippet?

6

I simplified my example to show you the problem in a easier way.
I also attached the data of the graph now.

graph_filling_

Here you can see how plotly plots my data and does the filling. The dataplot is allright but the filling is wrong.

graph_filling__

The red area should have no filling and the green area should be filled.

In this example I just have one graph going from -135 to +21 and the whole graph should have a filling from -135 to +21 but the filling stops at 0.

My plotly config looks like that:

            var trace1 = {
				x: xvals,
				y: yvals,
				mode: 'scatter',
				fillcolor: 'rgba(51, 122, 183, 0.5)',
				fill: 'tonextx',
			};


	        var dataplot = [trace1];
	        var layout = {
				xaxis: {zeroline: false, range: [-135, 20], gridcolor: 'grey', tickcolor: 'white', linecolor: 'white', color: 'white'},
				yaxis: {zeroline: false, range: [-135, 20], gridcolor: 'grey', tickcolor: 'white', linecolor: 'white', color: 'white'},
				margin: {l: 30, t: 20, b: 30, r: 10},
				showlegend: false,
				plot_bgcolor: '#3f3f3f',
				paper_bgcolor: '#3f3f3f'
			};

            Plotly.newPlot("plot_compressor", dataplot, layout);

This is how my data looks like:

[x : y]

-135:-135
-134:-134
-133:-133
-132:-132
-131:-131
-130:-130
-129:-129
-128:-128
-127:-127
-126:-126
-125:-125
-124:-124
-123:-123
-122:-122
-121:-121
-120:-120
-119:-119
-118:-118
-117:-117
-116:-116
-115:-115
-114:-114
-113:-113
-112:-112
-111:-111
-110:-110
-109:-109
-108:-108
-107:-107
-106:-106
-105:-105
-104:-104
-103:-103
-102:-102
-101:-101
-100:-100
-99:-99
-98:-98
-97:-97
-96:-96
-95:-95
-94:-94
-93:-93
-92:-92
-91:-91
-90:-90
-89:-89
-88:-88
-87:-87
-86:-86
-85:-85
-84:-84
-83:-83
-82:-82
-81:-81
-80:-80
-79:-79
-78:-78
-77:-77
-76:-76
-75:-75
-74:-74
-73:-73
-72:-72
-71:-71
-70:-70
-69:-69
-68:-68
-67:-67
-66:-66
-65:-65
-64:-64
-63:-63
-62:-62
-61:-61
-60:-60
-59:-59
-58:-58
-57:-57
-56:-56
-55:-55
-54:-54
-53:-53
-52:-52
-51:-51
-50:-50
-49:-49
-48:-48
-47:-47
-46:-46
-45:-45
-44:-44
-43:-43
-42:-42
-41:-41
-40:-40
-39:-39
-38:-38
-37:-37
-36:-36
-35:-35
-34:-34
-33:-33
-32:-32
-31:-31
-30:-30
-29:-29
-28:-28
-27:-27
-26:-26
-25:-25
-24:-24
-23:-23
-22:-22
-21:-21
-20:-20
-19:-19
-18:-18
-17:-17
-16:-16
-15:-15
-14:-14
-13:-13
-12:-12
-11:-11
-10:-10
-9:-9
-8:-8
-7:-7
-6:-6
-5:-5
-4:-4
-3:-3
-2:-2
-1:-1
0:0
1:1
2:2
3:3
4:4
5:5
6:6
7:7
8:8
9:9
10:10
11:11
12:12
13:13
14:14
15:15
16:16
17:17
18:18
19:19
20:20
21:21

I hope it’s now more clear what I mean :wink:
Thanks for your support
Regards
Bernhard

7

Here’s a solution: https://codepen.io/etpinard/pen/zEwbEM?editors=0010

We don’t provide an easy way to fill to some level other than x=0 or y=0 at the moment. The desired behavior can be achieve using a dummy trace set to the level of choice (i.e your I believe this was y=-135).

I hope this helps.