indicatrix / elm-chartjs-webcomponent / 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 Basics.Float
, hidden : Maybe Basics.Bool
, order : Maybe Basics.Int
, backgroundColor : Maybe (Chartjs.Common.PointProperty Color)
, borderAlign : Maybe String
, borderColor : Maybe (Chartjs.Common.PointProperty Color)
, borderWidth : Maybe (Chartjs.Common.PointProperty Basics.Float)
, circumference : Maybe Basics.Int
, cutout : Maybe Basics.Int
, hoverBackgroundColor : Maybe (Chartjs.Common.PointProperty Color)
, hoverBorderColor : Maybe (Chartjs.Common.PointProperty Color)
, hoverBorderWidth : Maybe (Chartjs.Common.PointProperty Basics.Float)
, offset : Maybe (Chartjs.Common.PointProperty Basics.Int)
, rotation : Maybe Basics.Int
, weight : Maybe Basics.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 Basics.Float -> DataSet

Create a Pie dataset with a label and data

setLabel : String -> DataSet -> DataSet

Set the label for this dataset

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 an arc

setHidden : Basics.Bool -> DataSet -> DataSet

Set whether this dataset should be hidden from the chart

setOrder : Basics.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 : Basics.Int -> DataSet -> DataSet

Total sweep, in degrees, to allow arcs to cover

setCutout : Basics.Int -> DataSet -> DataSet

Cutout, in pixels

setOffset : Chartjs.Common.PointProperty Basics.Int -> DataSet -> DataSet

Offset for each arc, in pixels

setRotation : Basics.Int -> DataSet -> DataSet

Starting angle, in degrees, to draw dataset from

setWeight : Basics.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 : Chartjs.Common.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 : 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 arcs when hovered

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

Border color of the arcs when hovered

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

Width of the border when hovered