Responsive

ApexCharts supports a responsive array that applies different configuration overrides at specified viewport breakpoints, letting a single chart adapt its layout, legend position, height, and other options to any screen size.

How responsive overrides work

Each entry in the responsive array specifies a breakpoint (in pixels) and an options object. When the viewport width falls below the breakpoint, ApexCharts deep-merges those options on top of the base config. You only need to list the keys that change; everything else inherits from the base config. When the viewport widens past the breakpoint again, those options are removed and the chart goes back to its base values (from 8.2.0; earlier versions could keep the narrow layout).

const options = {
  chart: {
    type: 'bar',    // base type: horizontal bar (plotOptions.bar.horizontal: true)
    height: 400
  },
  plotOptions: {
    bar: { horizontal: true }
  },
  legend: {
    position: 'right'   // sidebar legend on wide screens
  },
  series: [
    {
      name: 'Quarterly sales',
      data: [42000, 58000, 39000, 71000]
    }
  ],
  xaxis: {
    categories: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  responsive: [
    {
      breakpoint: 768,   // applies when viewport width < 768 px
      options: {
        // Switch to a vertical column chart on small screens
        chart: {
          type: 'bar',
          height: 280
        },
        plotOptions: {
          bar: { horizontal: false }
        },
        // Move the legend below the chart where there is room
        legend: {
          position: 'bottom'
        }
      }
    }
  ]
}

const chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

The demo below uses the same pattern with a 1000 px breakpoint. If you are on a desktop, resize the browser window narrower than 1000 px to see the chart switch from a horizontal bar to a column chart with the legend moving to the bottom, and wider again to see it switch back.

---

Reducing chart height at mobile breakpoint

Any config key can appear inside options. A common use is reducing chart.height so the chart does not take up the entire viewport on a phone.

const options = {
  chart: {
    type: 'line',
    height: 420
  },
  series: [
    {
      name: 'Active users',
      data: [310, 480, 390, 620, 550, 740, 680]
    }
  ],
  xaxis: {
    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  responsive: [
    {
      breakpoint: 480,   // phones
      options: {
        chart: {
          height: 260    // only the height changes; type and series are unchanged
        },
        legend: {
          position: 'bottom',
          offsetY: 4
        }
      }
    }
  ]
}

const chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

You can stack multiple breakpoint entries in the responsive array. ApexCharts applies all entries whose breakpoint value exceeds the current viewport width, so narrower screens accumulate overrides from wider breakpoints too. Where two matching entries set the same option, the smaller breakpoint wins, whatever order the entries are listed in.

An updateOptions() call that sets an option a matching breakpoint also sets does not override it while the breakpoint applies; the new value takes effect once the breakpoint stops applying.

To see all available options for creating a responsive chart, view the responsive configuration reference.