Adding plot legends to graphs and documents

Kontrast provides means to automatically generate (and update) style information of plots to be used within a legend or within the text. This is achieved by generating (and updating) CSS class selectors based on the style of the plot. The class selectors make use of the name properties of the corresponding figure, graph and plot, using the following scheme: kontrast-figure-graph-plot. The italic components refer to the name of the figure, graph and plot object, respectively.

(We discourage using a hard-coded style that is not automatically updated: If a user were to interactively change the color of a plot by using, for example, the setup context menu, the legend and the plot would not match.)


The following figure (named 'figure0') contains two graphs (named 'graph0' and 'graph1'). Each graph contains a point plot and a line plot (named 'plot0' and 'plot1').

The CSS class selector for the first plot in the first graph is, therefore: kontrast-figure0-graph0-plot0.

The annotation of the left graph was created using:

You can try to change the color of the plots using the context menu and you should see that the legend is automatically updated.

Besides the class selector that specifies which plot the style refers to, there is an additional class selector (legend-before in the above example) that specifies the style of the legend entry. The available styles are listed in the following:

Available styles

There are four available legend styles (which can be combined):

Math typesetting in legends and annotations

Please note that the automatic math conversion from <span class="katex-helper-inline">…</span> does not work when specifying the annotation text from JavaScript. To include math symbols or equations within a legend (or any other annotation), you can concatenate the result from katex.renderToString('...') like this: