Här är några exempel på React-diagrambibliotek med deras respektive funktioner och exempel:
1. Reager Chartjs 2
- Funktioner: Olika diagramtyper som linje, stapel, cirkel och mer.- Exempel:
- Vertikalt stapeldiagram
- Horisontellt stapeldiagram
- Staplade stapeldiagram
- Grupperat stapeldiagram
- Ytdiagram
- Linjediagram
- Fleraxligt linjediagram
- Cirkeldiagram
- Munkdiagram
- Polarområdesdiagram
- Radardiagram
- Spridningsdiagram
- Bubbeldiagram
- Flertypsdiagram
- Karthändelser
- Diagram Ref
- Gradientdiagram
2. Reagera Google Charts
- Funktioner: Olika diagramtyper som område, stapel, bubbla och mer.- Exempel:
- Ytdiagram
- Stapeldiagram
- Bubbeldiagram
- Kalender
- Ljusstakediagram
- Kolumndiagram
- Kombinationsdiagram
- Gantt
- Mätare
- Geokarta
- Histogram
- Linjediagram
- Organisationsdiagram
- Cirkeldiagram
- Sankey
- Spridningsdiagram
- Stegområdesdiagram
- Bord
- Tidslinje
- Trädkarta
- Ordträd
- Animationer
- Diagramredigerare
- Kontroller
- Interaktioner
- Layout
- Kalkylblad
- Verktygsfält
3. ApexCharts.js
- Funktioner: Olika diagramtyper som linje, kolumn, stapel, cirkel och mer.- Exempel: Innehåller källkod för alla exempel för att spara utvecklingstid.
4. CanvasJS
- Funktioner: Interaktiva, lyhörda diagram med animering, zoomning, panorering, händelser, export, drilldown och realtidsuppdateringar.- Exempel:
- Linjediagram
- Spline- och steglinjediagram
- Områdesdiagram
- Spline Area, Stacked Area, Stacked Area 100, Step Area, Range Area och Range Spline Area Diagram
- Kolumndiagram
- Stapeldiagram
- Staplad kolumn, staplad kolumn 100 %, intervallkolumn, staplad stapel, staplad stapel 100 %, intervallstapel och vattenfallsdiagram
- Cirkeldiagram
- Donut / Donut Charts
- Tratt- och pyramiddiagram
- Ljusstake och OHLC-diagram
- Spridnings- och bubbeldiagram
- Kartong för lådor och morrhår
- Fel- och fellinjediagram
- Dynamiska diagram
- Aktiediagram med intervallväljare, navigator och flera sjökort
5. TanStack/react-charts
- Funktioner: Olika diagramtyper som linje, stapel, bubbla och mer.- Exempel: Innehåller exempel för enkla, linje, streck, bubbla, område, anpassade stilar, anpassade verktygstips, axelalternativ, mörkt läge, gnistrande, borstning, grupperingslägen, verktygstipsalternativ och mer.
Dessa bibliotek ger omfattande exempel och mallar som hjälper dig att komma igång med att skapa diagram i din React-applikation. Du kan välja den som bäst passar dina behov baserat på de typer av diagram du vill skapa och den anpassningsnivå du behöver[1][2][3][4][5].
Citat:[1] https://react-chartjs-2.js.org/examples/
[2] https://www.react-google-charts.com/examples
[3] https://apexcharts.com/react-chart-demos/
[4] https://canvasjs.com/react-charts/
[5] https://codesandbox.io/examples/package/react-charts