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

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

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

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