The VizContainer

The VizContainer is a component created to simplify the bootstrapping of your charts on any platform. It is mandatory to create a chart.

The VizContainer holds the charting visualization(s) and is bound to different platform elements:

• A Pane for a JFX application, through Pane.newVizContainer()
• A Div for a javascript project, through HTMLDivElement.newVizContainer()

The VizContainer takes the size of the platform element when it's created. Latter modification of size must be done through the size property of the VizContainer and not by modifying the underlying platform element.

Performance mode (dual canvas)

Charts-kt offers a "performance mode" you can enable simply on every chart you create:

//run highlight-only
chart(data) {

    performanceMode = true

    (...)
}

When enabling it, the VizContainer creates and holds 2 Canvas components for the chart. One is for drawing the "front" visuals of your chart and the other for the "back".

The different layers are stored as follow:

• In the "front" canvas: selected and highlighted marks, axes, cursor, tooltip
• In the "back" canvas: marks signs and background elements

Dual canvas and layers

<aside> 👨‍🎓 Find more information about the concept of layers.

</aside>

When enabling performance mode and using 2 Canvas, the layers are split between the two:

From bottom to top: