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.