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.

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 exactly this pattern. If you are on a desktop, resize the browser window narrower than 768 px to see the chart switch from a horizontal bar to a column chart with the legend moving to the bottom.

---

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 evaluates them in order and applies all entries whose breakpoint value exceeds the current viewport width, so narrower screens accumulate overrides from wider breakpoints too.

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