Basic bar chart

<!-- Find the JS file for the following chart at: src/js/charts/echarts/examples/basic-bar-chart.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js-->
<div class="echart-basic-bar-chart-example min-h-75"></div>

Horizontal bar chart

<!-- Find the JS file for the following chart at: src/js/charts/echarts/examples/horizontal-bar-chart.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js-->
<div class="echart-horizontal-bar-chart-example min-h-75"></div>

Bar chart with negative value

<!-- Find the JS file for the following chart at: src/js/charts/echarts/examples/bar-negative-chart.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js-->
<div class="echart-bar-negative-chart-example min-h-75"></div>

Series bar chart

<!-- Find the JS file for the following chart at: src/js/charts/echarts/examples/series-bar-chart.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js-->
<div class="echart-series-bar-chart-example min-h-75"></div>

Stacked bar chart

<!-- Find the JS file for the following chart at: src/js/charts/echarts/examples/stacked-bar-chart.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js-->
<div class="echart-stacked-bar-chart-example min-h-87.5"></div>

Stacked horizontal bar chart

<!-- Find the JS file for the following chart at: src/js/charts/echarts/examples/stacked-horizontal-bar-chart.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js-->
<div class="echart-stacked-horizontal-bar-chart-example min-h-87.5"></div>

Bar race chart

<!-- Find the JS file for the following chart at: src/js/charts/echarts/examples/bar-race-chart.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js-->
<div class="echart-bar-race-chart-example min-h-87.5"></div>

Gradient bar chart

<!-- Find the JS file for the following chart at: src/js/charts/echarts/examples/bar-gradient-chart.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js-->
<div class="echart-bar-gradient-chart-example min-h-87.5"></div>

Mixed chart

<!-- Find the JS file for the following chart at: src/js/charts/echarts/examples/bar-line-mixed-chart.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js-->
<div class="echart-bar-line-mixed-chart-example min-h-87.5"></div>

Water fall chart

<!-- Find the JS file for the following chart at: src/js/charts/echarts/examples/bar-waterfall-chart.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js-->
<div class="echart-bar-waterfall-chart-example min-h-87.5"></div>

Bar timeline chart

<!-- Find the JS file for the following chart at: src/js/charts/echarts/examples/bar-timeline-chart.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js-->
<div class="echart-bar-timeline-chart-example min-h-112.5"></div>

Thank you for creating with Phoenix Tailwind2026 ©ThemeWagon

v1.0.0-beta

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize