Collection of free Tailwind CSS chart and graph components from Codepen and other resources.

Related Articles

  1. CSS Charts And Graphs
  2. jQuery Charts And Graphs
Demo image: Analytics Widget - Tailwind CSS + Chart.js

Author

  • Cruip

Links

Made with

  • HTML / CSS / JS

About a code

Analytics Widget - Tailwind CSS + Chart.js

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js, chart.js

Tailwind version: 3.0.0

Demo image: Chart Widget

Author

  • Scott Windon

Links

Made with

  • HTML / CSS / JS

About a code

Chart Widget

TailwindCSS, AlpineJS and ChartJS with date changer and animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: chart.css, materialdesignicons.css, alpine.js, chart.js

Tailwind version: 2.1.4

Demo image: Monthly Revenue 2020. Stacked: Existing - Upgrades - New. Labels: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec.

Author

  • Rob Stinson

Links

Made with

  • HTML / CSS

About a code

Column Chart (Stacked) - with Tailwind CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.2

Demo image: Monthly Revenue 2020. Existing - Upgrades - New. Labels: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec.

Author

  • Rob Stinson

Links

Made with

  • HTML / CSS

About a code

Column Chart - with Tailwind CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.2

Demo image: Tailwind & AlpineJS: Analytics Card

Author

  • Scott Windon

Links

Made with

  • HTML / CSS / JS

About a code

Tailwind & AlpineJS: Analytics Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: materialdesignicons.css, alpine.js, countup.js

Tailwind version: 1.6.0

Demo image: Tailwind & AlpineJS: Stock Chart

Author

  • Scott Windon

Links

Made with

  • HTML / CSS / JS

About a code

Tailwind & AlpineJS: Stock Chart

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: materialdesignicons.css, chart.css, alpine.js, chart.js

Tailwind version: 1.6.0

Demo image: Tailwind & ChartJS: Dashboard Statistic Cards

Author

  • Scott Windon

Links

Made with

  • HTML / CSS / JS

About a code

Tailwind & ChartJS: Dashboard Statistic Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: chart.css, chart.js

Tailwind version: 1.6.0

Demo image: Product Sales. Monthly Average. Sales. ChartData: 112, 10, 225, 134, 101, 80, 50, 100, 200. Labels: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep.

Author

  • mithicher

Links

Made with

  • HTML / CSS / JS

About a code

Bar Chart with TailwindCSS and AlpineJS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 1.4.6