You're not reading the latest revision of this page, which is here.

JSX Visualization Color, Label and further Stylings

Adding labels to variables
Changing the color of variables
Further stylings

After defining the variables, you can add label, color and transparencies for the variables.
Both only affect their appearance in the canvases.

Adding labels to variables

Labels are added with the command \label{varname}{labeltext} within the environment of
the visualization, but outside of the variable-environment, canvas-environment etc.

For labeltext, currently you can only use standard text, but it will be improved to allow
LaTeX-commands. Usually, the label will be displayed next to the object in the canvas(es).
An exception is the slider. Here the value shown next to the slider will be replaced by
labeltext=value.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 \begin{variables}
    \slider{s}{real}{1}{-4}{4}
  \point{p}{real}{0,0}
  \point{q}{real}{s,2}
  \line{g}{real}{p,q}
\end{variables}
 
%set up label
\label{p}{P} %sets the label 'P' to p
\label{q}{Q} %sets the label 'Q' to q 
\label{s}{Q[x]} % next to the slider is shown 'Q[x]=...' instead of just the value.
 
\begin{canvas}
   \plotSize{250,250}
     \plotLeft{-5}
     \plotRight{5}
     \plotTop{5}
     \plot[coordinateSystem, noToolbar]{p,q,s,g}     
\end{canvas}

Changing the color of variables

The default color of an object is changed by the command \color{varname}{color}.
While defining colors you can also optionally
define the transparency between 0 and 1 where 0 has no transparency at all,
and 1 will make the plotted variable object not visible.

As color, you can use any HTML-color name (see e.g. https://www.w3schools.com/colors/colors_names.asp ), or any hex-code defining a color,
e.g. #32CD32 which would be the same as the color LimeGreen.

1
2
3
4
5
6
7
8
9
10 \begin{variables}
    \slider{s}{real}{1}{-4}{4}
  \point{p}{real}{0,0}
  \point{q}{real}{s,2}
  \line{g}{real}{p,q}
\end{variables}
 
 
\color{p}{RED} %set color of p to red
\color[0.1]{g}{DARKGREEN} % set color of g to dark green with 10% transparency

Further stylings

The default styling of variables in the canvas can be changed by the command \style{varname}{styling-options}. The styling-options here is a comma-separated list of options that jsxgraph offers for styling, e.g. for a point with varname p you can use \style{p}{face:'[]', size:10} to display the point as a big square.

See the JSXGraph documentation for more details on the options available.
Specifically for

points: https://jsxgraph.org/wiki/index.php?title=Point#Point_faces_and_sizes
lines: https://jsxgraph.org/wiki/index.php/Line
circles: https://jsxgraph.org/wiki/index.php/Circle

News

JSX Visualization Color, Label and further Stylings

Adding labels to variables

Changing the color of variables

Further stylings