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.)

Example

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):

• legend-color sets the color of the text to the color of the plot

  <div class="kontrast-figure0-graph0-plot0 legend-color">Data A</div> <div class="kontrast-figure0-graph0-plot1 legend-color">Data B</div>
  Data A
  Data B

• legend-before inserts a small pictogram in front of the element

  <div class="kontrast-figure0-graph0-plot0 legend-before">Data A</div> <div class="kontrast-figure0-graph0-plot1 legend-before">Data B</div>
  Data A
  Data B

• legend-after appends a small pictogram after the element

  <div class="kontrast-figure0-graph0-plot0 legend-after">Data A</div> <div class="kontrast-figure0-graph0-plot1 legend-after">Data B</div>
  Data A
  Data B

• legend-underline underlines the content (using a border-bottom with the color and thickness of a line. This only works for lines.

  <span class="kontrast-figure0-graph0-plot1 legend-underline">Data B</span> <span class="kontrast-figure0-graph1-plot3 legend-underline">Data D</span>
  Data B Data D

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: