merge with noMerge=true

[preraksola]

Is there a way to pass noMerge=true when updating the data using [merge]? I tried updating the data by getting the chart instance and then calling setOption(newOptions, true) on it, but in that case, I am getting the below error:

vendor.js:80542 ERROR TypeError: Cannot read property 'get' of undefined at ma (vendor.js:154240) at cartesian2d (vendor.js:154240) at ga (vendor.js:154240) at dl (vendor.js:154240) at i.getInitialData (vendor.js:154240) at init (vendor.js:154240) at i. (vendor.js:154240) at Array.forEach () at d (vendor.js:154240) at i. (vendor.js:154240)

My requirement it update (not merge) the chart with new data upon a button click.

[xieziyu]

@preraksola I think you need to use [merge] = "newOptions" in your case. It's the same as calling chart.setOption(newOptions, true)

[preraksola]

@xieziyu The documentation of this directive says the opposite. Also, in the source code, nothing passed as a second parameter to setOption method, so the default value for noMerge would be false as per the ECharts documentation.

[xieziyu]

@preraksola Sorry about that. It was a mistake. I actually wanted to say [options] = "newOptions". You may need manually update the whole newOptions object.

[mehmetific]

Hi, is not there anyway to pass notMerge=false with updateOptions? Thanks

   <div echarts [options]="options" [merge]="updateOptions" class="demo-chart"></div>

  this.updateOptions = {
        series: [{
          data: this.data
        }]
      };

[mehmetific]

I have just find out that using echartsInsance, we can do that.

 onChartInit(ec) {
    this.echartsInstance = ec;
  }

and later in order to update:

this.echartsInstance.setOption(this.csvGraphOptions, false);

this.csvGraphOptions would be modified options, in order to modify only the data, I have set

this.csvGraphOptions.series[0].data = myNewData;

Thanks

[xieziyu]

@mehmetific Glad to know that you've found your own solution. But I think it's better to use[options], and you can also use a new updateOptions. Here is an example:

<div echarts [options]="options" class="demo-chart"></div>

// If you modify series only
const updateOptions = {
  series: [{
    data: myNewData
  }]
};
this.options = { ...this.options, ...updateOptions }

So you don't need to care about the echartsInstance, and angular helps you do detect changes.

[kerwin-ly]

I encountered the same issue.Is it possible to use notMerge = true? @xieziyu

[xieziyu]

@kerwin-ly I'm considering adding an [update] interface, which means merging the updated option into the base option but overriding the same field. Did you ask about the same thing when you said notMerge = true? Otherwise, you can just use [options] interface.

[kerwin-ly]

@xieziyu I try to fix a compatible problem by using notMerge = true.It works for me.

clear(): void {
    if (this.chartInstance) {
      this.chartInstance.clear();
      this.chartInstance.setOption(this.graphOptions, true);
    }
  }

But I don't think it's a good idea.Please tell me if you have a good way to resolve it.Thanks in advance. https://github.com/apache/incubator-echarts/issues/6202 Here is the issue

[xieziyu]

It seems like echarts have a bug. I've no idea about it.

[mhamri]

it's bug in ngx-echart

https://github.com/xieziyu/ngx-echarts/blob/69729d488efcf052812ba79354524fc9eccf2f3c/projects/ngx-echarts/src/lib/ngx-echarts.directive.ts#L104

here instead of set the merge as second params, it's setting it as first param. it's wrong

a merge has this type

/** @see https://echarts.apache.org/en/api.html#echartsInstance.setOption */
export type MergeType = { notMerge?: boolean, replaceMerge?: string | string[], lazyUpdate?: boolean, silent?: boolean, transition?: any } | boolean

and here it's hardcoding it to true, but should check if what is the merge latest value

https://github.com/xieziyu/ngx-echarts/blob/69729d488efcf052812ba79354524fc9eccf2f3c/projects/ngx-echarts/src/lib/ngx-echarts.directive.ts#L209