Components
Charts

Third-Party Plugins

Tailwind CSS Charts

Charts are graphical representations used to showcase and simplify complex data sets, making information more comprehensible and visually appealing. They vary in types-from line to bar to pie-each highlighting specific data patterns and trends.

Requires Additional Installation

Note that this component requires the use of the third-party Apexcharts plugin.

Learn more

How to use

Install Apexcharts

Install apexcharts via npm

Terminal

                      
                        npm i apexcharts

Add the Apexcharts CSS

Include the CSS <script> near the end of your </head> tag:
<link rel="stylesheet" href="./assets/vendor/apexcharts/dist/apexcharts.css">
HTML
```
                      
                    
```
Add the Apexcharts JavaScript

Include the JavaScript <script> near the end of your </body> tag:
<script src="./assets/vendor/lodash/lodash.min.js"></script> <script src="./assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
HTML
```
                      
                    
```
Certain JavaScript Helpers in Preline UI make use of Lodash plugin. Don't forget to install it, if you haven't done so already: npm i lodash
Add the Preline Helper JavaScript

Include the JavaScript <script> after the helper-apexcharts.js file.
<script src="./assets/vendor/preline/dist/helper-apexcharts.js"></script>
HTML
```
                      
                    
```

Single area chart

Multiple area chart

Income

Outcome

Curved area charts

Use curve: 'smooth' to make the chart lines curved.

Income

Outcome

Single bar chart

Multiple bar charts

Income

Outcome

Single line chart

Multiple line charts

Income

Outcome

Others

Curved line charts

Use curve: 'smooth' to make the chart lines curved.

Income

Outcome

Others

Horizontal bar chart

Doughnut chart

Income

Outcome

Others

Bubble chart

Income

Outcome

Others

Pie chart

Income

Outcome

Others

Small sized sparklines

Chart Types
Inline area chart
Inline bar chart
Inline pie chart
Inline line chart
Inline candles chart

(function () {
                            buildChart('#hs-sparklines-pie-chart', () => ({
                              chart: {
                                width: 30,
                                height: 30,
                                type: 'pie',
                                sparkline: {
                                  enabled: true
                                }
                              },
                              series: [70, 18, 12],
                              labels: ['Direct', 'Organic search', 'Referral'],
                              plotOptions: {
                                pie: {
                                  expandOnClick: false
                                }
                              },
                              stroke: {
                                width: 0
                              },
                              tooltip: {
                                enabled: false
                              },
                              states: {
                                hover: {
                                  filter: {
                                    type: 'none'
                                  }
                                }
                              }
                            }), {
                              colors: ['#3b82f6', '#22d3ee', '#e5e7eb'],
                              stroke: {
                                colors: ['rgb(255, 255, 255)']
                              }
                            }, {
                              colors: ['#3b82f6', '#22d3ee', '#404040'],
                              stroke: {
                                colors: ['rgb(38, 38, 38)']
                              }
                            });
                          })();

Tailwind CSS Charts

Requires Additional Installation

How to use

Install Apexcharts

Add the Apexcharts CSS

Add the Apexcharts JavaScript

Add the Preline Helper JavaScript

Single area chart

Multiple area chart

Multiple area chart (Compare Two Tooltip)

Multiple area chart (Compare Two Tooltip Alternative)

Curved area charts

Single bar chart

Multiple bar charts

Single line chart

Multiple line charts

Curved line charts

Horizontal bar chart

Doughnut chart

Bubble chart

Pie chart

Small sized sparklines

On this page