Hover behaviors

Hover behaviors can be bound to glyphs using the hoverBehavior function. The hoverBehavior function takes a HoverConfig as an argument.

let chart = new soda.Chart({
  selector: "#soda-chart",
  axis: true,
  zoomable: true,
  inRender: function (this, params): void {
    soda.rectangle({
      chart: this,
      annotations: params.annotations || []
    })

    soda.hoverBehavior({
      annotations: params.annotations,
      mouseover: (s, d) => {
        s.style("fill", "cadetblue")
      },
      mouseout: (s, d) => {
        s.style("fill", "black")
      }
    })
  }
});

let ann: Soda.Annotation = soda.generateAnnotations({
  n: 10
})

chart.render({
  annotations: ann
})

---

See the Pen SODA hover behaviors by Jack Roddy (@jackroddy) on CodePen.