## How to use

A powerful, interactive charting and visualization library for browser.

Documentation for EChart

#### JavaScript

    <pre><code class="language-html">&lt;script src=&quot;vendors/echarts/echarts.min.js&quot;&gt;&lt;/script&gt;</code></pre>

    <script src="vendors/echarts/echarts.min.js"></script>

#### Getting Started

    <h5 class="mb-3">For gulp based workflow:</h5>
    <p>To add a new chart using Echarts, follow the steps below: </p>
    <ul>
      <li>Add an HTML element with a unique class name. For example:
        <pre><code class="language-html"> &lt;div class=&quot;echart-total-sales-chart&quot;&gt;&lt;/div&gt;</code></pre>
      </li>
      <li>Give a height of the chart element in CSS</li>
      <li>Add a JavaScript file into <code>src/js </code>directory and write a function to initialize the Echart with the required options.<br /><strong>Tips: </strong>Select any chart of Phoenix which you want to duplicate, copy the file and replace the class name and options.</li>
      <li>import and call the function into the corresponding javascript file of the current page. For example: <code>ecommerce-dashboard.js, </code><code>projectmanagement-dashboard.js, </code><code>[your-custom-page].js </code>etc.</li>
    </ul>
    <h5 class="mt-5 mb-3">If you're not using gulp: </h5>
    <p>If you are not using gulp based workflow and want to add Echart, Follow the steps below:</p>
    <ul>
      <li>Add an HTML element with a unique class name. For example:
        <pre><code class="language-html"> &lt;div class=&quot;echart-total-sales-chart&quot;&gt;&lt;/div&gt;</code></pre>
      </li>
      <li>Give a height of the chart element in CSS</li>
      <li>Write a function to initialize the echart with the class name added in the first step and pass the necessary options into the corresponding javascript file of the current page, such as <code>public/assets/js/ecommerce-dashboard.js, </code><code>public/assets/js/projectmanagement-dashboard.js, </code><code>public/assets/js/[your-custom-page].js </code>etc.<br /><strong>Tips: </strong>Select the chart you want to duplicate and copy the chart's code from the corresponding javascript file or <code>public/assets/js/echart-example.js</code>. Then place the code bottom of your selected js file, for example, <code>public/assets/js/ecommerce-dashboard.js, </code><code>public/assets/js/projectmanagement-dashboard.js, </code>or <code>public/assets/js/[your-custom-page].js </code>file and replace the class name and the options.</li>
      <li>Call the function you made in previous step.</li>
    </ul>

##### 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-total-sales-chart"></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 Phoenix which you want to duplicate, copy the file and replace the class name and options.
- import and call the function into the corresponding javascript file of the current page. For example: `ecommerce-dashboard.js,` `projectmanagement-dashboard.js,` `[your-custom-page].js` etc.

##### 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-total-sales-chart"></div>

- Give a height of the chart element in CSS
- Write a function to initialize the echart with the class name added in the first step and pass the necessary options into the corresponding javascript file of the current page, such as `public/assets/js/ecommerce-dashboard.js,` `public/assets/js/projectmanagement-dashboard.js,` `public/assets/js/[your-custom-page].js` etc.
  Tips: Select the chart you want to duplicate and copy the chart's code from the corresponding javascript file or `public/assets/js/echart-example.js`. Then place the code bottom of your selected js file, for example, `public/assets/js/ecommerce-dashboard.js,` `public/assets/js/projectmanagement-dashboard.js,` or `public/assets/js/[your-custom-page].js` file and replace the class name and the options.
- Call the function you made in previous step.

#### Responsive

    <p class="mb-0">To responsive Echarts just add <code> </code>in your dom element. Phoenix will take the <code>true </code>value and will resize the charts when container size changes.</p>

To responsive Echarts just add `` in your dom element. Phoenix 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 Phoenix, 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="echart-tab-example 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="tab" data-bs-target="#bar-chart" type="button" role="tab" aria-controls="bar-chart" aria-selected="false">Bar Chart</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="line-charts-tab" data-bs-toggle="tab" 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-projection-actual" style="height: 300px" 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-total-sales-chart" style="height: 300px" data-echart-tab="data-echart-tab"></div>
      </div>
    </div>

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize