javascript - Independent series for highcharts with color and gray background -

How to series freely with color and brown series If you click the radio button from the Bela example, So the part of the chart becomes gray and the rest are colors

London - Blue London - Gray

  
  $ (function () {var grayblue = '# 1D1D1D'; var graded = '# 4C4C4C'; data London = [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0 , 59.6, 52.4, 65.2, 59.3, 51.2]; databarlin = [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.3, 46.8, 51.1] Highchartes Done, data Berlin, 0); $ (': input [type =' radio ']' (click on), function () {selected = 12 - $ (this) .val (); tempLondon = []; tempBerlin = {]; For London (data in var i) {bLondon = {}; B-Berlin = {}; if (i> = = selected) {Belyndon ['Y'] = Data London [I]; BLDon ['Color'] = Gray Blue; Temple London. Peash (BLDon);} For FI {Temple London. [I]);}} (Data Berlin in var ii) {bLondon = {}; Beberin = {}; If (i> = selected) {bbreen ['y'] = data Berlin [i]; Beberin ['color'] = graded; TempBerlin.push (bBerlin); } Other {tempBerlin.push (data Berlin [i]); }} Highchartes (Templandon, Temperlin, selected); }); Function High Chart (DataLondon, Data Berlin, Number) {$ ('# Container'). High Texts ({Chart: {Type: 'Column'}, Title: {text: 'Monthly Average Rain'}, Subtitle: {text: 'source:' '' '' '' '' '' ',' ' '' '' '' '' '' '' 'Plus Band: [[Color:' #ADADAD ', to: -0.5, to: number - 0.5}]}, YAxis: {min: 0, title: {text: 'Rain (mm)'}}, Tooltip: {Header format: '& lt; span style = "font-size: 10px"> {point.key} & lt ; / Span & gt; & gt; Table & gt; ', Point format:' & lt; t & gt; td style = "Color: {series.color}; padding: 0" & gt; {series /name> B & gt; & lt; / td & gt; & lt; / tr & gt; ', footer format:' & Lt; / table & gt;, color: ['# 0000ff', '#ff 20000'], plot options: {column: {pointPadding: 0.2, border width: 0}}, series: [{name: 'London ', Data: DataLondon}, {Name: Berlin', Data: Data Berlin}]}); }});