Need this for determining if a sector on the chart has been hovered on. This should be a part of your model.

type Model =
  { otherData : OtherData
  , pieModel : PieModel
  }

Used to handle tooltips for the pie chart. This should be added to your own msg type.

type Msg
  = Msg1 Data1
  | Msg2 Data2
  | PieMessage PieMsg

Initial state for PieModel type. Should be a part of your init.

init : Model
init =
  { otherData = {...}
  , pieModel = initPieModel
  }

Used to update the PieModel type. This should be used inside your update function.

update : Msg -> Model -> Model
update msg model =
  case msg of
    PieMessage pieMsg ->
      { model
      | pieModel = updatePieModel pieMsg model.pieModel
      }
    NoOp -> model

Represents one sector of the Pie Chart.

Create a PieChartDataSet by providing:

1. A label for the dataset
2. A value for the dataset
3. A color which will be used to plot this dataset on the chart. Click here for the color module.

One dataset corresponds to one sector on the chart.

import Palette.X11 exposing (black)
import TransparentColor exposing (opaque, fromColor)


serverCost :: PieChartDataSet
serverCost = createDataSet "Server Cost" 20.4 (fromColor opaque black)

Represents the data that will be used to draw the Pie Chart.

Takes a List of data sets. Each data set represents a sector on the Pie Chart.

import Palette.X11 exposing (green, red)
import TransparentColor exposing (opaque, fromColor)


data :: PieChartData
data = createData
  [ createDataSet "Delivery Time" 30 (fromColor opaque green)
  , createDataSet "Manufacturing Time" 180 (fromColor opaque red)
  ]

Used to draw the pie chart. The arguments are:

1. Options to configure the pie chart.
2. The data to be displayed on the chart.
3. A msg constructor to convert PieMsg into your own msg type.
4. The pie chart model, which should be stored inside your Elm model.

Following code shows how to setup parts 3 and 4.

import PieChart exposing (pieChart)


type Model =
  { otherData : OtherData
  , pieModel : PieModel
  }


type Msg
  = Msg1 Data1
  | Msg2 Data2
  | PieMessage PieMsg


init : Model
init =
  { otherData = {...}
  , pieModel = initPieModel
  }


view : Model -> Html Msg
view model = pieChart defaultPieChartOptions data PieMessage model.pieModel


update : Msg -> Model -> Model
update msg model =
  case msg of
    PieMessage pieMsg ->
      { model
      | pieModel = updatePieModel pieMsg model.pieModel
      }
    NoOp -> model

Used to configure the pie chart.

Default options for configuring the line chart.

options : PieChartOptions
options =
  setChartWidth 1200 defaultPieChartOptions
  |> setChartHeight 800
  |> setTooltipWidth 200
  |> setTooltipHeight 100

Set the Chart Width.

Set the Chart Height.

Set the Tooltip Width.

Set the Tooltip Height.

Set the width of one legend key.

Set the spacing between two legend keys.