apexcharts.js: Chart breaks on breakpoint that is not specified

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!

About this issue

Original URL
State: open
Created 4 years ago
Comments: 20 (3 by maintainers)

Most upvoted comments

No thanks bot, this issue is still valid 😄

Vercadium on Nov 30, 2021

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.

Vercadium on Sep 29, 2021

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.

yzontov on Sep 26, 2021

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 on Sep 24, 2021