Y Axis values are displayed but the graph does not appear

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.
In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.
Have a nice day! 🍵

This should have something to do with the way you import ECharts (maybe something wrong with webpack config). The option itself has no problem.

In the webpack config, I define a Provider Plugin as

new Provider Plugin {
     echarts: 'echarts'

Then in an angular component, import the module as:

import echarts from 'echarts';

Even I tried using angular Adapter by xieziyu.github.io but still getting the same issue.

Please try with an un-minified version and find what function throws this error in your code.

I tried using the un-minified version of echarts, but still getting the same error in console in the production build. I downloaded the js file, created one directive and followed the starter tutorial https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Get%20Started%20with%20ECharts%20in%205%20minutes

import {
  Directive, ElementRef, Input, OnInit, HostBinding, OnChanges, OnDestroy
} from '@angular/core';

import { Subject, Subscription } from 'rxjs';

import * as echarts from '../../../assets/echarts.js';
// import ECharts = echarts.ECharts;
// import EChartOption = echarts.EChartOption;
import { distinctUntilChanged } from 'rxjs/operators';

  selector: '[ts-chart]',
export class EchartsDirective implements OnChanges, OnInit, OnDestroy {

  @Input('ts-chart') public options: any;

  public elHeight: number;
  private chart: any;
  private sizeCheckInterval = null;
  private reSize$ = new Subject<string>();
  private onResize: Subscription;

  constructor(private el: ElementRef) {
    this.chart = echarts.init(this.el.nativeElement, 'vintage');

  public ngOnChanges(changes) {
    if (this.options) {

  public ngOnInit() {
    this.sizeCheckInterval = setInterval(() => {
    }, 100);
    this.onResize = this.reSize$.pipe(distinctUntilChanged())
      .subscribe((_) => this.chart.resize());

    this.elHeight = this.el.nativeElement.offsetHeight;
    if (this.elHeight < 300) {
      this.elHeight = 300;

  public ngOnDestroy() {
    if (this.sizeCheckInterval) {
    if (this.onResize) {

the echarts file I also tried using the one generated in dist folder of this project.
Error in production build :
vendors~main.894cc1548d12aa81550a.chunk.js:1 ERROR TypeError: Cannot read property '__�ec_inner_8_0.67350' of undefined at 12.59db3dd3c1b3469293bb.chunk.js:1 at Dp (12.59db3dd3c1b3469293bb.chunk.js:1) at Ip (12.59db3dd3c1b3469293bb.chunk.js:1) at Ag.getViewLabels (12.59db3dd3c1b3469293bb.chunk.js:1) at 12.59db3dd3c1b3469293bb.chunk.js:1 at Zg.axisTickLabel (12.59db3dd3c1b3469293bb.chunk.js:1) at Zg.add (12.59db3dd3c1b3469293bb.chunk.js:1) at Array.forEach (<anonymous>) at E (12.59db3dd3c1b3469293bb.chunk.js:1) at n.render (12.59db3dd3c1b3469293bb.chunk.js:1) kd @ vendors~main.894cc1548d12aa81550a.chunk.js:1 t.handleError @ vendors~main.894cc1548d12aa81550a.chunk.js:1 (anonymous) @ vendors~main.894cc1548d12aa81550a.chunk.js:1 e.invoke @ vendors~polyfills.7b1548f9b620e9ab49bc.chunk.js:1 r.run @ vendors~polyfills.7b1548f9b620e9ab49bc.chunk.js:1 t.runOutsideAngular @ vendors~main.894cc1548d12aa81550a.chunk.js:1 t.tick @ vendors~main.894cc1548d12aa81550a.chunk.js:1 (anonymous) @ vendors~main.894cc1548d12aa81550a.chunk.js:1 e.invoke @ vendors~polyfills.7b1548f9b620e9ab49bc.chunk.js:1 onInvoke @ vendors~main.894cc1548d12aa81550a.chunk.js:1 e.invoke @ vendors~polyfills.7b1548f9b620e9ab49bc.chunk.js:1 r.run @ vendors~polyfills.7b1548f9b620e9ab49bc.chunk.js:1 t.run @ vendors~main.894cc1548d12aa81550a.chunk.js:1 next @ vendors~main.894cc1548d12aa81550a.chunk.js:1 r @ vendors~main.894cc1548d12aa81550a.chunk.js:1 t.__tryOrUnsub @ vendors~main.894cc1548d12aa81550a.chunk.js:1 t.next @ vendors~main.894cc1548d12aa81550a.chunk.js:1 o._next @ vendors~main.894cc1548d12aa81550a.chunk.js:1 o.next @ vendors~main.894cc1548d12aa81550a.chunk.js:1 t.next @ vendors~main.894cc1548d12aa81550a.chunk.js:1 t.emit @ vendors~main.894cc1548d12aa81550a.chunk.js:1 Nf @ vendors~main.894cc1548d12aa81550a.chunk.js:1 onHasTask @ vendors~main.894cc1548d12aa81550a.chunk.js:1 e.hasTask @ vendors~polyfills.7b1548f9b620e9ab49bc.chunk.js:1 e._updateTaskCount @ vendors~polyfills.7b1548f9b620e9ab49bc.chunk.js:1 r._updateTaskCount @ vendors~polyfills.7b1548f9b620e9ab49bc.chunk.js:1 r.runTask @ vendors~polyfills.7b1548f9b620e9ab49bc.chunk.js:1 F @ vendors~polyfills.7b1548f9b620e9ab49bc.chunk.js:1 c.invokeTask @ vendors~polyfills.7b1548f9b620e9ab49bc.chunk.js:1 i @ vendors~polyfills.7b1548f9b620e9ab49bc.chunk.js:1 b @ vendors~polyfills.7b1548f9b620e9ab49bc.chunk.js:1

Checkout what's undefined.

Hi. I filtered the echart.js file in minimizer so that it does not get minified/compressed in production build and it works fine. The following method was returning undefined:

function makeCategoryLabelsActually(axis, labelModel) {
    var labelsCache = getListCache(axis, 'labels');
    var optionLabelInterval = getOptionCategoryInterval(labelModel);
  ----->  var result = listCacheGet(labelsCache, **optionLabelInterval);

    if (result) {
      return result;
  function listCacheGet(cache, key) {
    for (var i = 0; i < cache.length; i++) {
      if (cache[i].key === key) {
   ----->     return cache[i].value;

@Ovilia Can you suggest what could be the issue with production build?

I cannot reproduce the error with the option provided. It should be a problem of your own environment, which I'm afraid I could not offer any help.

Thanks for your reply. Can you please suggest a recommended webpack configuration. I tried looking up on Google/SO but could not find anything relevant?

This issue is closed due to not being active. Please feel free to open it again (for the author) or create a new one and reference this (for others) if you have further questions.