### 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>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### 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