Composants

Graphiques

Courbes, aires, barres et anneaux dessinés en SVG, sans bibliothèque de graphiques.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

36 sur 83

Chargement de l’index de recherche complet.

Area chart lite

1525Area chart liteGraphiquesUn graphique en aires SVG réactif avec des graduations à axe rond, un remplissage dégradé, un réticule qui lit l'échantillon sous le pointeur et un volet de dessin.

Activity cell heatmap

1840Activity cell heatmapGraphiquesUne grille de calendrier composée de petits carrés teintés qui balaye une onde diagonale et permet à une bande de niveau d'isoler une intensité à la fois.

Edge Faded Plot Grid

1853Edge Faded Plot GridGraphiquesUne toile de fond d'intrigue composée de règles en pointillés qui s'estompent sur les bords, avec une ligne de base en surbrillance et une bande lumineuse qui les parcourt.

Fanning event markers

1856Fanning event markersGraphiquesBadges d'événement ronds épinglés au-dessus d'une parcelle avec des lignes directrices ; ceux regroupés s'empilent dans un badge compté que les fans ouvrent en survol.

Forecast tail line

1859Forecast tail lineGraphiquesUne suite en pointillés qui transporte une série au-delà de son dernier point réel jusqu'à un horizon, se dessinant et atterrissant sur un marqueur creux.

Gradient Area Chart

1860Gradient Area ChartGraphiquesDeux séries mensuelles empilées dessinées sous forme de zones lisses dont les remplissages s'estompent d'une teinte forte au bord supérieur jusqu'à presque clair à la ligne de base.

Notched arc gauge

1871Notched arc gaugeGraphiquesUn cadran de score construit à partir d'encoches effilées qui s'allument en séquence autour d'un arc ouvert, avec un numéro roulant en son centre.

Chart Plot Texture

1931Chart Plot TextureGraphiquesUn panneau de texture répétitive pour la zone de tracé d'un graphique, basculant entre des lignes diagonales, des points et des hachures croisées, s'estompe doucement sur chaque bord.

Flow Area Chart

1961Flow Area ChartGraphiquesUn graphique en aires de séries chronologiques avec un remplissage dégradé qui se dessine au chargement et affiche un réticule avec une info-bulle de valeur au survol.

Candle Price Chart

2086Candle Price ChartGraphiquesUn graphique en chandeliers OHLC avec des bougies colorées de haut en bas, une mèche par période et une info-bulle de survol indiquant l'ouverture, le haut, le bas et la clôture.

Chart reference band

2087Chart reference bandGraphiquesUne bande horizontale ombrée dessinée derrière un graphique linéaire pour marquer une plage cible ou une zone de seuil, avec des bords progressifs et une bordure pointillée facultative.

Concentric Ring Chart

2088Concentric Ring ChartGraphiquesAnneaux de progression imbriqués qui balayent selon leur propre pourcentage sur la monture et partagent un total central en direct, comme une jauge à cadrans multiples.

Flow Sankey Diagram

2089Flow Sankey DiagramGraphiquesUn organigramme node-and-ribbon dans lequel l'épaisseur du ruban montre le volume se déplaçant entre les étapes, dessinant avec une révélation tracée et mettant en évidence les chemins connectés au survol.

Glass Block Bars

2090Glass Block BarsGraphiquesUn graphique à barres rendu sous forme de blocs de verre 3D brillants avec des faces latérales et supérieures en perspective, et un lent balayage de lumière pulsant vers le haut de la barre la plus haute.

Grow bar chart

2091Grow bar chartGraphiquesUn graphique à barres dont les colonnes s'agrandissent à partir de la ligne de base lors du chargement, bascule entre la disposition verticale et horizontale et met en surbrillance une barre à la fois lors du survol.

Highlight trail chart

2092Highlight trail chartGraphiquesUn graphique de tendance multiligne dans lequel le survol éclaircit un court segment final d'une série tandis que le reste et les autres lignes s'assombrissent.

Animated Value Axis

2097Animated Value AxisGraphiquesColonne d'étiquettes de valeurs à côté d'un graphique qui abrége les grands nombres et glisse facilement vers de nouvelles positions chaque fois que la plage de données du graphique change.

Drill-Down Sunburst Chart

2098Drill-Down Sunburst ChartGraphiquesUn diagramme hiérarchique radial d'anneaux d'arc imbriqués qui effectue un zoom sur les enfants d'un segment lorsque vous cliquez dessus, avec un fil d'Ariane et une surbrillance en survol.

Gridline area chart

2099Gridline area chartGraphiquesUn graphique en aires encadré par une carte avec deux couches remplies qui se chevauchent, des graduations d'axe arrondies, un léger quadrillage et une ligne de pied de page annonçant la tendance.

Layered trend chart

2100Layered trend chartGraphiquesUn graphique combiné qui superpose une série de barres, une zone remplie et une ligne sur un axe temporel partagé, de sorte que le volume, le total cumulé et le taux puissent être lus ensemble.

Animated Time Axis

2104Animated Time AxisGraphiquesUne rangée d'étiquettes de date sous un graphique linéaire qui sélectionne automatiquement un sous-ensemble régulièrement espacé pour éviter l'encombrement et atténue les étiquettes à proximité du point survolé.

Highlighted bar chart

2273Highlighted bar chartGraphiquesUn graphique à barres de catégorie dans lequel une barre est appelée avec un contour en pointillés et un remplissage plus clair, et la légende suit la barre sur laquelle vous pointez.

Share Of Total Area Chart

2274Share Of Total Area ChartGraphiquesTrois séries mensuelles ont été redimensionnées de sorte que leurs valeurs totalisent toujours la hauteur totale de la parcelle, transformant les décomptes bruts en une bande d'actions qui s'ajoutent toujours à cent pour cent.

Horizontal bar chart

2277Horizontal bar chartGraphiquesUn graphique à barres basé sur des lignes avec des étiquettes de catégorie dans une gouttière gauche fixe et des barres arrondies qui s'étendent à partir d'un bord gauche partagé, mises à l'échelle par rapport à la valeur la plus élevée.

Inline labeled bar chart

2278Inline labeled bar chartGraphiquesUn graphique à barres horizontales avec le nom de la catégorie imprimé à l'intérieur de chaque barre et la valeur imprimée juste après sa pointe, donc aucune colonne d'axe n'est nécessaire.

Metric switch bar chart

2280Metric switch bar chartGraphiquesUn graphique à barres quotidien dense avec deux vignettes métriques dans l'en-tête ; cliquer sur une tuile transforme les barres en cette métrique.

Category dot line

2287Category dot lineGraphiquesUne seule courbe lisse répartie sur cinq catégories nommées où chaque marqueur de point est coloré à partir d'une rampe d'accentuation en teinte, de sorte que les marqueurs font également office de légende.

2290Glyph Marker LineGraphiquesUne ligne de tendance mensuelle dont les points de données sont des glyphes dessinés plutôt que des points simples, chacun étant découpé hors de la ligne de manière à ce que le trait semble passer derrière.

Named point line

2291Named point lineGraphiquesUne ligne répartie sur cinq catégories qui imprime le nom de chaque catégorie au-dessus de son point au lieu d'un nombre, laissant la valeur au survol.

Dotted Trend Line

2294Dotted Trend LineGraphiquesUne courbe lisse en série unique avec un marqueur rempli sur chaque point et un marqueur annelé qui s'aligne sur le point le plus proche du pointeur.

Chip legend pie

2316Chip legend pieGraphiquesUn diagramme circulaire solide sans étiquettes sur les tranches, associé à une rangée enveloppée de pastilles de couleur en dessous qui nomme chaque tranche et est mise en évidence de manière synchronisée au survol.

Concentric Ring Radar

2323Concentric Ring RadarGraphiquesUne carte polaire dont l'échelle est dessinée sous forme de véritables cercles concentriques au lieu de polygones imbriqués, de sorte que la forme tracée se lit sur un fond cible lisse.

Donut share chart

2336Donut share chartGraphiquesUn beignet à cinq tranches avec un centre creux et des espaces vides qui s'ouvrent sur le support et se soulèvent selon la tranche sur laquelle se trouve le pointeur.

Donut with total

2337Donut with totalGraphiquesUn graphique en anneau qui place le total cumulé dans son propre trou et permute cette lecture selon la tranche survolée ou focalisée.

Engraved label pie

2348Engraved label pieGraphiquesUn diagramme circulaire solide qui définit chaque nom de catégorie à l'intérieur de sa propre tranche dans une couleur inversée, de sorte que la répartition se lit sans aucune étiquette extérieure ni ligne de repère.

Leader line pie

2377Leader line pieGraphiquesUn diagramme circulaire solide dont les valeurs se trouvent à l'extérieur du cercle, chacune étant liée à sa tranche par une ligne de repère à deux segments.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Activity cell heatmap
Une grille de calendrier composée de petits carrés teintés qui balaye une onde diagonale et permet à une bande de niveau d'isoler une intensité à la fois.
Animated Time Axis
Une rangée d'étiquettes de date sous un graphique linéaire qui sélectionne automatiquement un sous-ensemble régulièrement espacé pour éviter l'encombrement et atténue les étiquettes à proximité du point survolé.
Animated Value Axis
Colonne d'étiquettes de valeurs à côté d'un graphique qui abrége les grands nombres et glisse facilement vers de nouvelles positions chaque fois que la plage de données du graphique change.

Conseils de design

Ouvrir l’index complet

Étiquettes

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)