How to use

A powerful, interactive charting and visualization library for browser.

Documentation for EChart
Javascript
<script src="vendors/echarts/echarts.min.js"></script>
Getting Started
For gulp based workflow:

To add a new chart using Echarts, follow the steps below:

  • Add an HTML element with a unique class name. For example:
    <div class="echart-bar-top-products" data-echart-responsive="true"></div>
  • Give a height of the chart element in CSS
  • Add a JavaScript file into src/js directory and write a function to initialize the Echart with the required options.
    Tips: Select any chart of Falcon which you want to duplicate, copy the file and replace the class name and options.
  • Import and call the function into src/js/theme file.
If you're not using gulp:

If you are not using gulp based workflow and want to add Echart, Follow the steps below:

  • Add an HTML element with a unique class name. For example:
    <div class="echart-bar-top-products" data-echart-responsive="true"></div>
  • Give a height of the chart element in CSS
  • Write a function to the public/assets/js/theme.js file to initialize the echart with the class name added in the first step and pass the required options.
    Tips: Select the chart you want to duplicate and copy the code of the chart from public/assets/js/theme.js or public/assets/js/echart-example.js. Then place the code bottom of the public/assets/js/theme.js file and replace the class name and the options.
  • Call the function you made in previous step.
Responsive

To responsive Echarts just add data-echart-responsive="true" in your dom element. Falcon will take the true value and will resize the charts when container size changes.

Echart inside a Tab

To set any echarts inside Bootstrap tab component in Falcon, follow the steps below:

  • Add data-tab-has-echart attribute to the .nav-tab element.
  • Then add data-echart-tab attribute to the Echart element.

By following these steps multiple echart can be added in a tab or multiple tabs with Echarts also be placed.

<ul class="nav nav-tabs mb-3" id="echart-tab-example" role="tablist" data-tab-has-echarts="data-tab-has-echarts">
  <li class="nav-item" role="presentation"><button class="nav-link active" id="bar-chart-tab" data-bs-toggle="pill" data-bs-target="#bar-chart" type="button" role="tab" aria-controls="bar-chart" aria-selected="true">Bar Chart</button></li>
  <li class="nav-item" role="presentation"><button class="nav-link" id="line-charts-tab" data-bs-toggle="pill" data-bs-target="#line-charts" type="button" role="tab" aria-controls="line-charts" aria-selected="false">Line Chart</button></li>
</ul>
<div class="tab-content" id="echart-tab-example-content">
  <div class="tab-pane fade show active" id="bar-chart" role="tabpanel" aria-labelledby="bar-chart-tab">
    <div class="echart-bar-top-products" data-echart-responsive="true" data-echart-tab="data-echart-tab"></div>
  </div>
  <div class="tab-pane fade" id="line-charts" role="tabpanel" aria-labelledby="line-charts-tab">
    <div class="echart-line-total-sales" data-echart-responsive="true" data-echart-tab="data-echart-tab"></div>
  </div>
</div>

Thank you for creating with Falcon |
2024 © Themewagon

v3.21.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.


RTL Mode

Switch your language direction

RTL Documentation

Fluid Layout

Toggle container layout system

Fluid Documentation

Navigation Position

Select a suitable navigation system for your web application


Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize