title: Highcharts : How to update Plotoptions pointStart on Ajax call?
body: <p>I have a simple chart in my MVC web application. Now I have some filters that will update the chart on their <code>click</code> event. Actually click event will use an ajax call to update the chart. </p>
  
  <p>This is my chart :</p>
  
  <pre><code> $('#performance-cart').highcharts({
      chart: {
          type: 'area', backgroundColor: '#f5f7f7', style: { fontFamily: 'Roboto, Sans-serif', color: '#aeafb1' },
          animation: {
              duration: 1500,
              easing: 'easeOutBounce'
          }
      },
      xAxis: {
          type: 'datetime',
          labels: { style: { color: '#aeafb1' } }
      },
      yAxis: {
          min: 0, max: 50, tickInterval: 10, gridLineColor: '#ebeded', gridLineWidth: 1,
          title: { text: '' }, lineWidth: 0, labels: { align: 'right', style: { color: '#aeafb1' } }
      },
      title: { text: '' },
      tooltip: {
          useHTML: true, headerFormat: '&lt;h3 style="color:#ffffff;font-weight:300;padding: 3px 12px;"&gt;{point.y:,.1f}&lt;/br&gt;',
          backgroundColor: '#515757', pointFormat: '{series.name}'
      },
      legend: {
          itemStyle: { color: '#838589' }, symbolWidth: 12, symbolHeight: 5, itemWidth: 80, symbolRadius: 0,
          itemMarginBottom: 10, backgroundColor: '#f5f7f7', verticalAlign: 'top', borderWidth: 0, x: -498, y: 10
      },
      plotOptions: {
          area: {
              fillOpacity: 0.2, cursor: 'pointer', marker: {
                  symbol: 'circle', fillColor: '#FFFFFF', lineWidth: 2, lineColor: null,
                  allowPointSelect: true
              }
          },
          line: {
              fillOpacity: 0.2, cursor: 'pointer', marker: {
                  symbol: 'circle', fillColor: '#FFFFFF', lineWidth: 2, lineColor: null,
                  allowPointSelect: true
              }
          },
          column: {
              fillOpacity: 0.2, cursor: 'pointer', marker: {
                  symbol: 'circle', fillColor: '#FFFFFF', lineWidth: 2, lineColor: null,
                  allowPointSelect: true
              }
          },
          series: {
              pointStart: myIssueResolvedStartDate,
              pointInterval: 24 * 3600 * 1000 // one day
          }
      },
      series: [{
          name: 'Issues', color: '#ff3806',
          data: myIssueData,
          marker: { states: { hover: { fillColor: '#ff3806', lineColor: '#ffffff', lineWidth: 2 } } }
      }, {
          name: 'Resolved', color: '#1da9dd',
          data: myResolvedData,
          marker: { states: { hover: { fillColor: '#1da9dd', lineColor: '#ffffff', lineWidth: 2 } } }
      }]
  });
  </code></pre>
  
  <p>Now in my ajax call, I do something like this to update the chart :</p>
  
  <pre><code>var chart = $('#performance-cart').highcharts();
  chart.options.plotOptions.series.pointStart = newDate; \\newDate = 1404086400000
  chart.series[0].setData(issue, true);
  chart.series[1].setData(resolve, true);
  </code></pre>
  
  <p>The problem is, <code>chart.options.plotOptions.series.pointStart = newDate;</code> doesn't update the pointStart. I have checked the value in <code>newDate</code> variable and its showing perfectly good date in UTC format. Series data is being updated perfectly.</p>
  
  <p>I believe I am writing the syntax wrong or something for the pointStart. I would really appreciate if someone could point out the problem.</p>