Change the color of the series line dynamically by month <p>I have a series from Jan - Dec, the requirement is to update the last data point to grayscale colors. So I have created additional data series assigning grayscale colors to the series. Can I be able to join the colored series with grayscale colored series</p> <p><a href="http://jsfiddle.net/hgj7sfhp/33/" rel="nofollow">http://jsfiddle.net/hgj7sfhp/33/</a></p> <p>for example, London colored and London grayscale should be joined, like continuouss series after November, without any break in the series. I have London &amp; Berlin in December points in the chart, but i wanted to attached to the colored series, is it possible ?</p> <p>Also group the legend of colored series and grayscale series.</p> <p>London, Berlin</p> <p>LondonGray, BerlinGray</p> <pre><code>$(function () { var grayblue = '#1D1D1D'; var grayred = '#4C4C4C'; dataLondon = [ 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 45.6, 90.4]; dataBerlin = [ 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 23.6, 29.1] highcharts(dataLondon, dataBerlin, 0); function highcharts(dataLondon, dataBerlin, number) { $('#container').highcharts({ chart: { type: 'line' }, title: { text: 'Monthly Average Rainfall' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ], plotBands: { color: 'Red', from: 10.5, to: 10.55, label: { text: 'I am label' } } }, yAxis: { min: 0, title: { text: 'Rainfall (mm)' } }, tooltip: { headerFormat: '&lt;span style="font-size:10px"&gt;{point.key}&lt;/span&gt;&lt;table&gt;', pointFormat: '&lt;tr&gt;&lt;td style="color:{series.color};padding:0"&gt;{series.name}: &lt;/td&gt;' + '&lt;td style="padding:0"&gt;&lt;b&gt;{point.y:.1f} mm&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;', footerFormat: '&lt;/table&gt;', shared: true, useHTML: true }, colors: ['#0000FF', '#FF0000'], plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: 'London', data: dataLondon }, { name: 'Berlin', data: dataBerlin }, { name: 'London', data: [null,null,null,null,null,null,null,null,null,null,null,10], color: '#1D1D1D' }, { name: 'Berlin', data: [null,null,null,null,null,null,null,null,null,null,null, 51.1], color: '#4C4C4C' }] }); } }); </code></pre>