package.docs.components.charts.mdx Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of core Show documentation
Show all versions of core Show documentation
Premium and Open Source dashboard template with responsive and high quality UI.
The newest version!
---
title: Charts
libs: apexcharts
description: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
---
To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
See also the [ApexCharts](https://apexcharts.com/) documentation.
## Line Chart
Line charts are a typical pictorial representation that depicts trends and behaviors over time.
```html example code centered columns={2} height="25rem"
```
## Area Chart
Area charts are used to represent quantitative variations.
```html example code centered columns={2} height="25rem"
```
## Bar Chart
A bar chart is the best tool for displaying comparisons between categories of data.
```html example code centered columns={2} height="25rem"
```
## Pie Chart
Pie charts are an instrumental visualization tool useful in expressing data and information in terms of percentages, ratio.
```html example code centered columns={2} height="25rem"
```
## Heatmap Chart
Heatmap is a visualization tool that employs color the way a bar chart employs height and width in representing data.
```html example code centered columns={2} height="25rem"
```
## Advanced example
```html example code centered columns={2} height="25rem"
```