Feliz Binding for ChartJS

Installation

Install the nuget package

dotnet paket add Feliz.ChartJS

and install the npm package

npm install --save react-chartjs-2 chart.js

or use Femto:

femto install Feliz.ChartJS

Start test app

• Start your test app by cloning this repository and then execute:

dotnet run

Example ChartJS

Here is an example ChartJS

ChartJS.line [
        line.options [
            option.responsive true
            option.plugins[plugin.datalabels [
                               datalabels.display true
                               datalabels.align Bottom
                               datalabels.borderRadius 3
                               datalabels.color "red"
                               datalabels.backgroundColor "green"
                               ]]
        ]
        line.data [
            lineData.labels [|
                "Red"
                "Blue"
                "Yellow"
                "Green"
                "Purple"
                "Orange"
            |]
            lineData.datasets [|
                lineData.dataset [
                    lineDataSet.label "My First Dataset"
                    lineDataSet.borderColor "rgb(53, 162, 235)"
                    lineDataSet.backgroundColor "rgba(53, 162, 235, 0.5)"
                    lineDataSet.data [|
                        "1"
                        "2"
                        "3"
                        "4"
                        "5"
                        "6"
                    |]
                ]
                lineData.dataset [
                    lineDataSet.label "My Second Dataset"
                    lineDataSet.borderColor "yellow"
                    lineDataSet.backgroundColor "rgba(53, 162, 235, 0.5)"
                    lineDataSet.data [|
                        "1"
                        "2"
                        "3"
                        "4"
                        "4"
                        "6"
                    |]
                ]
            |]
        ]
    ]

You can find more examples here