• LaTex2Web logo

    LaTeX2Web, a web authoring and publishing system

    If you see this, something is wrong

    Collapse and expand sections

    To get acquainted with the document, the best thing to do is to select the "Collapse all sections" item from the "View" menu. This will leave visible only the titles of the top-level sections.

    Clicking on a section title toggles the visibility of the section content. If you have collapsed all of the sections, this will let you discover the document progressively, from the top-level sections to the lower-level ones.

    Cross-references and related material

    Generally speaking, anything that is blue is clickable.

    Clicking on a reference link (like an equation number, for instance) will display the reference as close as possible, without breaking the layout. Clicking on the displayed content or on the reference link hides the content. This is recursive: if the content includes a reference, clicking on it will have the same effect. These "links" are not necessarily numbers, as it is possible in LaTeX2Web to use full text for a reference.

    Clicking on a bibliographical reference (i.e., a number within brackets) will display the reference.

    Speech bubbles indicate a footnote. Click on the bubble to reveal the footnote (there is no page in a web document, so footnotes are placed inside the text flow). Acronyms work the same way as footnotes, except that you have the acronym instead of the speech bubble.

    Discussions

    By default, discussions are open in a document. Click on the discussion button below to reveal the discussion thread. However, you must be registered to participate in the discussion.

    If a thread has been initialized, you can reply to it. Any modification to any comment, or a reply to it, in the discussion is signified by email to the owner of the document and to the author of the comment.

    Table of contents

    First published on Monday, Sep 15, 2025 and last modified on Friday, Sep 26, 2025 by François Chaplais.

    I am normally hidden by the status bar

    Charts

    François Chaplais

    1 Introduction

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

    2 Data sets

    We will use the following data in the examples.

    Table 1. chartTest.csv
    RedBlueYellowGreenPurpleOrange
    # of Votes12193523
    Average age352255643215
    Table 2. PieTest.csv
    RedBlueYellowGreenPurpleOrange
    # of Votes12193523

    3 Syntax

    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.

    4 Line chart

    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.

    5 Bar chart

    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.

    6 Pie chart

    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.

    7 Doughnut chart

    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.

    8 Polar area chart

    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.

    9 Radar chart

    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.