## 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>All the charts of Echart’s are responsive by default in Phoenix. Echart’s responsive is working from echartSetOption function in <code>src/js/theme/charts/echarts/echarts-utils.js</code> file (If you are not using gulp based workflow, you can find the function in <code>public/assets/js/phoenix.js</code>). You can pass responsive options object as 4th parameter of <code>echartSetOption</code> function. The object will consist the styles of different breakpoints like xs, sm, md, lg, xl, xxl. For example: Here the options will work above the sm(576px) screen.</p><pre class="scrollbar mb-5"><code class="lang-html">const responsiveOptions = {
      sm: {
        yAxis: {
          show: true
        },
        grid: {
          left: 100
        }
      }
    };</code></pre><!-- Find the JS file for the following chart at: src/js/theme/charts/echarts/crm-lead-conversion.js-->
    <!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/crm-dashboard.js-->
    <div class="echart-lead-conversion" style="min-height: 250px;"></div>

All the charts of Echart’s are responsive by default in Phoenix. Echart’s responsive is working from echartSetOption function in `src/js/theme/charts/echarts/echarts-utils.js` file (If you are not using gulp based workflow, you can find the function in `public/assets/js/phoenix.js`). You can pass responsive options object as 4th parameter of `echartSetOption` function. The object will consist the styles of different breakpoints like xs, sm, md, lg, xl, xxl. For example: Here the options will work above the sm(576px) screen.

    const responsiveOptions = {
      sm: {
        yAxis: {
          show: true
        },
        grid: {
          left: 100
        }
      }
    };

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