Chevron rectangles

We can also render Annotations as rectangles with chevron arrows inside them.

let orientations = [soda.Orientation.Forward, soda.Orientation.Reverse]

let chart = new soda.Chart({
  selector: "#soda-chart",
  axis: true,
  zoomable: true,
  inRender: function (this, params): void {
    soda.chevronRectangle({
      chart: this,
      annotations: params.annotations || [],
      chevronSpacing: 5,
      strokeColor: 'cadetblue',
      chevronStrokeColor: 'cadetblue',
      orientation: (d) => orientations[d.a.y % 2]
    })
  }
});

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

chart.render({
  annotations: ann
})

---

See the Pen Different glyphs - chevron rectangles by Jack Roddy (@jackroddy) on CodePen.