plotly / plotly/plotly.js

Feature Request: Add vertical spacing option between plot and rangeslider

Ouverte
#7,510 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

feature P3
Langage dominant
JavaScript
Étoiles
18.3k
Forks
2k
Merge moyen
2 j 12 h
PR mergées (30 j)
28

Description

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?

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par reproduire la mise en page à deux axes fournie avec xaxis.rangeslider et le comportement de chevauchement des libellés visible sur la capture d’écran. Déterminez où l’espacement entre le graphique et rangeslider est défini, puis définissez l’option d’espacement demandée et vérifiez que l’exemple sépare le graphique de rangeslider sans placer de libellés à l’intérieur de celui-ci.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript
Domaine
data-visualization
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.