Sample for using d3 or other graphic js libraries with Lit?

[leolorenzoluis]

Last time I used Fable graphics was years ago, and it was using ts2fable. Are the concepts still the same when using a third party library or there's a new way to do it? I want to use d3/graphics js to say build an area chart or pie chart?

[alfonsogarciacaro]

Yes, principles should be the same. I think we had some D3 bindings but I cannot find them now besides this discussion :/ fable-compiler/Fable#1822

You can also use ts2fable to generate the bindings for the parts you need: https://fable.io/ts2fable/

[leolorenzoluis]

@alfonsogarciacaro How would I handle the dynamic view in Lit components? Do I create a D3 object manually and use Hook.useRef to feed it to d3?

[leolorenzoluis]

I tried to take a stab writing the D3 bindings but I ended up giving up on it. It's a behemoth framework and complicated to write bindings. I'm probably not strong in typing in F# yet. Should I just use dynamic stuff for stuff like this?

Like this example

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/3_TwoNumOrdered_comma.csv",

  // When reading the csv, I must format variables:
  function(d){
    return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
  },

  // Now I can use this dataset:
  function(data) {

    // Add X axis --> it is a date format
    var x = d3.scaleTime()
      .domain(d3.extent(data, function(d) { return d.date; }))
      .range([ 0, width ]);
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    // Add Y axis
    var y = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) { return +d.value; })])
      .range([ height, 0 ]);
    svg.append("g")
      .call(d3.axisLeft(y));

    // Add the area
    svg.append("path")
      .datum(data)
      .attr("fill", "#cce5df")
      .attr("stroke", "#69b3a2")
      .attr("stroke-width", 1.5)
      .attr("d", d3.area()
        .x(function(d) { return x(d.date) })
        .y0(y(0))
        .y1(function(d) { return y(d.value) })
        )

})

I'm able to get everything written and just run away with the compiler check by using obj. I get stuck for say creating a binding on .x(function (d) { return x(d.date) }).

[alfonsogarciacaro]

TBH, I don't use many bindings my self. In these cases, there are several alternatives.

1. If the JS library is small write a couple of bindings for the functions you'll use (not the case)
2. Use a separate JS file to do the bulk of interaction with the lib and send the results to F# using Fable interop
3. Use Fable's ? dynamic operator (I think this is not common)

open Fable.Core.JsInterop

    svg?append("path")
      ?datum(data)
      ?attr("fill", "#cce5df")
      ?attr("stroke", "#69b3a2")
      ?attr("stroke-width", 1.5)
      ?attr("d", d3.area()
        ?x(fun d -> x$(d?date))
        ?y0(y$(0))
        ?y1(fun d -> y$(d?value))
        )

4. If it's a single JS function and you don't want to use a separate file you can use emitJsStatement:

let renderSvg (data: MyData): unit =
    // The first argument is a tuple with the values you can reference from the template using $0, $1...
    // But if you're sure  there won't be name clashes within the method scope you can access `data` directly
    emitJsStatement () """
    svg.append("path")
      .datum(data)
      .attr("fill", "#cce5df")
      .attr("stroke", "#69b3a2")
      .attr("stroke-width", 1.5)
      .attr("d", d3.area()
        .x(function(d) { return x(d.date) })
        .y0(y(0))
        .y1(function(d) { return y(d.value) })
        )
    """

[leolorenzoluis]

Thanks for your patience Alfonso. I hope you don't mind I ask too many dumb questions. I'm now trying to integrate with https://www.chartjs.org/docs/latest/getting-started/integration.html

I've generated ts2fable and modified it a little bit to make the compiler happy.

<canvas id="myChart" {Lit.refCallback(fun (el: HTMLCanvasElement option) ->
            let borderColors = ResizeArray<ChartColor>()
            borderColors.Add(U4.Case1 "rgba(255,99,132,1)")
            borderColors.Add(U4.Case1 "rgba(54,162,235,1)")
            borderColors.Add(U4.Case1 "rgba(255,206,86,1)")
            let backgroundColors = ResizeArray<ChartColor>()
            backgroundColors.Add(U4.Case1 "rgba(255,99,132,0.2)")
            backgroundColors.Add(U4.Case1 "rgba(54,162,235,0.2)")
            backgroundColors.Add(U4.Case1 "rgba(255,206,86,0.2)")
            let labels = ResizeArray<string>()
            labels.AddRange(["Red"; "Blue"; "Yellow"])
            let data: Array<float> = [|12.;19.;3.;5.;2.;3.|]
            let datasets = ResizeArray<ChartDataSets>()
            datasets.Add({
                new ChartDataSets with
                    member this.label with get() = Some ("# of votes")
                    member this.borderWidth with get() = Some (U3.Case1 (U2.Case1 1.))
                    member this.backgroundColor with get() = Some (U3.Case2 backgroundColors)
                    member this.borderColor with get() = Some (U3.Case2 borderColors)
                    member this.data with get() = Some (U2.Case1 (unbox U2.Case1 (data))) })
            let data = Some { new ChartData with
                                member this.labels with get() = Some labels and set value = ()
                                member this.datasets with get() = Some datasets and set value = () }
            let options: ChartJS.Chart.ChartConfiguration = {
                new ChartJS.Chart.ChartConfiguration with
                    member this.``type`` with get() = Some (U2.Case1 ChartType.Bar) and set value = ()
                    member this.data with get() = data and set value = ()
                    member this.options with get() = {|scales = {|y = {|beginAtZero = true|}|}|} and set value = ()
                    member this.plugins with get() = None and set value = () 
            }
            ()
            match el with
            | Some value ->
                ChartJS.chart.Chart.register(barController)
                ChartJS.chart.Chart.register(bar)
                ChartJS.chart.Chart.register(linearScale)
                printfn "%A" (value.getContext_2d())
                
                ChartJS.chart.Chart.Create(U4.Case2 (value.getContext_2d()), options) |> ignore
            | None -> ()

They have an option to import all controllers with "registerables", but I'm not sure if I'm doing it right. This is what I've tried...

let [<Import("*","chart.js")>] chart: IExports = jsNative
let [<Import("registerables","chart.js")>] registerables: obj = jsNative
let [<Import("BarController","chart.js")>] barController: obj = jsNative
let [<Import("default","chart.js/auto")>] all: IExports = jsNative
let [<Import("BarElement","chart.js")>] bar: obj = jsNative
let [<Import("LinearScale","chart.js")>] linearScale: obj = jsNative

I'm trying to import their auto register and I tried different combinations whether it's member, module or default import. So far I only got luck with the import default. Reading off the documentation. It feels like it's against the way on the dynamic part https://fable.io/docs/communicate/js-from-fable.html where it says don't read dynamic typing (so I took it literally).

Do I still use the import attributes if I'm using/calling a third party library?

In your sample svg?("append") how do I declare svg to be dynamic in the first place?

[alfonsogarciacaro]

No worries @leolorenzoluis, happy to help :)

The original author of that post wrote "don't read this" as a joke to discourage the use of dynamic programming. But sometimes it's ok :) To enable the dynamic operators you just need to open the Fable.Core.JsInterop module. The main issue is ? cannot apply arguments directly, so in that case you can use the $ operator or open the Fable.Core.DynamicExtensions module which allows you to call Invoke on any object or apply dynamic indexing:

open Fable.Core.DynamicExtensions
let foo = obj()
let bar1 = foo.["b"]  // Same as foo.Item("b")
foo.["c"] <- 14
let bar2 = foo.Invoke(4, "a")

Can you share the bindings you've generated for chart.js? Checking their documentation, I assume something like this should work:

let [<Import("*","chart.js")>] chart: IExports = jsNative

chart.Chart.register(chart.registerables)

If you are adding chart.js with a script tag in your index.html, it will become available globally, so you can declare it as such:

open Browser
open Fable.Core.DynamicExtensions

let [<Global>] Chart: obj = jsNative

let myChart = Chart.Create(
    document.getElementById('myChart'),
    config
  );

BTW, in your code above you can use the !^ operator to avoid having to write U4.Case1 explicitly (also for U2, U3...).

open Fable.Core.JsInterop

backgroundColors.Add(!^"rgba(255,99,132,0.2)")
backgroundColors.Add(!^"rgba(54,162,235,0.2)")
backgroundColors.Add(!^"rgba(255,206,86,0.2)")

[leolorenzoluis]

Looking at the generated bindings and the typescript definition, I had to manually create the registrables as obj part of IExports. My guess is their type definition is missing more definitions?

What I want to translate from Fable is this following Javascript code:

import Chart from 'chart.js/auto';

It looks like their types are based off string, so it's still not working but I manage to get around by doing the following:

let [<Import("registerables","chart.js")>] registerables: obj = jsNative
let [<Import("BarController","chart.js")>] barController: obj = jsNative
let [<Import("LineController","chart.js")>] lineController: obj = jsNative
let [<Import("PointElement","chart.js")>] pointController: obj = jsNative

I see the register method as a type of Plugin.

interface PluginServiceGlobalRegistration {
      id?: string | undefined;
}

type Plugin = Chart.PluginServiceGlobalRegistration & Chart.PluginServiceRegistrationOptions;
interface PluginDescriptor {
    plugin: Plugin;
    options: Chart.ChartPluginsOptions;
}


declare class PluginServiceStatic {
    register(plugin: Plugin): void;
    unregister(plugin: Plugin): void;
    clear(): void;
    count(): number;
    getAll(): Plugin[];
    notify(chart: Chart, hook: keyof Chart.PluginServiceRegistrationOptions, args: any): boolean;
    descriptors(chart: Chart): PluginDescriptor[];
}

The generated bindings is only this

type [<AllowNullLiteral>] Plugin =
    interface end

Here is the full binding:

// ts2fable 0.8.0
module rec moduleName

#nowarn "3390" // disable warnings for invalid XML comments

open System
open Fable.Core
open Fable.Core.JS
open Browser.Types

[<Erase>] type KeyOf<'T> = Key of string
type Array<'T> = System.Collections.Generic.IList<'T>
type ArrayLike<'T> = System.Collections.Generic.IList<'T>

type Moment = Moment.Moment
let [<ImportAll("module")>] chart: Chart.IExports = jsNative

type [<AllowNullLiteral>] IExports =
    abstract Chart: ChartStatic
    abstract PluginService: PluginServiceStaticStatic

type [<AllowNullLiteral>] Chart =
    abstract config: Chart.ChartConfiguration with get, set
    abstract data: Chart.ChartData with get, set
    abstract destroy: (unit -> ChartDestroy) with get, set
    abstract update: ((Chart.ChartUpdateProps) option -> ChartDestroy) with get, set
    abstract render: ((Chart.ChartRenderProps) option -> ChartDestroy) with get, set
    abstract stop: (unit -> Chart) with get, set
    abstract resize: (unit -> Chart) with get, set
    abstract clear: (unit -> Chart) with get, set
    abstract toBase64Image: (unit -> string) with get, set
    abstract generateLegend: (unit -> ChartDestroy) with get, set
    abstract getElementAtEvent: (obj option -> ChartDestroy) with get, set
    abstract getElementsAtEvent: (obj option -> Array<ChartDestroy>) with get, set
    abstract getElementsAtXAxis: (obj option -> Array<ChartDestroy>) with get, set
    abstract getDatasetAtEvent: (obj option -> Array<ChartDestroy>) with get, set
    abstract getDatasetMeta: (float -> Meta) with get, set
    abstract getVisibleDatasetCount: (unit -> float) with get, set
    abstract isDatasetVisible: (float -> bool) with get, set
    abstract setDatasetVisibility: (float -> bool -> unit) with get, set
    abstract ctx: CanvasRenderingContext2D option with get, set
    abstract canvas: HTMLCanvasElement option with get, set
    abstract width: float option with get, set
    abstract height: float option with get, set
    abstract aspectRatio: float option with get, set
    abstract options: Chart.ChartOptions with get, set
    abstract chartArea: Chart.ChartArea with get, set

type [<AllowNullLiteral>] ChartStatic =
    abstract Chart: obj
    [<EmitConstructor>] abstract Create: context: U4<string, CanvasRenderingContext2D, HTMLCanvasElement, ArrayLike<U2<CanvasRenderingContext2D, HTMLCanvasElement>>> * options: Chart.ChartConfiguration -> Chart
    abstract pluginService: PluginServiceStatic with get, set
    abstract plugins: PluginServiceStatic with get, set
    abstract defaults: ChartStaticDefaults with get, set
    abstract controllers: ChartStaticControllers with get, set
    abstract helpers: ChartStaticControllers with get, set
    abstract platform: {| disableCSSInjection: bool |} with get, set
    abstract scaleService: {| updateScaleDefaults: Chart.ScaleType -> Chart.ChartScales -> unit |} with get, set
    abstract Tooltip: Chart.ChartTooltipsStaticConfiguration with get, set
    abstract instances: ChartStaticInstances

type [<AllowNullLiteral>] Plugin =
    interface end

type [<AllowNullLiteral>] PluginDescriptor =
    abstract plugin: Plugin with get, set
    abstract options: Chart.ChartPluginsOptions with get, set

type [<AllowNullLiteral>] PluginServiceStatic =
    abstract register: plugin: Plugin -> unit
    abstract unregister: plugin: Plugin -> unit
    abstract clear: unit -> unit
    abstract count: unit -> float
    abstract getAll: unit -> ResizeArray<Plugin>
    abstract notify: chart: Chart * hook: KeyOf<Chart.PluginServiceRegistrationOptions> * args: obj option -> bool
    abstract descriptors: chart: Chart -> ResizeArray<PluginDescriptor>

type [<AllowNullLiteral>] PluginServiceStaticStatic =
    [<EmitConstructor>] abstract Create: unit -> PluginServiceStatic

type [<AllowNullLiteral>] Meta =
    abstract ``type``: Chart.ChartType with get, set
    abstract data: ResizeArray<MetaData> with get, set
    abstract dataset: Chart.ChartDataSets option with get, set
    abstract controller: ChartStaticControllers with get, set
    abstract hidden: bool option with get, set
    abstract total: string option with get, set
    abstract xAxisID: string option with get, set
    abstract yAxisID: string option with get, set
    abstract ``$filler``: ChartStaticControllers option with get, set

type [<AllowNullLiteral>] MetaData =
    abstract _chart: Chart with get, set
    abstract _datasetIndex: float with get, set
    abstract _index: float with get, set
    abstract _model: Model with get, set
    abstract _start: obj option with get, set
    abstract _view: Model with get, set
    abstract _xScale: Chart.ChartScales with get, set
    abstract _yScale: Chart.ChartScales with get, set
    abstract hidden: bool option with get, set

type [<AllowNullLiteral>] Model =
    abstract backgroundColor: string with get, set
    abstract borderAlign: Chart.BorderAlignment option with get, set
    abstract borderColor: string with get, set
    abstract borderWidth: float option with get, set
    abstract circumference: float option with get, set
    abstract controlPointNextX: float with get, set
    abstract controlPointNextY: float with get, set
    abstract controlPointPreviousX: float with get, set
    abstract controlPointPreviousY: float with get, set
    abstract endAngle: float option with get, set
    abstract hitRadius: float with get, set
    abstract innerRadius: float option with get, set
    abstract outerRadius: float option with get, set
    abstract pointStyle: string with get, set
    abstract radius: string with get, set
    abstract skip: bool option with get, set
    abstract startAngle: float option with get, set
    abstract steppedLine: obj option with get, set
    abstract tension: float with get, set
    abstract x: float with get, set
    abstract y: float with get, set
    abstract ``base``: float with get, set
    abstract head: float with get, set

module Chart =

    type [<StringEnum>] [<RequireQualifiedAccess>] ChartType =
        | Line
        | Bar
        | HorizontalBar
        | Radar
        | Doughnut
        | PolarArea
        | Bubble
        | Pie
        | Scatter

    type [<StringEnum>] [<RequireQualifiedAccess>] TimeUnit =
        | Millisecond
        | Second
        | Minute
        | Hour
        | Day
        | Week
        | Month
        | Quarter
        | Year

    type [<StringEnum>] [<RequireQualifiedAccess>] ScaleType =
        | Category
        | Linear
        | Logarithmic
        | Time
        | RadialLinear

    type [<StringEnum>] [<RequireQualifiedAccess>] PointStyle =
        | Circle
        | Cross
        | CrossRot
        | Dash
        | Line
        | Rect
        | RectRounded
        | RectRot
        | Star
        | Triangle

    type [<StringEnum>] [<RequireQualifiedAccess>] PositionType =
        | Left
        | Right
        | Top
        | Bottom
        | ChartArea

    type [<AllowNullLiteral>] InteractionModeRegistry =
        abstract point: string with get, set
        abstract nearest: string with get, set
        abstract single: string with get, set
        abstract label: string with get, set
        abstract index: string with get, set
        abstract ``x-axis``: string with get, set
        abstract dataset: string with get, set
        abstract x: string with get, set
        abstract y: string with get, set

    type InteractionMode =
        obj

    type [<StringEnum>] [<RequireQualifiedAccess>] Easing =
        | Linear
        | EaseInQuad
        | EaseOutQuad
        | EaseInOutQuad
        | EaseInCubic
        | EaseOutCubic
        | EaseInOutCubic
        | EaseInQuart
        | EaseOutQuart
        | EaseInOutQuart
        | EaseInQuint
        | EaseOutQuint
        | EaseInOutQuint
        | EaseInSine
        | EaseOutSine
        | EaseInOutSine
        | EaseInExpo
        | EaseOutExpo
        | EaseInOutExpo
        | EaseInCirc
        | EaseOutCirc
        | EaseInOutCirc
        | EaseInElastic
        | EaseOutElastic
        | EaseInOutElastic
        | EaseInBack
        | EaseOutBack
        | EaseInOutBack
        | EaseInBounce
        | EaseOutBounce
        | EaseInOutBounce

    type [<StringEnum>] [<RequireQualifiedAccess>] TextAlignment =
        | Left
        | Center
        | Right

    type [<StringEnum>] [<RequireQualifiedAccess>] BorderAlignment =
        | Center
        | Inner

    type BorderWidth =
        U2<float, obj>

    type [<AllowNullLiteral>] ChartArea =
        abstract top: float with get, set
        abstract right: float with get, set
        abstract bottom: float with get, set
        abstract left: float with get, set

    type [<AllowNullLiteral>] ChartLegendItem =
        abstract text: string option with get, set
        abstract fillStyle: string option with get, set
        abstract hidden: bool option with get, set
        abstract index: float option with get, set
        abstract lineCap: ChartLegendItemLineCap option with get, set
        abstract lineDash: ResizeArray<float> option with get, set
        abstract lineDashOffset: float option with get, set
        abstract lineJoin: ChartLegendItemLineJoin option with get, set
        abstract lineWidth: float option with get, set
        abstract strokeStyle: string option with get, set
        abstract pointStyle: PointStyle option with get, set

    type [<AllowNullLiteral>] ChartLegendLabelItem =
        inherit ChartLegendItem
        abstract datasetIndex: float option with get, set

    type [<AllowNullLiteral>] ChartTooltipItem =
        abstract label: string option with get, set
        abstract value: string option with get, set
        abstract xLabel: U2<string, float> option with get, set
        abstract yLabel: U2<string, float> option with get, set
        abstract datasetIndex: float option with get, set
        abstract index: float option with get, set
        abstract x: float option with get, set
        abstract y: float option with get, set

    type [<AllowNullLiteral>] ChartTooltipLabelColor =
        abstract borderColor: ChartColor with get, set
        abstract backgroundColor: ChartColor with get, set

    type [<AllowNullLiteral>] ChartTooltipCallback =
        abstract beforeTitle: item: ResizeArray<ChartTooltipItem> * data: ChartData -> U2<string, ResizeArray<string>>
        abstract title: item: ResizeArray<ChartTooltipItem> * data: ChartData -> U2<string, ResizeArray<string>>
        abstract afterTitle: item: ResizeArray<ChartTooltipItem> * data: ChartData -> U2<string, ResizeArray<string>>
        abstract beforeBody: item: ResizeArray<ChartTooltipItem> * data: ChartData -> U2<string, ResizeArray<string>>
        abstract beforeLabel: tooltipItem: ChartTooltipItem * data: ChartData -> U2<string, ResizeArray<string>>
        abstract label: tooltipItem: ChartTooltipItem * data: ChartData -> U2<string, ResizeArray<string>>
        abstract labelColor: tooltipItem: ChartTooltipItem * chart: Chart -> ChartTooltipLabelColor
        abstract labelTextColor: tooltipItem: ChartTooltipItem * chart: Chart -> string
        abstract afterLabel: tooltipItem: ChartTooltipItem * data: ChartData -> U2<string, ResizeArray<string>>
        abstract afterBody: item: ResizeArray<ChartTooltipItem> * data: ChartData -> U2<string, ResizeArray<string>>
        abstract beforeFooter: item: ResizeArray<ChartTooltipItem> * data: ChartData -> U2<string, ResizeArray<string>>
        abstract footer: item: ResizeArray<ChartTooltipItem> * data: ChartData -> U2<string, ResizeArray<string>>
        abstract afterFooter: item: ResizeArray<ChartTooltipItem> * data: ChartData -> U2<string, ResizeArray<string>>

    type [<AllowNullLiteral>] ChartAnimationParameter =
        abstract chartInstance: obj option with get, set
        abstract animationObject: obj option with get, set

    type [<AllowNullLiteral>] ChartPoint =
        abstract x: U4<float, string, DateTime, Moment> option with get, set
        abstract y: U4<float, string, DateTime, Moment> option with get, set
        abstract r: float option with get, set
        abstract t: U4<float, string, DateTime, Moment> option with get, set

    type [<AllowNullLiteral>] ChartConfiguration =
        abstract ``type``: U2<ChartType, string> option with get, set
        abstract data: ChartData option with get, set
        abstract options: ChartOptions option with get, set
        abstract plugins: ResizeArray<PluginServiceRegistrationOptions> option with get, set

    type [<AllowNullLiteral>] ChartData =
        abstract labels: Array<U8<string, ResizeArray<string>, float, ResizeArray<float>, DateTime, ResizeArray<DateTime>, Moment, ResizeArray<Moment>>> option with get, set
        abstract datasets: ResizeArray<ChartDataSets> option with get, set

    type [<AllowNullLiteral>] RadialChartOptions =
        inherit ChartOptions
        abstract scale: RadialLinearScale option with get, set

    type [<AllowNullLiteral>] ChartSize =
        abstract height: float with get, set
        abstract width: float with get, set

    type [<AllowNullLiteral>] ChartOptions =
        abstract responsive: bool option with get, set
        abstract responsiveAnimationDuration: float option with get, set
        abstract aspectRatio: float option with get, set
        abstract maintainAspectRatio: bool option with get, set
        abstract events: ResizeArray<string> option with get, set
        abstract legendCallback: chart: Chart -> string
        abstract onHover: this: Chart * ``event``: MouseEvent * activeElements: Array<ChartOptionsOnHoverArray> -> obj option
        abstract onClick: ?``event``: MouseEvent * ?activeElements: Array<ChartOptionsOnHoverArray> -> obj option
        abstract onResize: this: Chart * newSize: ChartSize -> unit
        abstract title: ChartTitleOptions option with get, set
        abstract legend: ChartLegendOptions option with get, set
        abstract tooltips: ChartTooltipOptions option with get, set
        abstract hover: ChartHoverOptions option with get, set
        abstract animation: ChartAnimationOptions option with get, set
        abstract elements: ChartElementsOptions option with get, set
        abstract layout: ChartLayoutOptions option with get, set
        abstract scale: RadialLinearScale option with get, set
        abstract scales: U4<ChartScales, LinearScale, LogarithmicScale, TimeScale> option with get, set
        abstract showLines: bool option with get, set
        abstract spanGaps: bool option with get, set
        abstract cutoutPercentage: float option with get, set
        abstract circumference: float option with get, set
        abstract rotation: float option with get, set
        abstract devicePixelRatio: float option with get, set
        abstract plugins: ChartPluginsOptions option with get, set
        abstract defaultColor: ChartColor option with get, set

    type [<AllowNullLiteral>] ChartFontOptions =
        abstract defaultFontColor: ChartColor option with get, set
        abstract defaultFontFamily: string option with get, set
        abstract defaultFontSize: float option with get, set
        abstract defaultFontStyle: string option with get, set

    type [<AllowNullLiteral>] ChartTitleOptions =
        abstract display: bool option with get, set
        abstract position: PositionType option with get, set
        abstract fullWidth: bool option with get, set
        abstract fontSize: float option with get, set
        abstract fontFamily: string option with get, set
        abstract fontColor: ChartColor option with get, set
        abstract fontStyle: string option with get, set
        abstract padding: float option with get, set
        abstract lineHeight: U2<float, string> option with get, set
        abstract text: U2<string, ResizeArray<string>> option with get, set

    type [<AllowNullLiteral>] ChartLegendOptions =
        abstract align: ChartLegendOptionsAlign option with get, set
        abstract display: bool option with get, set
        abstract position: PositionType option with get, set
        abstract fullWidth: bool option with get, set
        abstract onClick: ``event``: MouseEvent * legendItem: ChartLegendLabelItem -> unit
        abstract onHover: ``event``: MouseEvent * legendItem: ChartLegendLabelItem -> unit
        abstract onLeave: ``event``: MouseEvent * legendItem: ChartLegendLabelItem -> unit
        abstract labels: ChartLegendLabelOptions option with get, set
        abstract reverse: bool option with get, set
        abstract rtl: bool option with get, set
        abstract textDirection: string option with get, set

    type [<AllowNullLiteral>] ChartLegendLabelOptions =
        abstract boxWidth: float option with get, set
        abstract fontSize: float option with get, set
        abstract fontStyle: string option with get, set
        abstract fontColor: ChartColor option with get, set
        abstract fontFamily: string option with get, set
        abstract padding: float option with get, set
        abstract generateLabels: chart: Chart -> ResizeArray<ChartLegendLabelItem>
        abstract filter: legendItem: ChartLegendLabelItem * data: ChartData -> obj option
        abstract usePointStyle: bool option with get, set

    type [<AllowNullLiteral>] ChartTooltipOptions =
        abstract axis: ChartTooltipOptionsAxis option with get, set
        abstract enabled: bool option with get, set
        abstract custom: (ChartTooltipModel -> unit) option with get, set
        abstract mode: InteractionMode option with get, set
        abstract intersect: bool option with get, set
        abstract backgroundColor: ChartColor option with get, set
        abstract titleAlign: TextAlignment option with get, set
        abstract titleFontFamily: string option with get, set
        abstract titleFontSize: float option with get, set
        abstract titleFontStyle: string option with get, set
        abstract titleFontColor: ChartColor option with get, set
        abstract titleSpacing: float option with get, set
        abstract titleMarginBottom: float option with get, set
        abstract bodyAlign: TextAlignment option with get, set
        abstract bodyFontFamily: string option with get, set
        abstract bodyFontSize: float option with get, set
        abstract bodyFontStyle: string option with get, set
        abstract bodyFontColor: ChartColor option with get, set
        abstract bodySpacing: float option with get, set
        abstract footerAlign: TextAlignment option with get, set
        abstract footerFontFamily: string option with get, set
        abstract footerFontSize: float option with get, set
        abstract footerFontStyle: string option with get, set
        abstract footerFontColor: ChartColor option with get, set
        abstract footerSpacing: float option with get, set
        abstract footerMarginTop: float option with get, set
        abstract xPadding: float option with get, set
        abstract yPadding: float option with get, set
        abstract caretSize: float option with get, set
        abstract cornerRadius: float option with get, set
        abstract multiKeyBackground: string option with get, set
        abstract callbacks: ChartTooltipCallback option with get, set
        abstract filter: item: ChartTooltipItem * data: ChartData -> bool
        abstract itemSort: itemA: ChartTooltipItem * itemB: ChartTooltipItem * ?data: ChartData -> float
        abstract position: string option with get, set
        abstract caretPadding: float option with get, set
        abstract displayColors: bool option with get, set
        abstract borderColor: ChartColor option with get, set
        abstract borderWidth: float option with get, set
        abstract rtl: bool option with get, set
        abstract textDirection: string option with get, set

    type [<AllowNullLiteral>] ChartTooltipModel =
        abstract afterBody: ResizeArray<string> with get, set
        abstract backgroundColor: string with get, set
        abstract beforeBody: ResizeArray<string> with get, set
        abstract body: ResizeArray<ChartTooltipModelBody> with get, set
        abstract bodyFontColor: string with get, set
        abstract bodyFontSize: float with get, set
        abstract bodySpacing: float with get, set
        abstract borderColor: string with get, set
        abstract borderWidth: float with get, set
        abstract caretPadding: float with get, set
        abstract caretSize: float with get, set
        abstract caretX: float with get, set
        abstract caretY: float with get, set
        abstract cornerRadius: float with get, set
        abstract dataPoints: ResizeArray<ChartTooltipItem> with get, set
        abstract displayColors: bool with get, set
        abstract footer: ResizeArray<string> with get, set
        abstract footerFontColor: string with get, set
        abstract footerFontSize: float with get, set
        abstract footerMarginTop: float with get, set
        abstract footerSpacing: float with get, set
        abstract height: float with get, set
        abstract labelColors: ResizeArray<ChartTooltipLabelColor> with get, set
        abstract labelTextColors: ResizeArray<string> with get, set
        abstract legendColorBackground: string with get, set
        abstract opacity: float with get, set
        abstract title: ResizeArray<string> with get, set
        abstract titleFontColor: string with get, set
        abstract titleFontSize: float with get, set
        abstract titleMarginBottom: float with get, set
        abstract titleSpacing: float with get, set
        abstract width: float with get, set
        abstract x: float with get, set
        abstract xAlign: string with get, set
        abstract xPadding: float with get, set
        abstract y: float with get, set
        abstract yAlign: string with get, set
        abstract yPadding: float with get, set
        abstract _bodyAlign: string with get, set
        abstract _bodyFontFamily: string with get, set
        abstract _bodyFontStyle: string with get, set
        abstract _footerAlign: string with get, set
        abstract _footerFontFamily: string with get, set
        abstract _footerFontStyle: string with get, set
        abstract _titleAlign: string with get, set
        abstract _titleFontFamily: string with get, set
        abstract _titleFontStyle: string with get, set

    type [<AllowNullLiteral>] ChartTooltipModelBody =
        abstract before: ResizeArray<string> with get, set
        abstract lines: ResizeArray<string> with get, set
        abstract after: ResizeArray<string> with get, set

    type [<AllowNullLiteral>] ChartPluginsOptions =
        [<EmitIndexer>] abstract Item: pluginId: string -> obj option with get, set

    type [<AllowNullLiteral>] ChartTooltipsStaticConfiguration =
        abstract positioners: ChartTooltipsStaticConfigurationPositioners with get, set

    type [<AllowNullLiteral>] ChartTooltipPositioner =
        [<Emit("$0($1...)")>] abstract Invoke: elements: ResizeArray<obj option> * eventPosition: Point -> Point

    type [<AllowNullLiteral>] ChartHoverOptions =
        abstract mode: InteractionMode option with get, set
        abstract animationDuration: float option with get, set
        abstract intersect: bool option with get, set
        abstract axis: ChartTooltipOptionsAxis option with get, set
        abstract onHover: this: Chart * ``event``: MouseEvent * activeElements: Array<ChartOptionsOnHoverArray> -> obj option

    type [<AllowNullLiteral>] ChartAnimationObject =
        abstract currentStep: float option with get, set
        abstract numSteps: float option with get, set
        abstract easing: Easing option with get, set
        abstract render: arg: obj option -> unit
        abstract onAnimationProgress: arg: obj option -> unit
        abstract onAnimationComplete: arg: obj option -> unit

    type [<AllowNullLiteral>] ChartAnimationOptions =
        abstract duration: float option with get, set
        abstract easing: Easing option with get, set
        abstract onProgress: chart: obj option -> unit
        abstract onComplete: chart: obj option -> unit
        abstract animateRotate: bool option with get, set
        abstract animateScale: bool option with get, set

    type [<AllowNullLiteral>] ChartElementsOptions =
        abstract point: ChartPointOptions option with get, set
        abstract line: ChartLineOptions option with get, set
        abstract arc: ChartArcOptions option with get, set
        abstract rectangle: ChartRectangleOptions option with get, set

    type [<AllowNullLiteral>] ChartArcOptions =
        abstract angle: U2<float, Scriptable<float>> option with get, set
        abstract backgroundColor: obj option with get, set
        abstract borderAlign: U2<BorderAlignment, Scriptable<BorderAlignment>> option with get, set
        abstract borderColor: U2<ChartColor, Scriptable<ChartColor>> option with get, set
        abstract borderWidth: U2<float, Scriptable<float>> option with get, set

    type [<StringEnum>] [<RequireQualifiedAccess>] CubicInterpolationMode =
        | Default
        | Monotone

    type FillMode =
        U2<bool, string>

    type [<AllowNullLiteral>] ChartLineOptions =
        abstract cubicInterpolationMode: U2<CubicInterpolationMode, Scriptable<CubicInterpolationMode>> option with get, set
        abstract tension: U2<float, Scriptable<float>> option with get, set
        abstract backgroundColor: obj option with get, set
        abstract borderWidth: U2<float, Scriptable<float>> option with get, set
        abstract borderColor: U2<ChartColor, Scriptable<ChartColor>> option with get, set
        abstract borderCapStyle: U2<string, Scriptable<string>> option with get, set
        abstract borderDash: U2<ResizeArray<float>, Scriptable<ResizeArray<float>>> option with get, set
        abstract borderDashOffset: U2<float, Scriptable<float>> option with get, set
        abstract borderJoinStyle: U2<string, Scriptable<string>> option with get, set
        abstract capBezierPoints: U2<bool, Scriptable<bool>> option with get, set
        abstract fill: U2<FillMode, Scriptable<FillMode>> option with get, set
        abstract stepped: U2<bool, Scriptable<bool>> option with get, set

    type [<AllowNullLiteral>] ChartPointOptions =
        abstract radius: U2<float, Scriptable<float>> option with get, set
        abstract pointStyle: U2<PointStyle, Scriptable<PointStyle>> option with get, set
        abstract rotation: U2<float, Scriptable<float>> option with get, set
        abstract backgroundColor: obj option with get, set
        abstract borderWidth: U2<float, Scriptable<float>> option with get, set
        abstract borderColor: U2<ChartColor, Scriptable<ChartColor>> option with get, set
        abstract hitRadius: U2<float, Scriptable<float>> option with get, set
        abstract hoverRadius: U2<float, Scriptable<float>> option with get, set
        abstract hoverBorderWidth: U2<float, Scriptable<float>> option with get, set

    type [<AllowNullLiteral>] ChartRectangleOptions =
        abstract backgroundColor: obj option with get, set
        abstract borderWidth: U2<float, Scriptable<float>> option with get, set
        abstract borderColor: U2<ChartColor, Scriptable<ChartColor>> option with get, set
        abstract borderSkipped: U2<string, Scriptable<string>> option with get, set

    type [<AllowNullLiteral>] ChartLayoutOptions =
        abstract padding: U2<ChartLayoutPaddingObject, float> option with get, set

    type [<AllowNullLiteral>] ChartLayoutPaddingObject =
        abstract top: float option with get, set
        abstract right: float option with get, set
        abstract bottom: float option with get, set
        abstract left: float option with get, set

    type [<AllowNullLiteral>] GridLineOptions =
        abstract display: bool option with get, set
        abstract circular: bool option with get, set
        abstract color: ChartColor option with get, set
        abstract borderDash: ResizeArray<float> option with get, set
        abstract borderDashOffset: float option with get, set
        abstract lineWidth: U2<float, ResizeArray<float>> option with get, set
        abstract drawBorder: bool option with get, set
        abstract drawOnChartArea: bool option with get, set
        abstract drawTicks: bool option with get, set
        abstract tickMarkLength: float option with get, set
        abstract zeroLineWidth: float option with get, set
        abstract zeroLineColor: ChartColor option with get, set
        abstract zeroLineBorderDash: ResizeArray<float> option with get, set
        abstract zeroLineBorderDashOffset: float option with get, set
        abstract offsetGridLines: bool option with get, set
        abstract z: float option with get, set

    type [<AllowNullLiteral>] ScaleTitleOptions =
        abstract display: bool option with get, set
        abstract labelString: string option with get, set
        abstract lineHeight: U2<float, string> option with get, set
        abstract fontColor: ChartColor option with get, set
        abstract fontFamily: string option with get, set
        abstract fontSize: float option with get, set
        abstract fontStyle: string option with get, set
        abstract padding: U2<ChartLayoutPaddingObject, float> option with get, set

    type [<AllowNullLiteral>] TickOptions =
        inherit NestedTickOptions
        abstract minor: NestedTickOptions option with get, set
        abstract major: MajorTickOptions option with get, set

    type [<AllowNullLiteral>] NestedTickOptions =
        abstract autoSkip: bool option with get, set
        abstract autoSkipPadding: float option with get, set
        abstract backdropColor: ChartColor option with get, set
        abstract backdropPaddingX: float option with get, set
        abstract backdropPaddingY: float option with get, set
        abstract beginAtZero: bool option with get, set
        /// If the callback returns null or undefined the associated grid line will be hidden.
        abstract callback: value: U2<float, string> * index: float * values: U2<ResizeArray<float>, ResizeArray<string>> -> U2<string, float> option
        abstract display: bool option with get, set
        abstract fontColor: ChartColor option with get, set
        abstract fontFamily: string option with get, set
        abstract fontSize: float option with get, set
        abstract fontStyle: string option with get, set
        abstract labelOffset: float option with get, set
        abstract lineHeight: float option with get, set
        abstract max: obj option with get, set
        abstract maxRotation: float option with get, set
        abstract maxTicksLimit: float option with get, set
        abstract min: obj option with get, set
        abstract minRotation: float option with get, set
        abstract mirror: bool option with get, set
        abstract padding: float option with get, set
        abstract precision: float option with get, set
        abstract reverse: bool option with get, set
        /// <summary>
        /// The number of ticks to examine when deciding how many labels will fit.
        /// Setting a smaller value will be faster, but may be less accurate
        /// when there is large variability in label length.
        /// Deault: <c>ticks.length</c>
        /// </summary>
        abstract sampleSize: float option with get, set
        abstract showLabelBackdrop: bool option with get, set
        abstract source: NestedTickOptionsSource option with get, set
        abstract stepSize: float option with get, set
        abstract suggestedMax: float option with get, set
        abstract suggestedMin: float option with get, set

    type [<AllowNullLiteral>] MajorTickOptions =
        inherit NestedTickOptions
        abstract enabled: bool option with get, set

    type [<AllowNullLiteral>] AngleLineOptions =
        abstract display: bool option with get, set
        abstract color: ChartColor option with get, set
        abstract lineWidth: float option with get, set
        abstract borderDash: ResizeArray<float> option with get, set
        abstract borderDashOffset: float option with get, set

    type [<AllowNullLiteral>] PointLabelOptions =
        abstract callback: arg: obj option -> obj option
        abstract fontColor: ChartColor option with get, set
        abstract fontFamily: string option with get, set
        abstract fontSize: float option with get, set
        abstract fontStyle: string option with get, set
        abstract lineHeight: U2<float, string> option with get, set

    type [<AllowNullLiteral>] LinearTickOptions =
        inherit TickOptions
        abstract maxTicksLimit: float option with get, set
        abstract stepSize: float option with get, set
        abstract precision: float option with get, set
        abstract suggestedMin: float option with get, set
        abstract suggestedMax: float option with get, set

    type [<AllowNullLiteral>] LogarithmicTickOptions =
        inherit TickOptions

    type ChartColor =
        U4<string, CanvasGradient, CanvasPattern, ResizeArray<string>>

    type [<AllowNullLiteral>] Scriptable<'T> =
        [<Emit("$0($1...)")>] abstract Invoke: ctx: {| chart: Chart option; dataIndex: float option; dataset: ChartDataSets option; datasetIndex: float option |} -> 'T

    type [<AllowNullLiteral>] ChartDataSets =
        abstract cubicInterpolationMode: U2<CubicInterpolationMode, Scriptable<CubicInterpolationMode>> option with get, set
        abstract backgroundColor: U3<ChartColor, ResizeArray<ChartColor>, Scriptable<ChartColor>> option with get, set
        abstract barPercentage: float option with get, set
        abstract barThickness: U2<float, string> option with get, set
        abstract borderAlign: U3<BorderAlignment, ResizeArray<BorderAlignment>, Scriptable<BorderAlignment>> option with get, set
        abstract borderWidth: U3<BorderWidth, ResizeArray<BorderWidth>, Scriptable<BorderWidth>> option with get, set
        abstract borderColor: U3<ChartColor, ResizeArray<ChartColor>, Scriptable<ChartColor>> option with get, set
        abstract borderCapStyle: ChartLegendItemLineCap option with get, set
        abstract borderDash: ResizeArray<float> option with get, set
        abstract borderDashOffset: float option with get, set
        abstract borderJoinStyle: ChartLegendItemLineJoin option with get, set
        abstract borderSkipped: U3<PositionType, ResizeArray<PositionType>, Scriptable<PositionType>> option with get, set
        abstract categoryPercentage: float option with get, set
        abstract data: U2<Array<U2<float, ResizeArray<float>> option>, ResizeArray<ChartPoint>> option with get, set
        abstract fill: U3<bool, float, string> option with get, set
        abstract hitRadius: U3<float, ResizeArray<float>, Scriptable<float>> option with get, set
        abstract hoverBackgroundColor: U3<ChartColor, ResizeArray<ChartColor>, Scriptable<ChartColor>> option with get, set
        abstract hoverBorderColor: U3<ChartColor, ResizeArray<ChartColor>, Scriptable<ChartColor>> option with get, set
        abstract hoverBorderWidth: U3<float, ResizeArray<float>, Scriptable<float>> option with get, set
        abstract hoverRadius: float option with get, set
        abstract label: string option with get, set
        abstract lineTension: float option with get, set
        abstract maxBarThickness: float option with get, set
        abstract minBarLength: float option with get, set
        abstract steppedLine: U2<bool, string> option with get, set
        abstract order: float option with get, set
        abstract pointBorderColor: U3<ChartColor, ResizeArray<ChartColor>, Scriptable<ChartColor>> option with get, set
        abstract pointBackgroundColor: U3<ChartColor, ResizeArray<ChartColor>, Scriptable<ChartColor>> option with get, set
        abstract pointBorderWidth: U3<float, ResizeArray<float>, Scriptable<float>> option with get, set
        abstract pointRadius: U3<float, ResizeArray<float>, Scriptable<float>> option with get, set
        abstract pointRotation: U3<float, ResizeArray<float>, Scriptable<float>> option with get, set
        abstract pointHoverRadius: U3<float, ResizeArray<float>, Scriptable<float>> option with get, set
        abstract pointHitRadius: U3<float, ResizeArray<float>, Scriptable<float>> option with get, set
        abstract pointHoverBackgroundColor: U3<ChartColor, ResizeArray<ChartColor>, Scriptable<ChartColor>> option with get, set
        abstract pointHoverBorderColor: U3<ChartColor, ResizeArray<ChartColor>, Scriptable<ChartColor>> option with get, set
        abstract pointHoverBorderWidth: U3<float, ResizeArray<float>, Scriptable<float>> option with get, set
        abstract pointStyle: U5<PointStyle, HTMLImageElement, HTMLCanvasElement, Array<U3<PointStyle, HTMLImageElement, HTMLCanvasElement>>, Scriptable<U3<PointStyle, HTMLImageElement, HTMLCanvasElement>>> option with get, set
        abstract radius: U3<float, ResizeArray<float>, Scriptable<float>> option with get, set
        abstract rotation: U3<float, ResizeArray<float>, Scriptable<float>> option with get, set
        abstract xAxisID: string option with get, set
        abstract yAxisID: string option with get, set
        abstract ``type``: U2<ChartType, string> option with get, set
        abstract hidden: bool option with get, set
        abstract hideInLegendAndTooltip: bool option with get, set
        abstract showLine: bool option with get, set
        abstract stack: string option with get, set
        abstract spanGaps: bool option with get, set
        abstract weight: float option with get, set

    type [<AllowNullLiteral>] ChartScales =
        abstract ``type``: U2<ScaleType, string> option with get, set
        abstract display: bool option with get, set
        abstract position: U2<PositionType, string> option with get, set
        abstract gridLines: GridLineOptions option with get, set
        abstract scaleLabel: ScaleTitleOptions option with get, set
        abstract ticks: TickOptions option with get, set
        abstract xAxes: ResizeArray<ChartXAxe> option with get, set
        abstract yAxes: ResizeArray<ChartYAxe> option with get, set

    type [<AllowNullLiteral>] CommonAxe =
        abstract bounds: string option with get, set
        abstract ``type``: U2<ScaleType, string> option with get, set
        abstract display: U2<bool, string> option with get, set
        abstract id: string option with get, set
        abstract labels: ResizeArray<string> option with get, set
        abstract stacked: bool option with get, set
        abstract position: string option with get, set
        abstract ticks: TickOptions option with get, set
        abstract gridLines: GridLineOptions option with get, set
        abstract scaleLabel: ScaleTitleOptions option with get, set
        abstract time: TimeScale option with get, set
        abstract adapters: DateAdapterOptions option with get, set
        abstract offset: bool option with get, set
        abstract beforeUpdate: ?scale: obj -> unit
        abstract beforeSetDimension: ?scale: obj -> unit
        abstract beforeDataLimits: ?scale: obj -> unit
        abstract beforeBuildTicks: ?scale: obj -> unit
        abstract beforeTickToLabelConversion: ?scale: obj -> unit
        abstract beforeCalculateTickRotation: ?scale: obj -> unit
        abstract beforeFit: ?scale: obj -> unit
        abstract afterUpdate: ?scale: obj -> unit
        abstract afterSetDimension: ?scale: obj -> unit
        abstract afterDataLimits: ?scale: obj -> unit
        abstract afterBuildTicks: scale: obj option * ticks: ResizeArray<float> -> ResizeArray<float>
        abstract afterTickToLabelConversion: ?scale: obj -> unit
        abstract afterCalculateTickRotation: ?scale: obj -> unit
        abstract afterFit: ?scale: obj -> unit

    type [<AllowNullLiteral>] ChartXAxe =
        inherit CommonAxe
        abstract distribution: ChartXAxeDistribution option with get, set

    type [<AllowNullLiteral>] ChartYAxe =
        inherit CommonAxe

    type [<AllowNullLiteral>] LinearScale =
        inherit ChartScales
        abstract ticks: LinearTickOptions option with get, set

    type [<AllowNullLiteral>] LogarithmicScale =
        inherit ChartScales
        abstract ticks: LogarithmicTickOptions option with get, set

    type [<AllowNullLiteral>] TimeDisplayFormat =
        abstract millisecond: string option with get, set
        abstract second: string option with get, set
        abstract minute: string option with get, set
        abstract hour: string option with get, set
        abstract day: string option with get, set
        abstract week: string option with get, set
        abstract month: string option with get, set
        abstract quarter: string option with get, set
        abstract year: string option with get, set

    type [<AllowNullLiteral>] DateAdapterOptions =
        abstract date: obj option with get, set

    type [<AllowNullLiteral>] TimeScale =
        inherit ChartScales
        abstract displayFormats: TimeDisplayFormat option with get, set
        abstract isoWeekday: bool option with get, set
        abstract max: string option with get, set
        abstract min: string option with get, set
        abstract parser: U2<string, (obj option -> obj option)> option with get, set
        abstract round: TimeUnit option with get, set
        abstract tooltipFormat: string option with get, set
        abstract unit: TimeUnit option with get, set
        abstract unitStepSize: float option with get, set
        abstract stepSize: float option with get, set
        abstract minUnit: TimeUnit option with get, set

    type [<AllowNullLiteral>] RadialLinearScale =
        abstract animate: bool option with get, set
        abstract position: PositionType option with get, set
        abstract angleLines: AngleLineOptions option with get, set
        abstract pointLabels: PointLabelOptions option with get, set
        abstract ticks: LinearTickOptions option with get, set
        abstract display: bool option with get, set
        abstract gridLines: GridLineOptions option with get, set

    type [<AllowNullLiteral>] Point =
        abstract x: float with get, set
        abstract y: float with get, set

    type [<AllowNullLiteral>] PluginServiceGlobalRegistration =
        abstract id: string option with get, set

    type [<AllowNullLiteral>] PluginServiceRegistrationOptions =
        abstract beforeInit: chartInstance: Chart * ?options: obj -> unit
        abstract afterInit: chartInstance: Chart * ?options: obj -> unit
        abstract beforeUpdate: chartInstance: Chart * ?options: obj -> unit
        abstract afterUpdate: chartInstance: Chart * ?options: obj -> unit
        abstract beforeLayout: chartInstance: Chart * ?options: obj -> unit
        abstract afterLayout: chartInstance: Chart * ?options: obj -> unit
        abstract beforeDatasetsUpdate: chartInstance: Chart * ?options: obj -> unit
        abstract afterDatasetsUpdate: chartInstance: Chart * ?options: obj -> unit
        abstract beforeDatasetUpdate: chartInstance: Chart * ?options: obj -> unit
        abstract afterDatasetUpdate: chartInstance: Chart * ?options: obj -> unit
        abstract beforeRender: chartInstance: Chart * ?options: obj -> unit
        abstract afterRender: chartInstance: Chart * ?options: obj -> unit
        abstract beforeDraw: chartInstance: Chart * easing: Easing * ?options: obj -> unit
        abstract afterDraw: chartInstance: Chart * easing: Easing * ?options: obj -> unit
        abstract beforeDatasetsDraw: chartInstance: Chart * easing: Easing * ?options: obj -> unit
        abstract afterDatasetsDraw: chartInstance: Chart * easing: Easing * ?options: obj -> unit
        abstract beforeDatasetDraw: chartInstance: Chart * easing: Easing * ?options: obj -> unit
        abstract afterDatasetDraw: chartInstance: Chart * easing: Easing * ?options: obj -> unit
        abstract beforeTooltipDraw: chartInstance: Chart * ?tooltipData: obj * ?options: obj -> unit
        abstract afterTooltipDraw: chartInstance: Chart * ?tooltipData: obj * ?options: obj -> unit
        abstract beforeEvent: chartInstance: Chart * ``event``: Event * ?options: obj -> unit
        abstract afterEvent: chartInstance: Chart * ``event``: Event * ?options: obj -> unit
        abstract resize: chartInstance: Chart * newChartSize: ChartSize * ?options: obj -> unit
        abstract destroy: chartInstance: Chart -> unit
        /// <summary>Deprecated since version 2.5.0. Use <c>afterLayout</c> instead.</summary>
        abstract afterScaleUpdate: chartInstance: Chart * ?options: obj -> unit

    type [<AllowNullLiteral>] ChartUpdateProps =
        abstract duration: float option with get, set
        abstract ``lazy``: bool option with get, set
        abstract easing: Easing option with get, set

    type [<AllowNullLiteral>] ChartRenderProps =
        abstract duration: float option with get, set
        abstract ``lazy``: bool option with get, set
        abstract easing: Easing option with get, set

    type [<AllowNullLiteral>] DoughnutModel =
        abstract backgroundColor: ChartColor with get, set
        abstract borderAlign: BorderAlignment with get, set
        abstract borderColor: string with get, set
        abstract borderWidth: float with get, set
        abstract circumference: float with get, set
        abstract endAngle: float with get, set
        abstract innerRadius: float with get, set
        abstract outerRadius: float with get, set
        abstract startAngle: float with get, set
        abstract x: float with get, set
        abstract y: float with get, set

    type [<StringEnum>] [<RequireQualifiedAccess>] ChartLegendItemLineCap =
        | Butt
        | Round
        | Square

    type [<StringEnum>] [<RequireQualifiedAccess>] ChartLegendItemLineJoin =
        | Bevel
        | Round
        | Miter

    type [<AllowNullLiteral>] ChartOptionsOnHoverArray =
        interface end

    type [<StringEnum>] [<RequireQualifiedAccess>] ChartLegendOptionsAlign =
        | Center
        | End
        | Start

    type [<StringEnum>] [<RequireQualifiedAccess>] ChartTooltipOptionsAxis =
        | X
        | Y
        | Xy

    type [<AllowNullLiteral>] ChartTooltipsStaticConfigurationPositioners =
        [<EmitIndexer>] abstract Item: mode: string -> ChartTooltipPositioner with get, set

    type [<StringEnum>] [<RequireQualifiedAccess>] NestedTickOptionsSource =
        | Auto
        | Data
        | Labels

    type [<StringEnum>] [<RequireQualifiedAccess>] ChartXAxeDistribution =
        | Linear
        | Series

type [<AllowNullLiteral>] ChartDestroy =
    interface end

type [<AllowNullLiteral>] ChartStaticDefaults =
    abstract ``global``: obj with get, set
    [<EmitIndexer>] abstract Item: key: string -> obj option with get, set

type [<AllowNullLiteral>] ChartStaticControllers =
    [<EmitIndexer>] abstract Item: key: string -> obj option with get, set

type [<AllowNullLiteral>] ChartStaticInstances =
    [<EmitIndexer>] abstract Item: key: string -> Chart with get, set

Also, with the ^! operator, it looks like I still have to explicitly cast it like this?

# Type bindings
type BorderWidth =
        U2<float, obj>

...

abstract borderWidth: U3<BorderWidth, ResizeArray<BorderWidth>, Scriptable<BorderWidth>> option with get, set
abstract borderColor: U3<ChartColor, ResizeArray<ChartColor>, Scriptable<ChartColor>> option with get, set

chartDataset.borderWidth <- Some (!^ (BorderWidth.Case1 (1.)))
//                chartDataset.backgroundColor <- Some (U3.Case2 backgroundColors)
chartDataset.borderColor <- Some (!^ (ChartColor.Case1 "#5CDD8B"))