lauber00 / line-charts / LineChart.Line


type alias Config data =
Internal.Line.Config data

Use in the LineChart.Config passed to LineChart.viewCustom.

chartConfig : LineChart.Config Data msg
chartConfig =
  { ...
  , line = Line.default
  , ...
  }

default : Config data

Makes 1px wide lines.

wider : Basics.Float -> Config data

Pass the desired width of your lines.

chartConfig : LineChart.Config Data msg
chartConfig =
  { ...
  , line = Line.wider 3
  , ...
  }

See the full example here.

hoverOne : Maybe data -> Config data

Makes the line, to which the data in the first argument belongs, wider!

chartConfig : Maybe Data -> LineChart.Config Data Msg
chartConfig hovered =
  { ...
  , line = Line.hoverOne hovered
  , ...
  }

See the full example here.

custom : (List data -> Style) -> Config data

Edit as style of a line based on its data.

lineConfig : Maybe Data -> Line.Config Data
lineConfig maybeHovered =
  Line.custom (toLineStyle maybeHovered)


toLineStyle : Maybe Data -> List Data -> Line.Style
toLineStyle maybeHovered lineData =
  case maybeHovered of
    Nothing -> -- No line is hovered
      Line.style 1 identity

    Just hovered -> -- Some line is hovered
      if List.any ((==) hovered) lineData then
        -- It is this one, so make it pop!
        Line.style 2 (Manipulate.darken 0.1)
      else
        -- It is not this one, so hide it a bit
        Line.style 1 (Manipulate.lighten 0.35)

See the full example here.

Styles


type alias Style =
Internal.Line.Style

style : Basics.Float -> (Color -> Color) -> Style

Pass the width of the line and a function transforming the line's color.

vanilla : Line.Style
vanilla =
  Line.style 1 identity

emphasize : Line.Style
emphasize =
  Line.style 2 (Manipulate.darken 0.15)

hide : Line.Style
hide =
  Line.style 1 (Manipulate.lighten 0.15)

blacken : Line.Style
blacken =
  Line.style 2 (\_ -> Colors.black)

See the full example here.