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

type Model =
  { otherData : OtherData
  , chartModel : ChartModel
  }

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

type Msg
  = Msg1 Data1
  | Msg2 Data2
  | ChartMessage ChartMsg

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

init : Model
init =
  { otherData = {...}
  , chartModel = initChartModel
  }

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

update : Msg -> Model -> Model
update msg model =
  case msg of
    ChartMessage chartMsg ->
      { model
      | chartModel = updateChartModel chartMsg model.chartModel
      }
    NoOp -> model

Represents one line of the Line Chart.

Create a LineChartDataSet by providing:

1. A label for the dataset
2. A list of values
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 line on the chart.

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


serverCost :: LineChartDataSet
serverCost = createDataSet "Server Cost" [ 20.4, 30.2, 10] (fromColor opaque black)

Represents the data that will be used to draw the Line Chart. Many lines can be drawn in one chart.

Takes a List of string labels, and data sets. Each data set represents a line on the Line Chart.

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


data :: LineChartData
data = createData ["Mon", "Tue", "Wed", "Thu", "Fri"]
  [ createDataSet "Wake up time" [7, 8, 9, 8, 7] (fromColor opaque green)
  , createDataSet "Sleeping time" [23, 22, 21, 22, 23] (fromColor opaque red)
  ]

Used to draw the line chart. The arguments are:

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

Following code shows how to setup parts 3 and 4.

import LineChart exposing (lineChart)


type Model =
  { otherData : OtherData
  , chartModel : ChartModel
  }


type Msg
  = Msg1 Data1
  | Msg2 Data2
  | ChartMessage ChartMsg


init : Model
init =
  { otherData = {...}
  , chartModel = initChartModel
  }


view : Model -> Html Msg
view model = lineChart defaultLineChartOptions data ChartMessage model.chartModel


update : Msg -> Model -> Model
update msg model =
  case msg of
    ChartMessage chartMsg ->
      { model
      | chartModel = updateChartModel chartMsg model.chartModel
      }
    NoOp -> model

Used to configure the line chart.

Default options for configuring the line chart.

options : LineChartOptions
options =
  setChartWidth 1200 defaultLineChartOptions
  |> setChartHeight 800
  |> setTooltipWidth 200
  |> setTooltipHeight 100
  |> setLabelWidth 200
  |> setLabelHeight 200
  |> setPointRadius 4

Set the Chart Width.

Set the Chart Height.

Set the Tooltip Width.

Set the Tooltip Height.

Set the Label Width.

Set the Label Rotation in degrees.

1. If you provide rotation value (even if it is Just 0), label will be rotated from its end, counter-clockwise.
2. If you don't provide a value (Nothing), label will be center aligned with its axis.

Set the Value Width.

Set the point radius on the chart. Hovered points double their radius.

Set the width of one legend key.

Set the spacing between two legend keys.