> For the complete documentation index, see [llms.txt](https://docs.pages.revox.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pages.revox.io/charts.md).
# Charts
Pages comes bundled with two popular charting libraries: [Rickshaw](https://tech.shutterstock.com/rickshaw/) and [NVD3](http://nvd3.org/). These libraries render charts in SVG format which makes them highly customizable using CSS and JS.
## **Rickshaw Charts**
Rickshaw is a simple framework for drawing charts of time series data on a web page, built on top of Mike Bostock's delightful D3 library. These charts can be powered by static historical data sets, or living data that continuously updates in real time.
Please refer to [Rickshaw Tutorial](https://tech.shutterstock.com/rickshaw/) to learn more about the library
**Step one**
Include the plugin stylesheet rickshaw\.min.css.css ``
```markup
```
**Step two**
Include the plugin javascript file and D3 library inside the ``before core template script inclusions, if it's not there already.
```markup
```
**Step three**
Create the markup
```markup
```
**Step four**
Apply the plugin. This example renders a basic area chart
```markup
```
**Step three**
Add following markup to your page. Note the use of directive `rickshaw`
```markup
```
## **NVD3 Charts**
NVD3 is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you.
{% hint style="info" %}
Please refer to [NVD3 Tutorial](http://nvd3.org/examples/index.html) to learn about the basics of the library
{% endhint %}
**Step one**
Include the plugin stylesheet rickshaw\.min.css.css ``.
```
```
**Step two**
Include the plugin javascript files inside the ``before core template script inclusions, if it's not there already.
```markup
```
**Step three**
Create the markup. Apply the class `line-chart` to get the Pages pre-defined style for NVD3 charts. Use data-attributes to customize the style
```markup
```
Available data attributes:
| `DATA ATTRIBUTE` | `AVAILABLE VALUES` | `DESCRIPTION` |
| ------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------- |
| `data-line-color` | white \| master \| success \| info \| complete \| primary \| warning \| danger | Change the line color of a line chart |
| `data-area-color` | white \| master \| success \| info \| complete \| primary \| warning \| danger | Change the area color of a line chart with area option |
| `data-points` | true \| false | Show/hide point circles |
| `data-point-color` | white \| master \| success \| info \| complete \| primary \| warning \| danger | Change the point color |
| `data-stroke-width` | 1 \| 2 \| 3 | Change the stroke width of a line chart. Values are in pixels |
## **Sparkline Charts**
This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
{% hint style="info" %}
Please refer to [Sparkline Documentation](http://omnipotent.net/jquery.sparkline/#s-about) to learn more about the library
{% endhint %}
**Step one**
Include the plugin javascript files inside the ``before core template script inclusions.
```markup
```
**Step two**
Create the markup.
```markup
```
**Step three**
Apply the plugin. This example renders a basic line chart
```markup
```