> For the complete documentation index, see [llms.txt](https://lorvent.gitbook.io/admire/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lorvent.gitbook.io/admire/html/html-structure/main-content/charts.md).

# Charts

To create the charts we use the following plugins [c3](http://c3js.org/), [Chartist](https://gionkunz.github.io/chartist-js/),[Rickshaw charts](http://code.shutterstock.com/rickshaw/) and [Flotchart](http://www.flotcharts.org/). Detailed information about its configuration you can find on their sites.

**1)** **Flotchart:**

We can find more variants of these plugin on [Flotcharts](http://admire.lorvent.in/charts.html) page of this template.

![](/files/-M4TuZbnTKI7kNJ2SABS)

It has the following design:

```
<div id="basicFlotLegend" class="flotlegend"> </div>
     <div id="line-chart" class="flotChart1"> </div>
```

**2) c3:**

We can find more variants of these plugin on [c3](http://admire.lorvent.in/advanced_charts.html) page of this template.

![](/files/-M4TuZbr72AuwXmwVM5j)It has the following structure:

```
<div id="chart2" class="c3"> </div>
```

**3) chartist:**

We can find more variants of these plugin on [Chartist](http://admire.lorvent.in/chartist.html) page of this template.

![](/files/-M4TuZbttUeiGP69HpOG)

It has the following structure:

```
<div id="draw_events" class="ct-chart ct-perfect-fourth"> </div>
```

**4) Rickshaw charts:**

![](/files/-M4TuZbvbBUjcDWnijSQ)

It has the following Structure:

```
<div id="chart_5"> </div>
```
