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

, hidden : Maybe Bool

, order : Maybe Int

, backgroundColor : Maybe (PointProperty Color)

, borderAlign : Maybe String

, borderColor : Maybe (PointProperty Color)

, borderWidth : Maybe (PointProperty Float)

, circumference : Maybe Int

, cutout : Maybe Int

, hoverBackgroundColor : Maybe (PointProperty Color)

, hoverBorderColor : Maybe (PointProperty Color)

, hoverBorderWidth : Maybe (PointProperty Float)

, offset : Maybe (PointProperty Int)

, rotation : Maybe Int

, weight : Maybe 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

setLabel : String -> DataSet -> DataSet

Set the label for this dataset

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

setHidden : Bool -> DataSet -> DataSet

Set whether this dataset should be hidden from the chart

setOrder : Int -> DataSet -> DataSet

Set the drawing order of the dataset This also affects stacking, tooltips, and legends

Pies

Pie datasets are quite similar to bar dataset - provide a dataset label and a list of floats

defaultPieFromData "Example Chart" [ 4, 8, 15, 16, 23, 42 ]

When grouping datasets into a chart data object, the labels specified will be used as the categories:

dataset =
    defaultPieFromData "Example Chart" [ 4, 8, 15, 16, 23, 42 ]
        |> ChartData.PieData


data =
    ChartData.dataFromLabels [ "One", "Two", "Three", "Four", "Five", "Six" ]
        |> ChartData.addDataset dataset

Doughnuts, Arcs, and Other Shapes

There are a wide variety of methods that can be used to adjust the shape of your pie chart. By setting a cutout value, a pie dataset will be transformed into a doughnut dataset.

defaultPieFromData "Example Chart" [ 4, 8, 15, 16, 23, 42 ]
    |> setCutout 50

To create an arc, set the circumference and initial rotation (both in degrees) to adjust the extents of the chart:

defaultPieFromData "Bottom Half Pie" [ 4, 8, 15, 16, 23, 42 ]
    |> setCircumference 180
    |> setRotation 90

setCircumference : Int -> DataSet -> DataSet

Total sweep, in degrees, to allow arcs to cover

setCutout : Int -> DataSet -> DataSet

Cutout, in pixels

setOffset : PointProperty Int -> DataSet -> DataSet

Offset for each arc, in pixels

setRotation : Int -> DataSet -> DataSet

Starting angle, in degrees, to draw dataset from

setWeight : Float -> DataSet -> DataSet

The relative thickness of this dataset If specified, then this dataset will be drawn with a thickness relative to the sum of all dataset weights

Colors and Borders

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/3.0.0

Chartjs.DataSets.DoughnutAndPie

Pies

Doughnuts, Arcs, and Other Shapes

Colors and Borders

Modules