javascript - Scatter Plot Points lose color when using boost.js for Highcharts -

i've been trying figure out why colors of each point on scatter plot disappear when using boost.js module highcharts. need boost.js module because amount of points generating great web site's performance diminished without using boost.js.

i made fiddle simulate trying accomplish.

if comment out boost.js script reference in fiddle see colors each point on scatter plot way trying achieve notice performance on website poor.

i need performance boost.js offers while still maintaining colors of each scatter plot point.

so question is, how keep colors each point while maintaining performance?

update:

without boost.js https://jsfiddle.net/rtunis/9rldfzq7/4/

with boost.js https://jsfiddle.net/rtunis/9rldfzq7/3/

javascript:

var data = [];  (var = 0; < 350; i++) {     (var j = 0; j < 350; j++) {         var point = {             datum: i,             y: i,             x: j,             color: "hsla(" + math.floor((math.random() * 100) + 1) + ", 100%, 50%, 0.75)"         };         data.push(point);     } }  // create chart , store var chart = new highcharts.chart({     chart: {         type: 'scatter',         renderto: 'map',         panning: true,         pankey: 'shift'     },     title: {         text: 'testtitle'     },     subtitle: {         text: 'subtitle test'     },     xaxis: {         title: {             text: 'longitude'         },         startontick: true,         endontick: true,      },     yaxis: {         title: {             text: 'latitude'         }     },     plotoptions: {         scatter: {             allowpointselect: true,             marker: {                 symbol: 'square',                 radius: 1             },             states: {                 hover: {                     halo: {                         opacity: 0.75,                         size: 4,                         attributes: {                             zindex: 4,                             fill: 'gray',                             'stroke-width': 1,                             stroke: 'black'                         }                      }                   }               },       tooltip: {           headerformat: '<b>{series.name}</b><br>',           pointformat: '<b>datum:</b> {point.datum:.2f}<br/><b>longitude:</b> {point.x:.5f}<br/><b>latitude:</b> {point.y:.5f}<br/>'       },       turbothreshold: 150000     }   },   responsive: {       rules: [{           condition: {               maxwidth: 500,               minwidth: 500           }       }]   },   series: [{       name: 'seriesname',       data: data,   }] });