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
{ 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
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
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
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