title: Improve highcharts performance for large amounts of data
body: <p>I am trying to get a larger amount of data. Sample data is below</p>
  
  <pre><code>1850/01   -0.845   -0.922   -0.748   -1.038   -0.652   -1.379   -0.311   -1.053   -0.636   -1.418   -0.272
  1850/02   -0.043   -0.113    0.047   -0.244    0.159   -0.613    0.528   -0.260    0.177   -0.653    0.569
  1850/03   -0.698   -0.794   -0.633   -0.891   -0.506   -1.123   -0.274   -0.910   -0.495   -1.174   -0.229
  ……….
  2016/12    0.795    0.746    0.828    0.756    0.834    0.586    1.005    0.731    0.848    0.575    1.010
  2017/01    1.025    0.977    1.067    0.983    1.068    0.786    1.265    0.963    1.084    0.778    1.271
  2017/02    1.151    1.098    1.198    1.112    1.191    0.957    1.346    1.089    1.208    0.946    1.352
  </code></pre>
  
  <p>which starts from 1850 until 2017 and every month. I am processing this dataset to use it in Highcharts like this</p>
  
  <pre><code>$.each(lines, function(index, row) {
    var cells = row.split(','),
    series = {
      type: 'line',
      data:[]
    };
  
    $.each(cells, function(itemNo, item) {
      if (itemNo == 0) {
        series.name = item;
      } else {
        series.data.push(parseFloat(item));
      }
    });
  
    data.push(series);
  });
  </code></pre>
  
  <p>And I use it in following way</p>
  
  <pre><code>chart = $('#container').highcharts({
    chart: {
      polar: true
    },
    series: data
  });
  </code></pre>
  
  <p>This does work however, it is really really slow. How can I improve/enhance its performance so that I the highcharts gets loaded quickly without freezing the browser?</p>
  
  <p><strong>UPDATE</strong>
  Here is my xAxis</p>
  
  <pre><code>xAxis: {
          tickInterval: 1,
          min: 0,
          max: 12,
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      },
  </code></pre>
  
  <p><strong>UPDATE 2</strong></p>
  
  <pre><code>yAxis: {
          min: -1,
          max: 2.2,
          endOnTick: false,
          title: {
              text: 'Temperature (°C)'
          },
          plotLines: [{
              value: 2,
              width: 1,
              label: {
                  text: '2°C',
                  align: 'right',
                  y: 2
              },
              color: 'red'
          }, {
              value: 1.5,
              width: 1,
              label: {
                  text: '1.5°C',
                  align: 'right',
                  y: 30
              },
              color: 'red'
          }],
      },
  </code></pre>