Text

We can also render Annotations as text. This is a little more complicated because we have to define a callback function that returns a list of text.

let colors = ['cadetblue', '#9581a9']

let chart = new soda.Chart({
  selector: "#soda-chart",
  axis: true,
  zoomable: true,
  rowHeight: 18,
  inRender: function (this, params): void {
    soda.text({
      chart: this,
      annotations: params.annotations || [],
      textFn: (a) => {
        return [
          `${a.id}: ${a.start} - ${a.end} | ${a.row}`,
          `${a.id}: ${a.start} - ${a.end}`,
          `${a.id}`,
          "...",
        ];
      },
      fillColor: (d) => colors[d.a.row % 2],
    })
  }
});

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

chart.render({
  annotations: ann
})

---

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