Back to start
Aioros.Pictor · Recharts in XAML

Recharts' charts, with no JavaScript of yours

Recharts 2.15.4's whole API in XAML: written by the server as SVG, interactive through CSS and the framework's script, live when the server pushes new data, and drawn natively on the desktop.
12
chart types, every Recharts export
96×
faster than Recharts' server render
2.15.4
Recharts version whose API it follows
How it is measured
Every Recharts example is rendered by Recharts and by Pictor and compared; the server timing writes the same examples on the lab's runner, Pictor's SVG against Recharts' renderToStaticMarkup, on the same four cores (docs/benchmarks.md in the Pictor repository, iteration 12).

Live, from this server

Every sample below is XAML rendered by the server you are reading, and the same XAML runs natively on the desktop.
Page BPage DPage EPage G

Page A

  • Pv : 2400
  • Uv : 4000

Page B

  • Pv : 1398
  • Uv : 3000

Page C

  • Pv : 9800
  • Uv : 2000

Page D

  • Pv : 3908
  • Uv : 2780

Page E

  • Pv : 4800
  • Uv : 1890

Page F

  • Pv : 3800
  • Uv : 2390

Page G

  • Pv : 4300
  • Uv : 3490
Page BPage CPage DPage EPage G

Page A

  • Pv : 2400
  • Uv : 4000

Page B

  • Pv : 1398
  • Uv : 3000

Page C

  • Pv : 9800
  • Uv : 2000

Page D

  • Pv : 3908
  • Uv : 2780

Page E

  • Pv : 4800
  • Uv : 1890

Page F

  • Pv : 3800
  • Uv : 2390

Page G

  • Pv : 4300
  • Uv : 3490
Line
Page BPage DPage EPage G

Page A

  • Uv : 4000
  • Pv : 2400

Page B

  • Uv : 3000
  • Pv : 1398

Page C

  • Uv : 2000
  • Pv : 9800

Page D

  • Uv : 2780
  • Pv : 3908

Page E

  • Uv : 1890
  • Pv : 4800

Page F

  • Uv : 2390
  • Pv : 3800

Page G

  • Uv : 3490
  • Pv : 4300
Page BPage CPage DPage EPage G

Page A

  • Uv : 4000
  • Pv : 2400

Page B

  • Uv : 3000
  • Pv : 1398

Page C

  • Uv : 2000
  • Pv : 9800

Page D

  • Uv : 2780
  • Pv : 3908

Page E

  • Uv : 1890
  • Pv : 4800

Page F

  • Uv : 2390
  • Pv : 3800

Page G

  • Uv : 3490
  • Pv : 4300
Area
Page APage CPage EPage G

Page A

  • Pv : 2400
  • Uv : 4000

Page B

  • Pv : 1398
  • Uv : 3000

Page C

  • Pv : 9800
  • Uv : 2000

Page D

  • Pv : 3908
  • Uv : 2780

Page E

  • Pv : 4800
  • Uv : 1890

Page F

  • Pv : 3800
  • Uv : 2390

Page G

  • Pv : 4300
  • Uv : 3490
Page APage BPage CPage DPage EPage FPage G

Page A

  • Pv : 2400
  • Uv : 4000

Page B

  • Pv : 1398
  • Uv : 3000

Page C

  • Pv : 9800
  • Uv : 2000

Page D

  • Pv : 3908
  • Uv : 2780

Page E

  • Pv : 4800
  • Uv : 1890

Page F

  • Pv : 3800
  • Uv : 2390

Page G

  • Pv : 4300
  • Uv : 3490
Bar
Page BPage DPage EPage F

Page A

  • Amt : 1400
  • Pv : 800
  • Uv : 590

Page B

  • Amt : 1506
  • Pv : 967
  • Uv : 868

Page C

  • Amt : 989
  • Pv : 1098
  • Uv : 1397

Page D

  • Amt : 1228
  • Pv : 1200
  • Uv : 1480

Page E

  • Amt : 1100
  • Pv : 1108
  • Uv : 1520

Page F

  • Amt : 1700
  • Pv : 680
  • Uv : 1400
Page BPage CPage DPage EPage F

Page A

  • Amt : 1400
  • Pv : 800
  • Uv : 590

Page B

  • Amt : 1506
  • Pv : 967
  • Uv : 868

Page C

  • Amt : 989
  • Pv : 1098
  • Uv : 1397

Page D

  • Amt : 1228
  • Pv : 1200
  • Uv : 1480

Page E

  • Amt : 1100
  • Pv : 1108
  • Uv : 1520

Page F

  • Amt : 1700
  • Pv : 680
  • Uv : 1400
Composed
045901351800100200300400

  • X : 100
  • Y : 200

  • X : 120
  • Y : 100

  • X : 170
  • Y : 300

  • X : 140
  • Y : 250

  • X : 150
  • Y : 400

  • X : 110
  • Y : 280
045901351800100200300400

  • X : 100
  • Y : 200

  • X : 120
  • Y : 100

  • X : 170
  • Y : 300

  • X : 140
  • Y : 250

  • X : 150
  • Y : 400

  • X : 110
  • Y : 280
Scatter

  • Group A : 400

  • Group B : 300

  • Group C : 300

  • Group D : 200
Pie
MathChineseEnglishGeographyPhysicsHistory
Radar
Radial bar
ImpressionClickVisitConsultOrder

  • Impression : 100

  • Click : 80

  • Visit : 50

  • Consult : 40

  • Order : 26
ImpressionClickVisitConsultOrder

  • Impression : 100

  • Click : 80

  • Visit : 50

  • Consult : 40

  • Order : 26
Funnel
axisAxiscontrolsdataDataDataListNodeSpriterendereventslegendLegend
axisAxiscontrolsdataDataDataListrenderTreeeventsDataEventlegendLegendLegendRange
Treemap

  • Visit - Direct-Favourite : 3728.3

  • Visit - Page-Click : 354170

  • Page-Click - Detail-Favourite : 62429

  • Page-Click - Lost : 291741

  • Visit : 357898.3

  • Direct-Favourite : 3728.3

  • Page-Click : 354170

  • Detail-Favourite : 62429

  • Lost : 291741

  • Visit - Direct-Favourite : 3728.3

  • Visit - Page-Click : 354170

  • Page-Click - Detail-Favourite : 62429

  • Page-Click - Lost : 291741

  • Visit : 357898.3

  • Direct-Favourite : 3728.3

  • Page-Click : 354170

  • Detail-Favourite : 62429

  • Lost : 291741
Sankey
3010515555220101053220105520105555

  • Child1 : 30

  • third child : 10

  • another child : 5

  • next child : 15

  • third level child : 5

  • third level child : 5

  • third level child : 5

  • level 4 : 2

  • Child2 : 20

  • another child : 10

  • next child : 10

  • level 3 of child 2 : 5

  • level 3 of child 2 : 3

  • level 3 of child 2 : 2

  • Child3 : 20

  • Child4 : 10

  • child4 child : 5

  • child4 child : 5

  • Child5 : 20

  • child5 child : 10

  • level 3 child of child 5 : 5

  • level 3 child of child 5 : 5

  • child5 child : 5

  • child5 child : 5
Sunburst

The XAML

Pages/traffic/Page.axaml
<p:AreaChart Data="{Binding Visits}"> <p:CartesianGrid StrokeDashArray="3 3" /> <p:XAxis DataKey="Month" /> <p:YAxis /> <p:Tooltip /> <p:Area Type="Monotone" DataKey="Web" Fill="{DynamicResource PictorPalette1}" /> </p:AreaChart>