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

chartConfig : LineChart.Config Data msg
chartConfig =
  { ...
  , junk = Junk.default
  , ...
  }

For the junk-free chart.

Draws the default tooltip.

customJunk : Maybe Data -> Junk.Junk msg
customJunk hovered =
  Junk.hoverOne model.hovered
    [ ( "Age", toString << .age )
    , ( "Weight", toString << .weight )
    ]

See the full example here.

Draws the default tooltip for multiple hovered points.

customJunk : List Data -> Junk.Junk msg
customJunk hovered =
  Junk.hoverMany model.hovered formatX formatY


formatX : Data -> String
formatX =
  .date >> Date.fromTime >> Date.Format.format "%e. %b, %Y"


formatY : Data -> String
formatY data =
  toString data.weight ++ "kg"

See the full example here.

Draw whatever junk you'd like. You're given the Coordinate.System to help you place your junk on the intended spot in the chart, because it allows you to translate from data-space into SVG-space and vice versa.

To learn more about the Coordinate.System and how to use it, see the Coordinate module.

junk : Maybe Coordinate.Point -> Coordinate.System -> Junk.Layers msg
junk hovered system =
  { below =
      case hovered of
        Just hovered -> [ sectionBand hovered system ]
        Nothing      -> []
  , above = []
  , html = []
  }


sectionBand : Coordinate.Point -> Coordinate.System -> Svg.Svg msg
sectionBand hovered system =
  Junk.rectangle system
    [ Svg.Attributes.fill "#b6b6b61a" ]
    (hovered.x - 5) (hovered.x + 5)
    system.y.min    system.y.max

See the full example here.

The layers where you can put your junk.

• below junk will be placed below your lines
• above junk will be placed above your lines
• html junk will be placed on top of the SVG chart.

An attribute which when added, truncates the rendered element if it extends outside the chart area.

Draws a vertical line, which is the full length of the y-range.

Pass the x-coordinate.

Note: The line is truncated off if outside the chart area.

Draws a horizontal line which is the full length of the x-range.

Pass the y-coordinate.

Note: The line is truncated off if outside the chart area.

Draws a vertical line.

Pass the x-, y1- and y2-coordinates, respectively.

Note: The line is truncated off if outside the chart area.

Draws a horizontal line.

Pass the y-, x1- and x2-coordinates, respectively.

Note: The line is truncated off if outside the chart area.

Draws a rectangle. This can be used for grid bands and highlighting a range e.g. for selection.

xSelectionArea : Coordinate.System -> Float -> Float -> Svg msg
xSelectionArea system startX endX =
    Junk.rectangle system
      [ Attributes.fill "rgba(255,0,0,0.1)" ]
      startX endX system.y.min system.y.max

Note: The rectangle is truncated off if outside the chart area.

Draws a circle. Pass the system, radius, color and x- and y-coordinates respectively.

Given a color, it draws the text in the second argument.

A label, but you get to place it too.

Arguments:

1. The coordinate system.
2. The x-coordinate in data-space.
3. The y-coordinate in data-space.
4. The x-offset in SVG-space.
5. The y-offset in SVG-space.
6. The text-anchor css value.
7. The color of the text.
8. The text.

customJunk : Junk.Config Data msg
customJunk =
  Junk.custom <| \system ->
    { below = []
    , above =
        [ Junk.labelAt system 2  1.5 0 -10 "middle" Colors.black "← axis range →"
        , Junk.labelAt system 2 -1.5 0  18 "middle" Colors.black "← data range →"
        -- Try changing the numbers!
        ]
    , html = []
    }

Place a list of elements on a given spot.

Arguments:

1. The coordinate system.

2. The x-coordinate in data-space.

3. The y-coordinate in data-space.

4. The x-offset in SVG-space.

5. The y-offset in SVG-space.

6. The list of elements

Produces a SVG transform attributes. Useful to move elements around.

movedStuff : Coordinate.System -> Svg.Svg msg
movedStuff system =
  Svg.g
    [ Junk.transform
        [ Junk.move system someDataPoint.age someDataPoint.weight
        , Junk.offset 20 10
        -- Try changing the offset!
        ]
    ]
    [ Junk.label Colors.blue "stuff" ]

See the full example here.

Moves in data-space.

Moves in SVG-space.

Make the markup for a hover placed in the middle of the y-axis and at a given x-coordinate.

Pass the hint x-coordinate, your styles and your internal view.

customJunk : Maybe Data -> Junk.Config Data msg
customJunk hovered =
  Junk.custom <| \system ->
    { below = []
    , above = []
    , html =
        [ Junk.hover system hovered.x
            [ ( "border-color", "red" ) ]
            [ Html.text (toString hovered.y) ]
        ]
    }

Make the markup for a hover placed at a given x- and y-coordinate.

Pass the hint x- and y-coordinate, your styles and your internal view.

customJunk : Maybe Data -> Junk.Config Data msg
customJunk hovered =
  Junk.custom <| \system ->
    { below = []
    , above = []
    , html =
        [ Junk.hoverAt system hovered.x system.y.max
            [ ( "border-color", "red" ) ]
            [ Html.text (toString hovered.y) ]
        ]
    }