Rendering Annotations

Once a Chart has been instantiated, we can render Annotation objects in it by calling the render() method. Render() takes a RenderParams object as an argument.

To render glyphs in a Chart, we’ll first need to instantiate a list of Annotation objects. We’ll cover the creation of meaningful Annotation objects later in the tutorial, but for now we’ll use the generateAnnotations utility function to easily get some Annotation objects to play around with. Once we have the Annotations, we’ll call render with them in an anonymously defined RenderParams object. By default, a Chart will render the Annotations its given as rectangles. Again, we’ll go into more detail on defining customized render behaviors later in the tutorial.

let chart = new soda.Chart({
  selector: "#soda-chart"
});

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

chart.render({
  annotations: ann
})

See the Pen Rendering annotations in a Chart by Jack Roddy (@jackroddy) on CodePen.