title: highcharts change series color when data is dynamically inserted
body: <p>I'm building an web app in which users required the data in the web page and the back end fetch the data and pass it to the front end. So each time the user require a new set a data, new line will be inserted into the chart. BUT the problem is that every line is in the same color and they overlapped with each other makes it hard to define. I thought each time when a new set of data is inserted the different color will be set automatically by Highcharts. I tried to manually set the color when the front end received the data, but it didn't work. Could someone please help me? Thanks so much! </p>
  
  <p>script.js:</p>
  
  <pre><code>$(document).ready(function() {
      var colorCnt = 0;
      var options = {
              chart: {
                      renderTo: containerSpline,
                      type: 'spline',
                  },
              title: {
                  text: '信息录入统计曲线图'
              },
              credits: {
                  enabled: false
              },
              xAxis: {
                  title: {
                      text: '时间'
                  },
                  categories: []
              },
              yAxis: {
                  title: {
                      text: '数量'
                  }
              },
              series: []
      };
  
  
  
      $.get("//localhost:5050", (data)=&gt;{
          // feed the default data when the web page is firstly loaded
          var series = {
              name:'', 
              data: []
              };
          var xAxis = {
                  categories: []
              };
          data.recordset.forEach((item)=&gt;{
              series.data.push(item.Count);
              series.name = item.Dates;
              options.xAxis.categories.push(item.Times);
          })
          options.series.push(series);
           var chart = new Highcharts.Chart(options); 
      })
  
      $('button').click(()=&gt;{
          // feed the required data by the user
          var obj = {
              year: $('#year').val(),
              month: $('#month').val(),
              day: $('#day').val()
          }
  
          $.post('//localhost:5050',obj, (data)=&gt;{
              options.chart.colorCount = options.chart.colorCount+1;
              var series = {
              name:'', 
              data: []
              };
              var xAxis = {
                      categories: []
                  };
              console.log(data.recordsets);
              data.recordset.forEach((item)=&gt;{
                  series.data.push(item.Count);
                  series.name = item.Dates;
                  options.xAxis.categories.push(item.Times);
              })
              options.series.push(series);
              var chart = new Highcharts.Chart(options); 
          })
      });
  })
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;信息录入统计&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;link rel="stylesheet" href="bootstrap.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="pageheader"&gt;
          &lt;h1&gt;信息录入统计&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="jumbotron"&gt;
          &lt;div id="container"&gt;
              &lt;div class="input-group"&gt;
                  &lt;input type="text" class="form-control" placeholder="查询年份" aria-describedby="basic-addon2" id="year"&gt;
                  &lt;span class="input-group-addon" id="basic-addon2"&gt;年&lt;/span&gt;
                  &lt;input type="text" class="form-control" placeholder="查询月份" aria-describedby="basic-addon2" id="month"&gt;
                  &lt;span class="input-group-addon" id="basic-addon2"&gt;月&lt;/span&gt;
                  &lt;input type="text" class="form-control" placeholder="查询日期" aria-describedby="basic-addon2" id="day"&gt;
                  &lt;span class="input-group-addon" id="basic-addon2"&gt;日&lt;/span&gt;
                  &lt;span class="input-group-btn"&gt;
                      &lt;button class="btn btn-default" type="button"&gt;查询&lt;/button&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="chart", id="containerSpline"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;!-- &lt;div id="containerSpline"&gt;&lt;/div&gt; --&gt;
  &lt;script src="jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src='highcharts.js'&gt;&lt;/script&gt;
  &lt;script src="highcharts-more.js"&gt;&lt;/script&gt;
  &lt;!-- &lt;script src="data.js"&gt;&lt;/script&gt; --&gt;
  &lt;script src='script.js'&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>