indicatrix / elm-chartjs-webcomponent / Chartjs.Chart

A type-safe bridge to a Chartjs web component.

This library requires both Chart.js and the web component to function properly. Check the README.md for this package for more detailed instructions on setting up.


type alias Chart =
{ chartType : Type
, data : Chartjs.Data.Data
, options : Chartjs.Options.Options 
}

Main type helper for a Chartjs chart

Both a Data and an Options object must be specified to help configure this chart.


type Type
    = Bar
    | HorizontalBar
    | Line
    | Scatter
    | Doughnut
    | Pie
    | Polar
    | Radar

Basic type for a Chart

For charts containing multiple datasets, both a chart type needs to specified and a type for each dataset. Default Chart.js parameters will inherit from this type.

defaultChart : Type -> Chart

Given a chart type, creates a default chart that can then be updated.

setData : Chartjs.Data.Data -> Chart -> Chart

Update the data for a chart.

setOptions : Chartjs.Options.Options -> Chart -> Chart

Update the options for a chart.

chart : List (Html.Attribute msg) -> Chart -> Html msg

Given attributes and a chart, creates an HTML node using the web component

ChartJs is smart enough to figure out scaling naturally To set the size of the chart, use CSS styles (either in a stylesheet or using the attributes)