Test chart for range selector and legend together

Mike Zavarello

by Mike Zavarello

HTML

<div id="container" style="height: 400px; min-width: 600px"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

JavaScript

var chartOptions = {
  legend: {
    enabled: true, 
    align: 'right',
    layout: 'horizontal',
    verticalAlign: 'top',
    //y: 30
  },
  rangeSelector: {
     enabled: true, floating: true, verticalAlign: 'top'
  },
  title: {
    text: 'Test chart for range selector and legend together. This title is very, very long to make sure that the legend and range selector shift down together automatically.'
  },
  subtitle: {
    text: 'This test is to find out how to avoid collisions'
  },
  series: [{
    name: 'Series 1',
    data: [0,50,70,25,30,100]
  }, {
    name: 'Series 2',
    data: [1,45,22,77,78,99]
  }]
};

var chart = new Highcharts.Chart('container', chartOptions);