Apexcharts.js: chart.updateSeries() doesn't update X Axis.

[GalacticSun]

I load in new data but the X axis values (the vertical values representing, in my case, price data values) don't update according to the new data. Am I doing something wrong? Thanks.

[GeoAbbey]

I'd appreciate if this issue can be addressed. I'm also facing the same issue and have a couple of folks experiencing such as well.

[junedchhipa]

Can you create a codepen demo for what you're experiencing?

[GeoAbbey]

I will do that right away and share as soon as possible.

Thanks

[GeoAbbey]

@junedchhipa Here is the codepen:

https://codepen.io/GeoAbbey/pen/BbKQYY

I look forward to your solution. Thanks

[junedchhipa]

That's a serious one! I will look into it asap, thanks for reporting.

[GeoAbbey]

That's a serious one! I will look into it asap, thanks for reporting.

Thanks boss. I will be expecting your response soon.

[junedchhipa]

Well, no. That was not a bug in the chart. You forgot to provide chart.id in the main configuration.
Check the codepen - https://codepen.io/apexcharts/pen/xBVgRq

The exex() function expects a chartID, not DOM element :)

I will update the docs to make it clear to avoid confusion for other users.

[GeoAbbey]

Thanks so much @junedchhipa. I will effect it in my Vue app and give you feedback soon enough

[GeoAbbey]

@junedchhipa, the following is the screenshot of the error message I got when I implemented the same thing in my Vue app.

[junedchhipa]

You don't need to call exec() method in Vue
If you update the props passed to that <apexchart> component, it should update series and options automatically.

Can you create a codesandbox example? Please use this Vue template - https://codesandbox.io/s/pwwz8009n0

Also, please specify which ApexCharts version you have used in your Vue app.

[GeoAbbey]

You don't need to call exec() method in Vue
If you update the props passed to that <apexchart> component, it should update series and options automatically.

Can you create a codesandbox example? Please use this Vue template - https://codesandbox.io/s/pwwz8009n0

Also, please specify which ApexCharts version you have used in your Vue app.

On it

[GeoAbbey]

Here is the Codesandbox link:

https://codesandbox.io/s/l7kwz0ow4m

[GeoAbbey]

You don't need to call exec() method in Vue
If you update the props passed to that <apexchart> component, it should update series and options automatically.

Can you create a codesandbox example? Please use this Vue template - https://codesandbox.io/s/pwwz8009n0

Also, please specify which ApexCharts version you have used in your Vue app.

@junedchhipa When I removed exec() and tried to change the data directly, I got the same error message in my Vue app.

[junedchhipa]

I have updated versions ([email protected] and [email protected])
Also, added import ApexCharts from 'apexcharts' at the top.

This has fixed the issue.
Codesandbox - https://codesandbox.io/s/pknk9j097x

[GeoAbbey]

Wow! This worked like magic.

Thank you so much. It means a lot to me.

[GeoAbbey]

I have updated versions ([email protected] and [email protected])
Also, added import ApexCharts from 'apexcharts' at the top.

This has fixed the issue.
Codesandbox - https://codesandbox.io/s/pknk9j097x

One more thing. I don't know if you noticed that there is a mismatch of x-axis label and the chart area is clipped at both sides.

I tried to fix these by following the steps below:

1. I set tickAmount: 'dataPoints', but it didn't work.
2. I set tickPlacement: 'on', but it brought back the initial error you fixed.

I will appreciate if you can help look into this issue as well. Thanks

[junedchhipa]

It seems like a bug. Been trying for an hour, but doesn't seems fixable easily.
I will update this thread when the bug is fixed.

[GeoAbbey]

Alright. Thanks a bunch

[GeoAbbey]

It seems like a bug. Been trying for an hour, but doesn't seems fixable easily.
I will update this thread when the bug is fixed.

Hello @junedchhipa
Have you found any way around the bug?
Our project is apparently on hold now because the project solely depends on the chart which we do not plan to change.
Please help us look into it. Thanks

[junedchhipa]

Can you please try v3.6.3 ?

[GeoAbbey]

Alright. I will try it out and give you feedback soon.
Thanks for your quick response.

[GeoAbbey]

Can you please try v3.6.3 ?

Thank you so much, boss. Everything is working so well now.
Consider me as one of your biggest fan.

[GeoAbbey]

Hi @junedchhipa

I have been enjoying the solution you provided on this issue until I tried to apply it to a bar chart with multiple data, and the problem reappeared.

The following is the codesandbox link to it: https://codesandbox.io/s/l7kwz0ow4m

Kindly help check it out. Thanks

[junedchhipa]

You had a configuration error in updateSeries method.
I have updated series directly in updateOptions method to avoid an additional call.

ApexCharts.exec("chart1", "updateOptions", {
  series: [{
      name: "Series1",
      data: [51, 42, 109, 38, 47]
    },
    {
      name: "Series2",
      data: [56, 90, 12, 32, 44]
    },
    {
      name: "Series3",
      data: [22, 43, 21, 100, 56]
    }
  ],
  xaxis: {
    categories: ["2015", "2016", "2017", "2018", "2019"]
  }
});

Here is the update demo - https://codesandbox.io/s/vue-issue-with-x-axis-category-1h964

[beisong7]

i took a different approach and got it to work using the chart variable

``js function changeData() { console.log('change data called') chart.updateOptions( { xaxis: { categories: ["A", "B", "C"] } }); chart.updateSeries([ { data: [32, 44, 31] } ]) }

[himanshukk81]

 chart.updateOptions( {
    xaxis: {
      categories: ["A", "B", "C"]
    }
  });
  chart.updateSeries([
    {
      data: [32, 44, 31]
    }
  ])

Can you please try v3.6.3 ?

i took a different approach and got it to work using the chart variable

function changeData() {
  console.log('change data called')
  chart.updateOptions( {
    xaxis: {
      categories: ["A", "B", "C"]
    }
  });
  chart.updateSeries([
    {
      data: [32, 44, 31]
    }
  ])
}`

Thanku So much this save my one day.

[ssergiorivera30]

Final solution

https://stackoverflow.com/a/65821013/11302398

[mrabaev48]

this.chart?.exec('customerChart', 'updateOptions', {
xaxis: {
categories: options.xaxis.categories
}
})

  it doesn't work...
  I stored chart instance in a variable. When I tried update options I got an error:

  "[Vue warn]: Error in v-on handler (Promise/async): "TypeError: _a.exec is not a function""

  Could somebody give any tips?

[krishnadavuluri]

I am using grouped bar chart in react.
Parent component is sending different data on click of 3 different button to child component (which renders apex chart).
Chart is responding only two times but when I am consoling data , data is correct but not shown in the chart.
If you could solve this is issue would be great help for me.
Thanks