Slope — Before / After Comparison Chart
Signature
sp.slope(title, labels, left, right, *, variant="basic", left_label="Before", right_label="After", palette=None, show_text=True, **kwargs) -> Chart
Description
sp.slope() renders the entire slope-chart family: two parallel value axes (left / right) with one connector per row. The variant keyword swaps the connector style without changing any other parameter. Slope charts excel at before/after comparisons, A/B test outcomes, ranking shifts, KPI changes between periods, and any pair-wise change across many entities.
Variants
Parameters
Returns
Chart — object with .html property and .show() method.
Tips
- Use
sort_order="asc"/"desc"to reorder rows byleftvalue before drawing. - The
"diverging"and"thick"variants encode magnitude visually — perfect for executive summaries. - For rank shifts (positions in a league), prefer
"bumps"rather than"basic". - Combine
palette=with"monochrome"to match brand colours per category.
Direction-coloured straight lines (green up, red down) with endpoint dots.
Uniform palette colour per row, no direction tint — ideal for categorical narratives.
Top 3 movers (largest |Δ|) drawn in vivid colour, the rest dimmed in grey.
Bump chart: y axis encodes the rank (1..n) at each side instead of the raw value.
Cubic-Bezier S-curves between the two endpoints — smoother visual flow.
Stroke-width proportional to |right - left| — magnitude becomes the visual weight.
Centered delta bars: positive bars grow right (green), negative grow left (red).
L-shape connector: horizontal then vertical then horizontal — rectilinear flow.
Signature
sp.slope(title, labels, left, right, *, variant="basic", left_label="Before", right_label="After", palette=None, show_text=True, **kwargs) -> Chart
Description
sp.slope() produit toute la famille des slope charts : deux axes de valeurs parallèles (gauche / droite) avec un connecteur par ligne. Le mot-clé variant permute le style du connecteur sans changer aucun autre paramètre. Idéal pour comparer avant/après, résultats A/B, changements de classement, KPI entre périodes, et toute évolution par paire sur de nombreuses entités.
Variantes
Paramètres
Retour
Chart — objet avec propriété .html et méthode .show().
Astuces
- Utilisez
sort_order="asc"/"desc"pour réordonner les lignes selonleftavant le rendu. - Les variantes
"diverging"et"thick"encodent visuellement la magnitude — parfaites pour un résumé exécutif. - Pour les changements de rang (positions dans un classement), préférez
"bumps"à"basic". - Combinez
palette=avec"monochrome"pour aligner les couleurs sur les catégories de marque.
Lignes droites colorées selon la direction (vert haut, rouge bas) avec points aux extrémités.
Couleur uniforme par ligne tirée de la palette, sans coloration directionnelle.
Top 3 des plus grands Δ mis en avant en couleur vive, le reste estompé en gris.
Bump chart : l’axe y encode le rang (1..n) à chaque côté plutôt que la valeur.
Courbes de Bézier cubiques en S entre les deux extrémités — transition douce.
Épaisseur du trait proportionnelle à |droite - gauche| — la magnitude devient le poids visuel.
Barres delta centrées : positives à droite (vert), négatives à gauche (rouge).
Connecteur en L : horizontal puis vertical puis horizontal — flux rectiligne.