Documents Live, a web authoring and publishing system
Documents Live, a web authoring and publishing system
If you see this, something is wrong
First published on Monday, Sep 15, 2025 and last modified on Friday, Mar 13, 2026
Documents Live lets you draw data in graphics using the chart.js library .
Data resides in a CSV file, and the styling is in the LaTeX code.
We will use the following data in the examples.
| 1 | 2 | 3 | 4 | 5 | 6 |
| 12 | 19 | 3 | 5 | 2 | 3 |
| 35 | 22 | 55 | 64 | 32 | 15 |
| Red | Blue | Yellow | Green | Purple | Orange |
| 12 | 19 | 3 | 5 | 2 | 3 |
Charts are embedded in a chart environment. Then optional parameter for the \begin{chart} command is the type of the chart. You can also use the \type command in the chart definition. The default type is line . Next the \data command indicate the CSV file where the data is stored.
Now for the styling.
The chartStyle environment includes the styling parameters for the chart as a whole.
Inside the chartStyle, you may also style each row of data individually, using the rowStyle environment, each opening statement having the number of the row as a second (mandatory) parameter. Here is the structure.
\begin{chart}
\caption{caption text}
\data{CSV file location}
\begin{chartStyle}
... styling commands for the chart ...
\begin{rowStyle}{1}
... styling commands for row 1 ...
\end{rowStyle}
\begin{rowStyle}{2}
... styling commands for row 2 ...
\end{rowStyle}
\end{chartStyle}
\end{chart}Let us give now a few examples with source code.
Chart 1. Line chart
Here is the code.
\begin{chart}
\caption{Line chart}
\data{chartTest.csv}
\begin{chartStyle}
tension=0.4
\begin{rowStyle}{1}
borderColor=red pointStyle=circle pointRadius=8
\end{rowStyle}
\begin{rowStyle}{2}
borderColor=green pointStyle=triangle pointRadius=8
\end{rowStyle}
\end{chartStyle}
\end{chart}For details, please refer to the chart.js documentation .
Chart 2. Bar chart
Here is the code.
\begin{chart}
\caption{Bar chart}
\data{chartTest.csv}
\type{bar}
\begin{chartStyle}
borderRadius=5 borderWidth=3 borderColor=black
\begin{rowStyle}{1}
backgroundColor=red
\end{rowStyle}
\begin{rowStyle}{2}
backgroundColor=green
\end{rowStyle}
\end{chartStyle}
\end{chart}For details, please refer to the chart.js documentation .
Chart 3. Pie chart
Here is the code.
\begin{chart}[pie]
\caption{Pie chart}
\data{PieTest.csv}
\begin{chartStyle}
backgroundColor=[red,blue,yellow,green,purple,orange] borderColor=black
\end{chartStyle}
\end{chart}For details, please refer to the chart.js documentation .
Chart 4. Doughnut chart. These charts can incluse several datasets.
Here is the code.
\begin{chart}[doughnut]
\caption{Doughnut chart. These charts can incluse several datasets.}
\data{chartTest.csv}
\type{doughnut}
\begin{chartStyle}
backgroundColor=[red,blue,yellow,green,purple,orange] borderColor=black
\end{chartStyle}
\end{chart}For details, please refer to the chart.js documentation .
Chart 5. Polar area chart
Here is the code.
\begin{chart}[polarArea]
\caption{Polar area chart}
\data{PieTest.csv}
\type{polarArea}
\begin{chartStyle}
backgroundColor=[red,blue,yellow,green,purple,orange] borderColor=black
\end{chartStyle}
\end{chart}For details, please refer to the chart.js documentation .
Chart 6. Radar chart. These charts can incluse several datasets.
Here is the code.
\begin{chart}[radar]
\caption{Radar chart. These charts can incluse several datasets.}
\data{chartTest.csv}
\begin{chartStyle}
\begin{rowStyle}{1}
borderColor=pink backgroundColor=red?50
\end{rowStyle}
\begin{rowStyle}{2}
borderColor=lime backgroundColor=green?50
\end{rowStyle}
\end{chartStyle}
\end{chart}
red?50 means that the red color is applied with an opacity of 50%.
For details, please refer to the chart.js documentation .