Chartjs.DataSets.DoughnutAndPie

Pie and doughnut charts are divided into segments, where the arc of each segment shows the proportion of each data.

In Chart.js, these two charts are essentially the same. The only different value is the cutoutPercentage. This dataset class will work for either pie or doughtnut charts interchangably

type alias DataSet =

{ label : String

, data : List Float

, backgroundColor : Maybe (PointProperty Color)

, borderAlign : Maybe String

, borderColor : Maybe (PointProperty Color)

, borderWidth : Maybe (PointProperty Float)

, hoverBackgroundColor : Maybe (PointProperty Color)

, hoverBorderColor : Maybe (PointProperty Color)

, hoverBorderWidth : Maybe (PointProperty Float)

}

For further information on these properties, see https://www.chartjs.org/docs/latest/charts/doughnut.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)

defaultPieFromLabel : String -> DataSet

Create a Pie dataset with just a label

defaultPieFromData : String -> List Float -> DataSet

Create a Pie dataset with a label and data

setData : List Float -> DataSet -> DataSet

Set the data displayed by this dataset This is a list of floats, where each float is represented as an arc

setBackgroundColor : PointProperty Color -> DataSet -> DataSet

Fill color of the arcs

setBorderAlign : String -> DataSet -> DataSet

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

setBorderColor : PointProperty Color -> DataSet -> DataSet

Color of the border

setBorderWidth : PointProperty Float -> DataSet -> DataSet

Width of the border

setHoverBackgroundColor : PointProperty Color -> DataSet -> DataSet

Fill color of the arcs when hovered

setHoverBorderColor : PointProperty Color -> DataSet -> DataSet

Border color of the arcs when hovered

setHoverBorderWidth : PointProperty Float -> DataSet -> DataSet

Width of the border when hovered

indicatrix/elm-chartjs-webcomponent/1.0.0

Chartjs.DataSets.DoughnutAndPie

Modules