indicatrix / elm-chartjs-webcomponent / Chartjs.DataSets.Polar

Polar charts are similar to pie charts, but each segment has the same angle


type alias DataSet =
{ label : String
, data : List Basics.Float
, backgroundColor : Maybe (Chartjs.Common.PointProperty Color)
, borderAlign : Maybe String
, borderColor : Maybe (Chartjs.Common.PointProperty Color)
, borderWidth : Maybe (Chartjs.Common.PointProperty Basics.Float)
, hoverBackgroundColor : Maybe (Chartjs.Common.PointProperty Color)
, hoverBorderColor : Maybe (Chartjs.Common.PointProperty Color)
, hoverBorderWidth : Maybe (Chartjs.Common.PointProperty Basics.Float) 
}

For further information on these properties, see https://www.chartjs.org/docs/latest/charts/polar.html

You should not use the dataset type directly Instead use the updater pipeline functions:

defaultBarFromLabel "Example"
    |> setBackgroundColor (Common.All Color.red)
    |> setBorderColor (Common.All Color.white)

defaultPolarFromLabel : String -> DataSet

Create a Polar dataset with just a label

defaultPolarFromData : String -> List Basics.Float -> DataSet

Create a Polar dataset with a label and data

setData : List Basics.Float -> DataSet -> DataSet

Set the data displayed by this dataset This is a list of floats, where each float is represented as a segment on the chart

setBackgroundColor : Chartjs.Common.PointProperty Color -> DataSet -> DataSet

Fill color of the segments

setBorderAlign : String -> DataSet -> DataSet

Whether the borders of each segment should overlap or not Set to 'center' to overlap Set to 'inner' to not overlap

setBorderColor : Chartjs.Common.PointProperty Color -> DataSet -> DataSet

Color of the border

setBorderWidth : Chartjs.Common.PointProperty Basics.Float -> DataSet -> DataSet

Width of the border

setHoverBackgroundColor : Chartjs.Common.PointProperty Color -> DataSet -> DataSet

Fill color of the segments when hovered

setHoverBorderColor : Chartjs.Common.PointProperty Color -> DataSet -> DataSet

Border color of the segements when hovered

setHoverBorderWidth : Chartjs.Common.PointProperty Basics.Float -> DataSet -> DataSet

Width of the border when hovered