Nova Energía
NOVA en la Bolsa de Madrid48,32 €+2,41 %
48,32 €+2,41 %
Eine Kurskarte, deren Linie sich zeichnet, mit Zeitraum-Tabs und einem Fadenkreuz, das dem Zeiger folgt.
<article class="uv-kst"><header><span class="lg">NV</span><div><h3>Nova Energie</h3><span class="tk">NOVA an der Börse Madrid</span></div></header><p class="pr"><b>48,32 €</b><span class="ch">+2,41 %</span></p><div class="gr"><svg viewBox="0 0 100 40" preserveAspectRatio="none" aria-hidden="true"><defs><linearGradient id="uv-kst-g" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="currentColor" stop-opacity=".28"/><stop offset="1" stop-color="currentColor" stop-opacity="0"/></linearGradient></defs><polygon class="ar" points="0,40 0.0,36.0 3.7,31.9 7.4,33.2 11.1,35.2 14.8,32.7 18.5,31.9 22.2,32.9 25.9,30.2 29.6,27.5 33.3,26.6 37.0,24.5 40.7,22.8 44.4,19.6 48.1,21.3 51.9,21.9 55.6,19.6 59.3,17.4 63.0,20.7 66.7,18.6 70.4,18.4 74.1,14.2 77.8,11.1 81.5,13.8 85.2,13.2 88.9,9.1 92.6,6.9 96.3,5.2 100.0,4.0 100,40"/><polyline class="ln" pathLength="1" points="0.0,36.0 3.7,31.9 7.4,33.2 11.1,35.2 14.8,32.7 18.5,31.9 22.2,32.9 25.9,30.2 29.6,27.5 33.3,26.6 37.0,24.5 40.7,22.8 44.4,19.6 48.1,21.3 51.9,21.9 55.6,19.6 59.3,17.4 63.0,20.7 66.7,18.6 70.4,18.4 74.1,14.2 77.8,11.1 81.5,13.8 85.2,13.2 88.9,9.1 92.6,6.9 96.3,5.2 100.0,4.0"/><line class="cx" x1="0" x2="0" y1="0" y2="40"/></svg><span class="tp">48,32 €</span></div><div class="pe" role="radiogroup" aria-label="Zeitraum"><label><input type="radio" name="uv-kst" value="0" checked><span>1D</span></label><label><input type="radio" name="uv-kst" value="1"><span>1S</span></label><label><input type="radio" name="uv-kst" value="2"><span>1M</span></label></div></article>Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Finanz-Dashboards und Investment-Apps brauchen kompakte Karten, die Kurs, Veränderung und Trend auf einmal zeigen. Diese Karte zeichnet beim Laden ihre Linie mit weichem Verlauf darunter, wechselt per kleinen Tabs zwischen Tag, Woche und Monat und zeigt beim Überfahren ein gestricheltes Fadenkreuz mit dem Kurs an dieser Stelle.
Das Chart ist ein responsives SVG mit nicht skalierenden Linien und bleibt in jeder Breite scharf. Ersetze die Beispielreihen durch eigene Punkte und nutze Grün oder Rot je nach Veränderung.