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 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.

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.

CE.onMouseMove OnHover (CE.getNearestX CI.dots)

Note: This use to return just one item unless coordinates were identical. This has been updated to return all items with same x coordinates as the closest item found.

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.

CE.onMouseMove OnHover (CE.getNearestWithin 10 CI.dots)

Like getNearestWithin, 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.

CE.onMouseMove OnHover (CE.getNearestWithinX 10 CI.dots)

Find all items within the specified radius. Use the Remodel functions in Chart.Item to filter down what items or groups of items you will be searching for.

CE.onMouseMove OnHover (CE.getAllWithin 10 CI.dots)

Find the nearest item and collect all other items around that item within the specified radius. Use the Remodel functions in Chart.Item to filter down what items or groups of items you will be searching for.

CE.onMouseMove OnHover (CE.getNearestAndNearby 10 CI.dots)

Using the list of chart items, then top level scale, and the event point, produce your own event decoder.

Note that this has two planes. The first is the plane as calculated from configuration and data. The second is the plane with adjusted height and width as gathered from JS event. See Internal.Svg.decoder to see implementation.