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.
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:
createGraph(options: object): KontrastGraphCreate a graph and set its properties according to the specified options.
destroyGraph(name: string)Destroy the graph specified by its name.
pause()Pause the rendering of the figure. This can be used to use less resources (for example when the figure is hidden) and to block user interactions.
resume()Resume the rendering of the figure. If the figure has been suspended due to a WebGL context loss event, this function will also try to restore the WebGL context and reactivate the figure.
renderPNG(options: object)Export the figure as a PNG image. Note that the PNG export works in Firefox, Chrome and Safari, but not in Edge. Moreover, due to security restriction when loading fonts, the PNG export only works when the files are served over the HTTP or HTTPS protocol (not via
renderHTML(options: object)Export the figure as HTML (using an image and a separate text layer).
A promise that resolves when the figure is settled. The figure is settled when the value of all properties are synchronized with the background worker used within the Kontrast library. This becomes important when reading out properties that are determined asynchronously, i.e., the minimum and maximum of an axis when using the
showEverythingfunction or the
The name of the figure. The name has to be unique within the HTML page the figure belongs to. The name must not be empty and must not contain a dot, colon, semicolon or a hash (
#). The name defaults to
Nis a non-negative integer. We recommend you choose a meaningful name for each figure, so that it can be easily accessed via the development console or the Kontrast menu.
The background color of the figure.
The opacity of the figure background.
The HTML element to which the figure is attached.
graphs: Collection of
A collection of all graphs within the figure. The object keys are the names of the graphs.
The relative factor that determines how the vertical space between graphs (i.e. the rows of the layout) can be stretched.
The relative factor that determines how the horizontal space between graphs (i.e. the columns of the layout) can be stretched.
The relative factor that determines how the space at the top of the figure can be stretched.
The relative factor that determines how the space at the bottom of the figure can be stretched.
The relative factor that determines how the space at the left of the figure can be stretched.
The relative factor that determines how the space at the right of the figure can be stretched.
You can see in
Example: Graph layout with stretch factors
rightStretch work. (
Properties of render methods
The input object for the
renderPNG can have the following properties:
undefinedThe width (number of screen pixels) of the static render. If this value is not specified, the current width of the figure is used.
undefinedThe height (number of screen pixels) of the static render. If this value is not specified, the current height of the figure is used.
2The size of a pixel specifies how many actual pixels in the output render correspond to a screen pixel. You can use this value to achieve a high-resolution render. A value of one results in a render that has exactly as many pixels as you specify with
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
recommend the introductory paragraphs of the
MDN devicePixelRatio page.