Skip to content

Commit bbdbc8e

Browse files
tforkmanntforkmann
committed
Bumping version to 2.0.0
1 parent 7b6f4dd commit bbdbc8e

24 files changed

+1946
-29
lines changed

‎README.md‎

Lines changed: 107 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -27,46 +27,131 @@ femto install Feliz.ChartJS
2727
dotnet run
2828
```
2929

30-
## Example ChartJS
31-
Here is an example Line Chart:
30+
## Supported Chart Types
31+
32+
| Chart Type | Component | Description |
33+
|------------|-----------|-------------|
34+
| Line | `ChartJS.line` | Line charts for trends over time |
35+
| Bar | `ChartJS.bar` | Bar charts for categorical comparisons |
36+
| Pie | `ChartJS.pie` | Pie charts for proportional data |
37+
| Doughnut | `ChartJS.doughnut` | Doughnut charts (pie with hole) |
38+
| Radar | `ChartJS.radar` | Radar/spider charts for multivariate data |
39+
| PolarArea | `ChartJS.polarArea` | Polar area charts |
40+
| Scatter | `ChartJS.scatter` | Scatter plots for x/y data points |
41+
| Bubble | `ChartJS.bubble` | Bubble charts with x, y, and radius |
42+
43+
## Example Line Chart
3244
```fs
3345
ChartJS.line [
3446
line.options [
3547
option.responsive true
3648
option.plugins [
37-
plugin.dataLabels [
38-
dataLabels.display true
39-
dataLabels.align Position.Bottom
40-
dataLabels.borderRadius 3
41-
dataLabels.color "red"
42-
dataLabels.backgroundColor "green"
49+
plugin.legend [
50+
legend.position Position.Top
4351
]
4452
]
4553
]
4654
line.data [
47-
lineData.labels [| "Red"; "Blue"; "Yellow"; "Green"; "Purple"; "Orange" |]
55+
lineData.labels [| "Jan"; "Feb"; "Mar"; "Apr"; "May"; "Jun" |]
4856
lineData.datasets [|
4957
lineData.dataset [
50-
lineDataSet.label "My First Dataset"
58+
lineDataSet.label "Sales 2024"
5159
lineDataSet.borderColor "rgb(53, 162, 235)"
5260
lineDataSet.backgroundColor "rgba(53, 162, 235, 0.5)"
53-
lineDataSet.data [| "1"; "2"; "3"; "4"; "5"; "6" |]
61+
lineDataSet.tension 0.4
62+
lineDataSet.fill true
63+
lineDataSet.data [| 10; 20; 15; 25; 22; 30 |]
5464
]
55-
lineData.dataset [
56-
lineDataSet.label "My Second Dataset"
57-
lineDataSet.borderColor "yellow"
58-
lineDataSet.backgroundColor "rgba(53, 162, 235, 0.5)"
59-
lineDataSet.data [| "1"; "2"; "3"; "4"; "4"; "6" |]
65+
|]
66+
]
67+
]
68+
```
69+
70+
## Example Radar Chart
71+
```fs
72+
ChartJS.radar [
73+
radar.options [
74+
option.responsive true
75+
]
76+
radar.data [
77+
radarData.labels [| "Speed"; "Strength"; "Defense"; "Magic"; "Luck" |]
78+
radarData.datasets [|
79+
radarData.dataset [
80+
radarDataSet.label "Player Stats"
81+
radarDataSet.borderColor "rgb(255, 99, 132)"
82+
radarDataSet.backgroundColor "rgba(255, 99, 132, 0.2)"
83+
radarDataSet.pointBackgroundColor "rgb(255, 99, 132)"
84+
radarDataSet.data [| 80; 90; 70; 85; 65 |]
6085
]
6186
|]
6287
]
6388
]
6489
```
6590

66-
## Supported Chart Types
67-
- Line Chart (`ChartJS.line`)
68-
- Bar Chart (`ChartJS.bar`)
69-
- Doughnut Chart (`ChartJS.doughnut`)
70-
- Bubble Chart (`ChartJS.bubble`)
91+
## Example Pie Chart
92+
```fs
93+
ChartJS.pie [
94+
pie.options [
95+
option.responsive true
96+
]
97+
pie.data [
98+
pieData.labels [| "Red"; "Blue"; "Yellow" |]
99+
pieData.datasets [|
100+
pieData.dataset [
101+
pieDataSet.label "Votes"
102+
pieDataSet.backgroundColor [| "#FF6384"; "#36A2EB"; "#FFCE56" |]
103+
pieDataSet.data [| 12; 19; 3 |]
104+
]
105+
|]
106+
]
107+
]
108+
```
109+
110+
## Features
111+
112+
### Animation
113+
```fs
114+
option.animation [
115+
animation.duration 1000
116+
animation.easing Easing.EaseOutQuart
117+
animation.onComplete (fun _ -> printfn "Animation complete!")
118+
]
119+
```
120+
121+
### Interaction
122+
```fs
123+
option.interaction [
124+
interaction.mode InteractionMode.Nearest
125+
interaction.intersect false
126+
interaction.axis InteractionAxis.X
127+
]
128+
```
129+
130+
### Legend Events
131+
```fs
132+
plugin.legend [
133+
legend.position Position.Top
134+
legend.onClick (fun e item chart -> printfn "Clicked: %A" item)
135+
legend.onHover (fun e item -> printfn "Hovering: %A" item)
136+
]
137+
```
138+
139+
### Chart Methods
140+
```fs
141+
open Feliz.ChartJS
142+
143+
// Get chart reference
144+
let chartRef = React.useRef<Interop.ChartJS option>(None)
145+
146+
// Use chart methods
147+
match chartRef.current with
148+
| Some chart ->
149+
ChartMethods.update chart (Some "none") // Update without animation
150+
ChartMethods.reset chart // Reset to initial state
151+
let imageData = ChartMethods.toBase64ImagePng chart // Export as PNG
152+
| None -> ()
153+
```
154+
155+
## Documentation
71156

72-
You can find more examples [here](https://tforkmann.github.io/Feliz.ChartJS/)
157+
You can find more examples and documentation at [https://tforkmann.github.io/Feliz.ChartJS/](https://tforkmann.github.io/Feliz.ChartJS/)

‎RELEASE_NOTES.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
#### 2.0.0 - 2025-12-05
2+
* **BREAKING**: Major release with comprehensive Chart.js API coverage
3+
* **New Chart Types**: Added Pie, Radar, PolarArea, and Scatter charts
4+
* **Animation**: Full animation configuration (duration, easing, delay, loop, callbacks)
5+
* **Interaction**: Complete interaction options (mode, intersect, axis, includeInvisible)
6+
* **Elements**: Global element configuration (point, line, bar, arc)
7+
* **Line Chart**: Added fill, tension, pointRadius, pointStyle, pointHoverRadius, spanGaps, borderDash, and more
8+
* **Bar Chart**: Added stack, grouped, hoverBackgroundColor, hoverBorderColor, inflateAmount, pointStyle
9+
* **Doughnut Chart**: Added rotation, circumference, spacing, hover colors
10+
* **Legend**: Added onClick, onHover, onLeave event handlers, align, maxHeight, maxWidth, fullSize, reverse, rtl
11+
* **Chart Methods**: New ChartMethods module with update, destroy, reset, resize, toBase64Image, generateLegend, and more
12+
* **New Types**: Added PointStyle, BorderCapStyle, BorderJoinStyle, FillTarget, Easing, InteractionMode, InteractionAxis enums
13+
* **Scales**: Registered RadialLinearScale and Filler plugin for Radar/PolarArea charts
14+
* **Options**: Added indexAxis, devicePixelRatio, resizeDelay, onClick, onHover, onResize
15+
116
#### 1.1.2 - 2025-09-05
217
* Update packages
318
#### 1.1.1 - 2025-08-26

‎build/Feliz.ChartJS.1.1.2.nupkg‎

-64.7 KB
Binary file not shown.

‎src/Docs/Docs.fsproj‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
<PropertyGroup>
44
<TargetFramework>net9.0</TargetFramework>
55
</PropertyGroup>
6+
<ItemGroup>
7+
<ProjectReference Include="..\Feliz.ChartJS\Feliz.ChartJS.fsproj" />
8+
</ItemGroup>
69
<ItemGroup>
710
<Compile Include="Router.fs" />
811
<Compile Include="SharedView.fs" />
@@ -11,8 +14,12 @@
1114
<Compile Include="Pages\LineChart.fs" />
1215
<Compile Include="Pages\BarChart.fs" />
1316
<Compile Include="Pages\DoughnutChart.fs" />
14-
<Compile Include="Pages\MixedChart.fs" />
17+
<Compile Include="Pages\PieChart.fs" />
18+
<Compile Include="Pages\RadarChart.fs" />
19+
<Compile Include="Pages\PolarAreaChart.fs" />
20+
<Compile Include="Pages\ScatterChart.fs" />
1521
<Compile Include="Pages\BubbleChart.fs" />
22+
<Compile Include="Pages\MixedChart.fs" />
1623
<Compile Include="View.fs" />
1724
<Compile Include="App.fs" />
1825
<Content Include="index.html" />

‎src/Docs/Pages/PieChart.fs‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
module Docs.Pages.PieChart
2+
3+
open Feliz
4+
open Feliz.Bulma
5+
open Feliz.ChartJS
6+
open Docs.SharedView
7+
8+
[<ReactComponent>]
9+
let ChartJSPieChart () =
10+
ChartJS.pie [
11+
pie.options [
12+
option.responsive true
13+
option.plugins [
14+
plugin.legend [
15+
legend.position Position.Right
16+
]
17+
plugin.title [
18+
title.display true
19+
title.text "Pie Chart Example"
20+
]
21+
]
22+
]
23+
pie.data [
24+
pieData.labels [|
25+
"Red"
26+
"Blue"
27+
"Yellow"
28+
"Green"
29+
"Purple"
30+
|]
31+
pieData.datasets [|
32+
pieData.dataset [
33+
pieDataSet.label "Votes"
34+
pieDataSet.backgroundColor [|
35+
"rgba(255, 99, 132, 0.8)"
36+
"rgba(54, 162, 235, 0.8)"
37+
"rgba(255, 206, 86, 0.8)"
38+
"rgba(75, 192, 192, 0.8)"
39+
"rgba(153, 102, 255, 0.8)"
40+
|]
41+
pieDataSet.borderColor [|
42+
"rgba(255, 99, 132, 1)"
43+
"rgba(54, 162, 235, 1)"
44+
"rgba(255, 206, 86, 1)"
45+
"rgba(75, 192, 192, 1)"
46+
"rgba(153, 102, 255, 1)"
47+
|]
48+
pieDataSet.borderWidth 2
49+
pieDataSet.hoverOffset 10
50+
pieDataSet.data [| 12; 19; 3; 5; 2 |]
51+
]
52+
|]
53+
]
54+
]
55+
56+
let ChartJSChart =
57+
Html.div [
58+
prop.style [ style.height 500 ]
59+
prop.children [
60+
ChartJSPieChart()
61+
]
62+
]
63+
64+
65+
let code =
66+
"""
67+
ChartJS.pie [
68+
pie.options [
69+
option.responsive true
70+
option.plugins [
71+
plugin.legend [
72+
legend.position Position.Right
73+
]
74+
plugin.title [
75+
title.display true
76+
title.text "Pie Chart Example"
77+
]
78+
]
79+
]
80+
pie.data [
81+
pieData.labels [|
82+
"Red"
83+
"Blue"
84+
"Yellow"
85+
"Green"
86+
"Purple"
87+
|]
88+
pieData.datasets [|
89+
pieData.dataset [
90+
pieDataSet.label "Votes"
91+
pieDataSet.backgroundColor [|
92+
"rgba(255, 99, 132, 0.8)"
93+
"rgba(54, 162, 235, 0.8)"
94+
"rgba(255, 206, 86, 0.8)"
95+
"rgba(75, 192, 192, 0.8)"
96+
"rgba(153, 102, 255, 0.8)"
97+
|]
98+
pieDataSet.borderWidth 2
99+
pieDataSet.hoverOffset 10
100+
pieDataSet.data [| 12; 19; 3; 5; 2 |]
101+
]
102+
|]
103+
]
104+
]
105+
"""
106+
107+
let title = Html.text "Pie Chart"
108+
109+
[<ReactComponent>]
110+
let PieChartView () =
111+
Html.div [
112+
Bulma.content [
113+
codedView title code ChartJSChart
114+
]
115+
fixDocsView "PieChart" false
116+
]

0 commit comments

Comments
 (0)