In Kontrast, a figure is the main container for each interactive visualization. A figure usually contains one or more graphs, which are positioned on a grid within the figure. Each figure is attached to a single HTML element. A figure can be exported as a PNG file.

As an example on how to create a figure and how to populate it with graphs, you can also refer to the tutorial.

The minimal JavaScript code required to create a figure is:

And the corresponding HTML code is:

Note that we use the padding-top CSS property on the figure element to maintain a constant aspect ratio of the figure. In this example the aspect ratio is 1:2.

The default CSS style for the figure HTML element used in these documentation and example pages is:




You can see in Example: Graph layout with stretch factors how columnStretch, leftStretch and rightStretch work. (rowStretch, topStretch and bottomStretch work similarly.)

Properties of render methods

The input object for the renderHTML and renderPNG can have the following properties:

The resulting PNG image has a horizontal resolution of width * pixelSize and a vertical resolution of height * pixelSize.

For more information on the usage of pixelSize we recommend the introductory paragraphs of the MDN devicePixelRatio page.