Black Lives Matter. Please consider donating to Black Girls Code today.

Need help with plotly layout

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

See https://plot.ly/javascript/configuration-options/#hide-the-modebar

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

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'
		};

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

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

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

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.