In this guide you'll see how to:

✔️ Synchronize the display sizes of several charts

✔️ Synchronize the cursors of several charts

✔️ Synchronize the viewport (zoom & pan) of several charts

Find a similar Javascript example code here: https://play.data2viz.io/sketches/MYnMqL/edit/

Case study

Let's have a look at this application where 3 vertically aligned charts share the same X-axis.

If you want these charts to work in perfect synchronization, you need to ensure that:

1. your application layout aligns the canvases of your charts
2. your charts share a common dataset and at least one common dimension
3. your charting zones have all the exact same width
4. highlighting a data point on one chart is reflected on the others
5. your x-axes keep synchronized even when zooming or panning one chart

Application layout

Charts-kt is a multiplatform library, so let's skip the details and say that you create your application grid-layout with the framework of your choice.

Find more information about the concept of layout.

When you have your 3 container elements (Div, Pane... depending on your target platform) that are placed correctly and responsive you can create VizContainers out of them. They are sized from the base component and your charts will be displayed in it.

//run highlight-only
val root = VBox()

val paneContainer = Pane()
root.children.add(paneContainer)

val myVizContainer = paneContainer.newVizContainer()
myVizContainer.size = Size(myApplication.width, myApplication.height / 3.0)

val myChart = myVizContainer.chart(data) {
		...
}