mirror of
https://github.com/tabler/tabler.git
synced 2026-08-30 22:01:28 +04:00
102 lines
4.2 KiB
Plaintext
102 lines
4.2 KiB
Plaintext
---
|
|
title: Chart
|
|
docs-libs: [apexcharts]
|
|
summary: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
|
|
description: Build interactive line, bar, pie, and other charts with ApexCharts. Copy ready-to-use configurations styled to match Tabler.
|
|
related: [/ui/components/countup, /ui/components/trending]
|
|
---
|
|
|
|
import Example from '@components/Example.astro'
|
|
import Chart from '@shared/components/demo/Chart.astro'
|
|
import CodeDocs from '@components/CodeDocs.astro';
|
|
|
|
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 an essential tool for visualizing data trends over time. They are particularly useful for representing continuous data, such as stock prices, website traffic, or user activity. Below is an example of a line chart showcasing session duration, page views, and total visits:
|
|
|
|
<Example>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<Chart chartId="demo-line" label="Line chart example" height={15} />
|
|
</div>
|
|
</div>
|
|
</Example>
|
|
|
|
## Area chart
|
|
|
|
Area charts are ideal for representing cumulative data over time. They add visual emphasis to trends by filling the space under the line, making it easier to compare values. Here's an example of an area chart with smooth transitions and data from two series:
|
|
|
|
<Example>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<Chart chartId="demo-area" label="Area chart example" height={15} />
|
|
</div>
|
|
</div>
|
|
</Example>
|
|
|
|
## Bar chart
|
|
|
|
Bar charts are highly effective for comparing data across different categories. They provide a clear and concise way to visualize differences in values, making them perfect for analyzing categorical data. Here's an example of a bar chart with stacked bars for enhanced readability:
|
|
|
|
<Example>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<Chart chartId="demo-bar" label="Bar chart example" height={15} />
|
|
</div>
|
|
</div>
|
|
</Example>
|
|
|
|
## Pie chart
|
|
|
|
Pie charts are a simple and effective way to visualize proportions and ratios. They are commonly used to represent data as percentages of a whole, making them ideal for displaying parts of a dataset. Below is an example of a pie chart showcasing distribution across categories:
|
|
|
|
<Example>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<Chart chartId="demo-pie" label="Pie chart example" height={15} />
|
|
</div>
|
|
</div>
|
|
</Example>
|
|
|
|
## Heatmap chart
|
|
|
|
Heatmaps provide a graphical representation of data where individual values are represented by color intensity. They are particularly useful for identifying patterns or anomalies within large datasets. Here's an example of a heatmap chart to visualize data distributions:
|
|
|
|
<Example>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<Chart chartId="demo-heatmap" label="Heatmap chart example" height={15} />
|
|
</div>
|
|
</div>
|
|
</Example>
|
|
|
|
## Advanced example
|
|
|
|
For more complex data visualizations, you can create advanced charts with multiple series and custom configurations. Below is an example of a social media referrals chart combining data from Facebook, Twitter, and Dribbble:
|
|
|
|
<Example>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<Chart chartId="social-referrals" label="Social referrals chart" height={15} />
|
|
</div>
|
|
</div>
|
|
</Example>
|
|
|
|
## Legend key
|
|
|
|
ApexCharts draws its own legend, but you can also build a plain-HTML legend next to a chart's title — for example to label the series above the chart instead of below it. Add a `legend` span before each label and color it with a `bg-*` utility class.
|
|
|
|
<Example>
|
|
<div class="d-flex align-items-center gap-3"> <div class="d-flex align-items-center gap-2"> <span class="legend bg-primary"></span> <span class="text-secondary">This year</span> </div> <div class="d-flex align-items-center gap-2"> <span class="legend bg-secondary"></span> <span class="text-secondary">Last year</span> </div> </div>
|
|
</Example>
|
|
|
|
## SCSS variables
|
|
|
|
Use these SCSS variables to customize charts. The default values are:
|
|
|
|
<CodeDocs name="chart-variables" file="core/scss/_variables.scss" />
|