plotly / plotly/plotly.js

Feature Request: Add vertical spacing option between plot and rangeslider

Offen
#7,510 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

feature P3
Vorherrschende Sprache
JavaScript
Sterne
18.3k
Forks
2k
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
28

Beschreibung

Hi Plotly team ,

I'm working with rangeslider in a dual-axis layout (xaxis + xaxis2, yaxis2), and I’d like to request a feature that allows more control over the vertical spacing between the plot area and the rangeslider.

In the current setup, the rangeslider always appears directly below the main plot and sometimes the labels are inside the rangeslider.

Screenshot of plotly figure

The definition of the layout is:

function staticLayout(): object {
  
  return {
    margin: {l: 70, r: 20, t: 10, b: 20},
    showlegend: true,
    legend: {
      orientation: 'h',
      x: 0,
      y: 1.02,
      yanchor: 'bottom',
    },
    xaxis: {
      domain: [0.0, 1.0],
      anchor: 'y',     
      side: 'bottom',    
      title: {
        text: 'Time (s)',
        standoff: 15
      },
      automargin: true,
      rangeslider: {
        visible: true,
        thickness: 0.07,
        bgcolor: "#f5f5f5",
        bordercolor: "black",
        borderwidth: 1,
      },
      showticklabels: false,
      showgrid: false,
      zeroline: false,
      fixedrange: true,
    },
    yaxis: {
      visible: false,
      showticklabels: false,
      showgrid: false,
      zeroline: false,
      showline: false,
      overlaying: 'y2',
    },
    xaxis2: {
      anchor: 'y2',      
      side: 'bottom',    
      // type: 'log',
      ticklabelposition: 'outside',
    },
    yaxis2: {
      anchor: 'x2',
      zeroline: false,
      showticklabels: true,
      ticklabelposition: 'outside',
    }
  };
}

How can I fix the spacing?

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, das bereitgestellte Layout mit zwei Achsen zusammen mit xaxis.rangeslider und dem im Screenshot gezeigten Verhalten der sich überlappenden Beschriftungen nachzubilden. Verfolge, wo der Abstand zwischen Plot und rangeslider festgelegt wird, definiere dann die angeforderte Abstandsoption und überprüfe, dass das Beispiel den Plot und den rangeslider voneinander trennt, ohne Beschriftungen darin zu platzieren.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript
Bereich
data-visualization
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.