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

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZbnTKI7kNJ2SABS%2Fadire15.png?generation=1586435353378392\&alt=media)

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.

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZbr72AuwXmwVM5j%2Fadmire18.png?generation=1586435353317548\&alt=media)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.

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZbttUeiGP69HpOG%2Fadmire16.png?generation=1586435353489590\&alt=media)

It has the following structure:

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

**4) Rickshaw charts:**

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZbvbBUjcDWnijSQ%2Fadmire17.png?generation=1586435353619944\&alt=media)

It has the following Structure:

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