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.