Responsive Design

responsive-options.ts

const options1 = {
  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        },
        yAxis: {
          labels: {
            align: 'left',
            x: 0,
            y: -5
          }
        }
      }
    }]
  }
};

const option2 = {
  chart: {
    marginLeft: 70,
    marginRight: 40,
    height: '60%' // Relative to container
  },
  responsive: {
    rules: [{
      condition: {
        minWidth: 768 // tablet and desktop
      },
      chartOptions: {
        chart: {
          height: '400px' // Fixed height for larger screens
        }
      }
    }]
  }
};