An attribute for adding events.

Add a mouse move event handler.

C.chart
  [ CE.onMouseMove (CE.getNearest CI.bars) ]
  [ .. ]

See example at elm-charts.org.

Add a mouse leave event handler. See example at elm-charts.org.

Add a mouse up event handler. See example at elm-charts.org.

Add a mouse down event handler. See example at elm-charts.org.

Add a click event handler.

C.chart
  [ CE.onClick Clicked C.getCoords ]
  [ .. ]

Add a double click event handler.

Add any event handler.

C.chart
  [ CE.on "mousemove" <|
      CE.map2 OnMouseMove
        (CE.getNearest CI.bars)
        (CE.getNearest CI.dots)


  ]
  [ .. ]

See example at elm-charts.org.

Decode to get the nearest item to the event. Use the Remodel functions in Chart.Item to filter down what items or groups of items you will be searching for.

import Chart as C
import Chart.Attributes as CA
import Chart.Events as CE
import Chart.Item as CI


type alias Model =
  { hovering : List (CI.One Datum CI.Bar) }


init : Model
init =
  { hovering = [] }


type Msg
  = OnHover (List (CI.One Datum CI.Bar))


update : Msg -> Model -> Model
update msg model =
  case msg of
    OnHover hovering ->
      { model | hovering = hovering }


view : Model -> H.Html Msg
view model =
  C.chart
    [ CA.height 300
    , CA.width 300
    , CE.onMouseMove OnHover (CE.getNearest CI.bars)
    , CE.onMouseLeave (OnHover [])
    ]
    [ C.xLabels []
    , C.yLabels []
    , C.bars []
        [ C.bar .z []
        , C.bar .y []
        ]
        data


    , C.each model.hovering <| \p bar ->
        [ C.tooltip bar [] [] [] ]
    ]

See example at elm-charts.org.

Like getNearest, but only takes x coordiante into account. Use the Remodel functions in Chart.Item to filter down what items or groups of items you will be searching for.

Decode to get the nearest item within certain radius to the event. Use the Remodel functions in Chart.Item to filter down what items or groups of items you will be searching for.

Like getWithin, but only takes x coordiante into account. Use the Remodel functions in Chart.Item to filter down what items or groups of items you will be searching for.

Decode to get the cartesian coordinates of the event.

Decode to get the SVG coordinates of the event.

Decode to get the event offset from center in cartesian coordinates.