Chart breaks on breakpoint that is not specified

[karen1au]

Hi, I'm using the responsive option to override some default styling on desktop screens:

responsive: [
          {
            breakpoint: 600,
            options: {
              markers: {
                size: 1.5
              }
            }
          },
          {
            breakpoint: 1024,
            options: {
              dataLabels: {
                style: {
                  fontSize: '13px'
                }
              }
            }
          }
        ]

It works perfectly on the specified breakpoints, however, on screen sizes that are over the biggest specified breakpoint it will break with this error:

Chart is rendering on all screen sizes if I don't include the responsive option.

I was using these versions:

    "apexcharts": "^3.15.3",
    "vue-apexcharts": "^1.5.2",

And I updated to these:

    "apexcharts": "^3.22.2",
    "vue-apexcharts": "^1.6.0",

Both have the same error and breaking behaviour. Am I supposed to move all the default into the responsive option or am I doing it right to just leave them outside? Thanks in advance!

[junedchhipa]

Can you please create a Codepen so I can reproduce quickly?

[karen1au]

I can't recreate the bug, seems like it has something to do with the timing of when series are available to the chart. If I hard code the data instead of fetching it, it works, but it has to be before on mount. Even if I feed in the value on mounted() it throws the same error. However this only happens when I include responsive break.

[junedchhipa]

Ok, can you load an un-minified version of ApexCharts so the error is more readable?

[karen1au]

Thanks for following up! I'm using vue-apecharts module, how should I point it to use the CDN?

[junedchhipa]

Please load apexcharts and vue-apexcharts directly in index.html in your Vue application using

Use these URLs - https://cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.js https://cdn.jsdelivr.net/npm/vue-apexcharts

A sample of loading such a way can be found here - https://github.com/apexcharts/apexcharts.js/blob/master/samples/vue/line/basic-line.html

[Vercadium]

I too encountered this issue after upgrading from 3.20.0 to 3.20.1. I am also using the Vue wrapper and have a rather complex set-up whereby the series is tied to an expensive computed property. It works if I remove the responsive options I have defined.

I have done as @junedchhipa instructed @karen1au to do above and referenced the library in its unminified form from the CDN. Here's where the error points:

The issues https://github.com/apexcharts/vue-apexcharts/issues/287 and https://github.com/apexcharts/react-apexcharts/issues/238 may also be related to this.

[sleleko]

I have too this issue on apexcharts 3.23.1 and using with vue-apexcharts 1.6.0 But all work fine on apexcharts 3.20.0 and using with vue-apexcharts 1.6.0 @junedchhipa do you have any news about this issue ?

[eanavalentin]

We've also encountered this issue, after upgrading to "apexcharts": "^3.24.0" and "vue-apexcharts": "^1.6.0". As a temporary fix, until we decide if we move the updates in production, we've managed to fix the issue by removing breakpoint from responsive entirely.

[sammymhowe]

Also hitting this exact same issue on "apexcharts": "^3.26.0" and "vue-apexcharts": "^1.6.0" 😞

[yzontov]

Same issue on v3.26.0

[kiotokun]

Have the same issue on "apexcharts": "^3.27.2", "vue-apexcharts": "^1.6.1", "vue": "^2.6.12", What i found: if initial series in data is empty array or the same array length as new after update - it's ok. But if new array length is different than previous value it breaks the chart when update the series. If no responsive options specified - works fine, but if specify any breakpoint this issue comes.

Here is codesandbox for reproduce this issue: https://codesandbox.io/s/vue-basic-example-forked-s372i?file=/src/components/Chart.component.vue

As @Vercadium commented, error point on row 6128.

As workaround define chart options as computed property.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Vercadium]

This is still an issue when using vue-apexcharts @ 1.6.2 + apexcharts @ 3.28.3. Removing the chart responsive config option fixes it, but there is an underlying bug here. My project is locked to apexcharts @ 3.19.2 because of this.

[Vercadium]

Decided to take a look into this myself; the commit that caused this was applied for issue #1875.

Reverting this commit fixes the issue (#2056 - the chart breaks entirely) but then leaves #1875 unresolved (the chart does not remove responsive breakpoint options when resized to a larger viewport).

@kiotokun has a reproduction above which might also be of help.

@junedchhipa Does this help point you in the right direction?

[yzontov]

The workaround I am using: responsive: [ { breakpoint: 1000, options: { legend: { position: "bottom" } } }, { breakpoint: 3000, options: { legend: { position: "right" } } } ], Just adding a point for a viewport larger than expected maximum.

[Vercadium]

Just to clarify @yzontov's workaround:

responsive: [
  {
    // This is a 'real' breakpoint
    breakpoint: 960,
    options: {
      // Breakpoint option config
    },
  },
  // Temporary workaround for https://github.com/apexcharts/apexcharts.js/issues/2056
  {
    // 'Fake' breakpoint that will never apply
    breakpoint: 9001,
    options: {}, // You can leave this empty
  },
],

I would still like to see this issue properly resolved though, as using the above workaround opens #1875 again.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Vercadium]

No thanks bot, this issue is still valid 😄

[timaivanov]

this issue is still valid

[Rao-Mudasir]

any update