Multiple charts rendering the same Annotations
You may find yourself wanting to build a visualization with multiple Chart components.
In this simple example, we will create two Charts that will render the same data slightly differently.
let chart = new soda.Chart({
selector: "#soda-chart",
axis: true,
zoomable: true
});
let chart2 = new soda.Chart({
selector: "#soda-chart2",
axis: true,
zoomable: true,
inRender: function(this, params): void {
soda.rectangle({
chart: this,
annotations: params.annotations || [],
fillColor: "cadetblue"
})
}
});
let ann: Soda.Annotation = soda.generateAnnotations({
n: 10
})
chart.render({
annotations: ann
})
chart2.render({
annotations: ann
})
See the Pen SODA multiple charts same data by Jack Roddy (@jackroddy) on CodePen.