Automatic layout

In all of the examples in the tutorial, we’ve been getting some toy annotation data using the generateAnnotations function, which by default returns a list of Annotations uniformly distributed in a preconfigured layout. Here, we’ll provide a GenerationPattern.Random argument, which will give us randomly distributed Annotations with a row property of 0.

let ann: Soda.Annotation = soda.generateAnnotations({
  n: 100,
  generationPattern: soda.GenerationPattern.Random
})

If we were to render these annotations, they would all be stacked on top of each other in the first row:

See the Pen SODA automatic layout by Jack Roddy (@jackroddy) on CodePen.


If we don’t have a preconfigured layout, a Chart can be configured to automatically calculate one for us. By setting the autoLayout property to true on our RenderParams, the annotations provided will be laid out in a condense, non-overlapping pattern.

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

let ann: Soda.Annotation = soda.generateAnnotations({
  n: 100,
  generationPattern: soda.GenerationPattern.Random
})

chart.render({
  annotations: ann,
  autoLayout: true
})

See the Pen SODA automatic layout by Jack Roddy (@jackroddy) on CodePen.