diff --git a/src/firefly/html/demo/ffapi-highlevel-charttest.html b/src/firefly/html/demo/ffapi-highlevel-charttest.html
index 1b09885ec6..788668c2b7 100644
--- a/src/firefly/html/demo/ffapi-highlevel-charttest.html
+++ b/src/firefly/html/demo/ffapi-highlevel-charttest.html
@@ -27,6 +27,11 @@ <h2>
 <br/><br/>
 <div id="xyplotHere" style="width: 800px; height: 550px; border: solid 1px;"></div>
 
+<script type="text/javascript">
+    if (!window.firefly) window.firefly= {};
+    window.firefly.options= {charts: {chartEngine: 'plotly'}};
+</script>
+
 <script type="text/javascript">
     {
         onFireflyLoaded= function(firefly) {
diff --git a/src/firefly/html/demo/ffapi-highlevel-test.html b/src/firefly/html/demo/ffapi-highlevel-test.html
index fcdf066e8f..8699c54217 100644
--- a/src/firefly/html/demo/ffapi-highlevel-test.html
+++ b/src/firefly/html/demo/ffapi-highlevel-test.html
@@ -118,6 +118,12 @@
     </div>
 </div>
 
+<script type="text/javascript">
+    if (!window.firefly) window.firefly= {};
+    window.firefly.options= {charts: {chartEngine: 'plotly'}};
+</script>
+
+
 <script type="text/javascript">
     {
         function loadMoving() {
diff --git a/src/firefly/js/FFEntryPoint.js b/src/firefly/js/FFEntryPoint.js
index fe8978e507..7c5fdc2d90 100644
--- a/src/firefly/js/FFEntryPoint.js
+++ b/src/firefly/js/FFEntryPoint.js
@@ -70,5 +70,7 @@ if (app.template) {
     viewer = Templates[props.template];
 }
 
-firefly.bootstrap(app.options, viewer, props);
+const options= get(window, 'firefly.app.options') || get(window, 'firefly.options');
+
+firefly.bootstrap(options, viewer, props);
 
diff --git a/src/firefly/js/charts/PlotlyConfig.js b/src/firefly/js/charts/PlotlyConfig.js
index 7243226552..9e0cbd34ea 100644
--- a/src/firefly/js/charts/PlotlyConfig.js
+++ b/src/firefly/js/charts/PlotlyConfig.js
@@ -8,6 +8,7 @@
 // NOTE - Remember to uncomment both the import and the register
 
 import {loadScript} from '../util/WebUtil.js';
+import {getRootURL} from '../util/BrowserUtil.js';
 /*
 import Plotly from 'plotly.js/lib/core';
 import bar from 'plotly.js/lib/bar';
@@ -86,9 +87,10 @@ function initPlotLyRetriever(loadNow) {
             return loadedPlotly ? Promise.resolve(loadedPlotly) : Promise.reject(Error(LOAD_ERR_MSG));
         }
 
+        const script= `${getRootURL()}/${PLOTLY_SCRIPT}`;
         if (!plotlyLoadBegin) {
             plotlyLoadBegin= true;
-            loadScript(PLOTLY_SCRIPT).then( () => {
+            loadScript(script).then( () => {
                 loadedPlotly= window.Plotly;
                 waitingResolvers.forEach( (r) => r(loadedPlotly));
                 waitingResolvers= undefined;
diff --git a/src/firefly/js/charts/chartTypes/HistogramTblView.jsx b/src/firefly/js/charts/chartTypes/HistogramTblView.jsx
index af160916ad..c923b634b2 100644
--- a/src/firefly/js/charts/chartTypes/HistogramTblView.jsx
+++ b/src/firefly/js/charts/chartTypes/HistogramTblView.jsx
@@ -2,7 +2,7 @@
  * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
  */
 
-import {get, set} from 'lodash';
+import {get, isEmpty, set} from 'lodash';
 import React, {PropTypes} from 'react';
 import * as TblUtil from '../../tables/TableUtil.js';
 
@@ -42,8 +42,10 @@ function Chart(props) {
 
     if (isDataReady) {
         var logs;
-        const xAxis = histogramParams.xAxis || {reversed: false, opposite: false};
-        const yAxis = histogramParams.yAxis || {reversed: false, opposite: false};
+        let xAxis = histogramParams.xAxis || {};
+        let yAxis = histogramParams.yAxis || {};
+
+
         if (histogramParams) {
             var logvals = '';
             if (histogramParams.x.includes('log')) { logvals += 'x';}
@@ -57,6 +59,9 @@ function Chart(props) {
             if (histogramParams.y.includes('opposite')) { set(yAxis, 'opposite', true); }
         }
 
+        if (isEmpty(xAxis)) { xAxis = undefined;}
+        if (isEmpty(yAxis)) { yAxis = undefined;}
+
         return (
             <Histogram data={histogramData}
                        desc={histogramParams.columnOrExpr}
diff --git a/src/firefly/js/charts/dataTypes/XYColsCDT.js b/src/firefly/js/charts/dataTypes/XYColsCDT.js
index d80da0e546..2c8d63638f 100644
--- a/src/firefly/js/charts/dataTypes/XYColsCDT.js
+++ b/src/firefly/js/charts/dataTypes/XYColsCDT.js
@@ -413,12 +413,18 @@ function fetchXYLargeTable(dispatch, chartId, chartDataElementId) {
             const colNames = decimateKey ? ['x', 'y', 'rowIdx', 'weight'] : ['x', 'y', 'rowIdx'];
 
             // change row data from [ [val] ] to [ {cname:val} ] and make them numeric
-            const rows = tableModel.tableData.data.map((row) => {
+            const getARow = (row) => {
                 return colNames.reduce( (arow, name, cidx) => {
                     arow[name] = parseFloat(row[cidx]);
                     return arow;
                 }, {});
-            });
+            };
+            const getDecimatedARow = (row) => {
+                const arow = getARow(row);
+                arow.decimate_key = row[4]; // 4th column in decimated table is decimate_key
+                return arow;
+            };
+            const rows = tableModel.tableData.data.map(decimateKey ? getDecimatedARow : getARow);
 
             xyPlotData = omitBy({
                 rows,
diff --git a/src/firefly/js/charts/ui/ChartPanel.jsx b/src/firefly/js/charts/ui/ChartPanel.jsx
index 0f9ed30675..8f5833efb0 100644
--- a/src/firefly/js/charts/ui/ChartPanel.jsx
+++ b/src/firefly/js/charts/ui/ChartPanel.jsx
@@ -82,7 +82,7 @@ class ChartPanelView extends Component {
     }
 
     render() {
-        const {chartId, chartData, deletable, expandable, expandedMode, Chart, Options, Toolbar, showToolbar, showChart, eventCallback} = this.props;
+        const {chartId, chartData, deletable, expandable, expandedMode, Chart, Options, Toolbar, showToolbar, showChart} = this.props;
 
         if (!chartData) {
             return (<div/>);
@@ -190,8 +190,7 @@ ChartPanelView.propTypes = {
     showChart: PropTypes.bool,
     Chart: PropTypes.func,
     Options: PropTypes.func,
-    Toolbar: PropTypes.func,
-    eventCallback: PropTypes.object
+    Toolbar: PropTypes.func
 };
 
 ChartPanelView.defaultProps = {
@@ -292,6 +291,5 @@ ChartPanel.propTypes = {
     expandedMode: PropTypes.bool,
     deletable: PropTypes.bool,
     showToolbar: PropTypes.bool,
-    showChart: PropTypes.bool,
-    eventCallback: PropTypes.object
+    showChart: PropTypes.bool
 };
\ No newline at end of file
diff --git a/src/firefly/js/charts/ui/HistogramPlotly.jsx b/src/firefly/js/charts/ui/HistogramPlotly.jsx
index b6fed72e1e..f7f0079584 100644
--- a/src/firefly/js/charts/ui/HistogramPlotly.jsx
+++ b/src/firefly/js/charts/ui/HistogramPlotly.jsx
@@ -120,7 +120,7 @@ export class HistogramPlotly extends React.Component {
     }
 
     regenData(props) {
-        var {data, series, xAxis, yAxis, logs, desc, binColor, xUnit} = props;
+        var {data, series, xAxis, yAxis, logs, desc, binColor, xUnit, width, height} = props;
         if (!data) {
             data = series && series.data;
         }
@@ -153,6 +153,8 @@ export class HistogramPlotly extends React.Component {
             },
             plotlyData,
             plotlyLayout: {
+                height,
+                width,
                 hovermode: 'x',
                  xaxis: {
                     title: `${desc} ` + (xUnit ? `(${xUnit})` : ''),
@@ -192,7 +194,7 @@ export class HistogramPlotly extends React.Component {
     }
 
     shouldComponentUpdate(nextProps, ns) {
-        const bUpdate = sCompare(nextProps, ns);
+        const bUpdate = sCompare(this, nextProps, ns);
 
         if (bUpdate && nextProps !== this.props) {
             this.chartingInfo = this.regenData(nextProps);
@@ -274,46 +276,28 @@ export class HistogramPlotly extends React.Component {
                 this.setState({leftMargin, rightMargin, layoutUpdate: {margin}});
             }
         }
-
-        // add event handler to 'plotly_click' in case mouse click happens when the mouse is hovering on the bar
-        const {eventCallback} = this.props;
-        if (eventCallback) {
-            Object.keys(eventCallback).forEach((eventKey) => {
-                if (eventKey === 'mousedown') {
-                    chart.on('plotly_click', eventCallback[eventKey]);
-                }
-            });
-        }
     }
 
     render() {
         this.error = undefined;
         const {dataUpdate, layoutUpdate, config} = this.state;
         const {plotlyData, plotlyDivStyle, plotlyLayout}= this.chartingInfo;
-        const {width, height, eventCallback} = this.props;
 
-        //add click event handler to div in case the mouse click happens when the mouse is located on non-bar area
         return (
-            <div style={{width: width? width: undefined,
-                         height: height? height: undefined}}
-                 onClick={get(eventCallback, 'mousedown')}>
-                <PlotlyWrapper data={plotlyData} layout={plotlyLayout}  style={plotlyDivStyle}
-                               dataUpdate={dataUpdate}
-                               layoutUpdate={layoutUpdate}
-                               divUpdateCB={(div) => this.chart= div}
-                               config={config}
-                               newPlotCB={this.afterRedraw}
-                />
-            </div>
+            <PlotlyWrapper data={plotlyData} layout={plotlyLayout}  style={plotlyDivStyle}
+                           dataUpdate={dataUpdate}
+                           layoutUpdate={layoutUpdate}
+                           divUpdateCB={(div) => this.chart= div}
+                           config={config}
+                           newPlotCB={this.afterRedraw}
+            />
         );
     }
 }
 
 HistogramPlotly.defaultProps = {
     desc: 'Sample Distribution',
-    binColor: '#d1d1d1',
-    xAxis: {},
-    yAxis: {}
+    binColor: '#d1d1d1'
 };
 
 
@@ -331,6 +315,5 @@ HistogramPlotly.propTypes = {
         if (props[propName] && !/^#[0-9a-f]{6}/.test(props[propName])) {
             return new Error(`Invalid bin color in ${componentName}, should be hex with exactly 7 characters long.`);
         }
-    },
-    eventCallback: PropTypes.object
+    }
 };
\ No newline at end of file
diff --git a/src/firefly/js/charts/ui/MultiChartViewer.jsx b/src/firefly/js/charts/ui/MultiChartViewer.jsx
index 740c450b77..965354503d 100644
--- a/src/firefly/js/charts/ui/MultiChartViewer.jsx
+++ b/src/firefly/js/charts/ui/MultiChartViewer.jsx
@@ -82,8 +82,8 @@ export class MultiChartViewer extends Component {
         };
 
         const makeItemViewer = (chartId) => (
-            <div className={chartId === activeItemId ? 'ChartPanel ChartPanel--active' : 'ChartPanel'} onMouseDown={()=>onChartSelect(chartId)}>
-                <ChartPanel key={chartId} showToolbar={false} chartId={chartId} eventCallback={{'mousedown': ()=>onChartSelect(chartId)}}/>;
+            <div className={chartId === activeItemId ? 'ChartPanel ChartPanel--active' : 'ChartPanel'} onClick={()=>onChartSelect(chartId)}>
+                <ChartPanel key={chartId} showToolbar={false} chartId={chartId}/>;
             </div>
         );
 
diff --git a/src/firefly/js/charts/ui/PlotlyWrapper.jsx b/src/firefly/js/charts/ui/PlotlyWrapper.jsx
index 6a79afc8bb..2d6761d200 100644
--- a/src/firefly/js/charts/ui/PlotlyWrapper.jsx
+++ b/src/firefly/js/charts/ui/PlotlyWrapper.jsx
@@ -3,7 +3,6 @@
  */
 
 import React, {Component, PropTypes} from 'react';
-// import Plotly, {getPlotLy} from '../PlotlyConfig.js';
 import {getPlotLy} from '../PlotlyConfig.js';
 import Enum from 'enum';
 
@@ -26,7 +25,7 @@ const defaultConfig= {
     ]
 };
 
-export class PlotlyWrapper extends React.Component {
+export class PlotlyWrapper extends Component {
 
     constructor(props) {
         super(props);
@@ -61,29 +60,37 @@ export class PlotlyWrapper extends React.Component {
 
     draw() {
         const {data,layout, config= defaultConfig, newPlotCB, dataUpdate, layoutUpdate, dataUpdateTraces}= this.props;
-        const {renderType}= this;
+        const renderType = this.renderType;
         getPlotLy().then( (Plotly) => {
-            switch (renderType) {
-                case RenderType.RESTYLE:
-                    Plotly.restyle(this.div,  dataUpdate, dataUpdateTraces);
-                    break;
-                case RenderType.RELAYOUT:
-                    Plotly.relayout(this.div, layoutUpdate);
-                    break;
-                case RenderType.RESTYLE_AND_RELAYOUT:
-                    Plotly.restyle(this.div,  dataUpdate, dataUpdateTraces);
-                    Plotly.relayout(this.div, layoutUpdate);
-                    break;
-                case RenderType.RESIZE:
-                    Plotly.Plots.resize(this.div);
-                    break;
-                case RenderType.UPDATE:
-                    Plotly.update(this.div, data, layout);
-                    break;
-                case RenderType.NEW_PLOT:
-                    Plotly.newPlot(this.div, data, layout, config);
-                    if (newPlotCB) newPlotCB(this.div,Plotly);
-                    break;
+            if (this.div) { // make sure the div is still there
+                switch (renderType) {
+                    case RenderType.RESTYLE:
+                        Plotly.restyle(this.div, dataUpdate, dataUpdateTraces);
+                        break;
+                    case RenderType.RELAYOUT:
+                        Plotly.relayout(this.div, layoutUpdate);
+                        break;
+                    case RenderType.RESTYLE_AND_RELAYOUT:
+                        Plotly.restyle(this.div, dataUpdate, dataUpdateTraces);
+                        Plotly.relayout(this.div, layoutUpdate);
+                        break;
+                    case RenderType.RESIZE:
+                        Plotly.Plots.resize(this.div);
+                        break;
+                    case RenderType.UPDATE:
+                        Plotly.update(this.div, data, layout);
+                        break;
+                    case RenderType.NEW_PLOT:
+                        Plotly.newPlot(this.div, data, layout, config);
+                        if (this.div.on) {
+                            const chart = this.div;
+                            chart.on('plotly_click', () => chart.parentElement.click());
+                        }
+                        if (newPlotCB) {
+                            newPlotCB(this.div, Plotly);
+                        }
+                        break;
+                }
             }
         } ).catch( (e) => {
             console.log('Plotly not loaded',e);
@@ -111,8 +118,12 @@ export class PlotlyWrapper extends React.Component {
 
     render() {
         const {style}= this.props;
+        // note: wrapper div is the target for the simulated click event
+        // when the original click event is lost and plotly_click is emitted instead
         return (
-            <div id={this.id} style={style} ref={this.refUpdate}></div>
+            <div>
+                <div id={this.id} style={style} ref={this.refUpdate}/>
+            </div>
         );
     }
 }
@@ -128,5 +139,5 @@ PlotlyWrapper.propTypes = {
     dataUpdateTraces: PropTypes.number,
     layoutUpdate: PropTypes.object,
     divUpdateCB: PropTypes.func,
-    newPlotCB: PropTypes.func,
+    newPlotCB: PropTypes.func
 };
diff --git a/src/firefly/js/charts/ui/XYPlot.jsx b/src/firefly/js/charts/ui/XYPlot.jsx
index 454138eeb0..a25a8f495a 100644
--- a/src/firefly/js/charts/ui/XYPlot.jsx
+++ b/src/firefly/js/charts/ui/XYPlot.jsx
@@ -1,84 +1,16 @@
 /*
  * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
  */
-import {isUndefined, debounce, get, has, omit} from 'lodash';
+import {get, omit} from 'lodash';
 import shallowequal from 'shallowequal';
 import React, {PropTypes} from 'react';
-import ReactHighcharts from 'react-highcharts';
-import {xyErrorBarExtension} from '../highcharts/XYErrorBars.js';
+import {getAppOptions} from '../../core/AppDataCntlr.js';
+import {XYPlotHighcharts} from './XYPlotHighcharts.jsx';
+import {XYPlotPlotly} from './XYPlotPlotly.jsx';
+import {plotParamsShape, plotDataShape} from './XYPlotPropTypes.js';
 
-import {SelectInfo} from '../../tables/SelectInfo.js';
-import {parseDecimateKey} from '../../tables/Decimate.js';
 
-import numeral from 'numeral';
-import {getFormatString} from '../../util/MathUtil.js';
-
-xyErrorBarExtension(ReactHighcharts.Highcharts);
-
-const defaultShading = 'lin';
-
-export const axisParamsShape = PropTypes.shape({
-    columnOrExpr : PropTypes.string,
-    error : PropTypes.string, // for symmetric errors
-    errorLow : PropTypes.string, // for asymmetric errors
-    errorHigh : PropTypes.string, // for asymmetric errors
-    label : PropTypes.string,
-    unit : PropTypes.string,
-    error: PropTypes.string,
-    options : PropTypes.string // ex. 'grid,log,flip,opposite'
-});
-
-export const selectionShape = PropTypes.shape({
-    xMin : PropTypes.number,
-    xMax : PropTypes.number,
-    yMin : PropTypes.number,
-    yMax : PropTypes.number
-});
-
-export const plotParamsShape = PropTypes.shape({
-    plotStyle: PropTypes.oneOf(['points', 'line', 'linepoints']),
-    sortColOrExpr: PropTypes.string,
-    xyRatio : PropTypes.number,
-    stretch : PropTypes.oneOf(['fit','fill']),
-    selection : selectionShape,
-    zoom : selectionShape,
-    boundaries : selectionShape,
-    userSetBoundaries : selectionShape,
-    nbins : PropTypes.shape({x : PropTypes.number, y : PropTypes.number}),
-    shading : PropTypes.oneOf(['lin', 'log']),
-    x : axisParamsShape,
-    y : axisParamsShape
-});
-
-const plotDataShape = PropTypes.shape({
-    rows: PropTypes.arrayOf(PropTypes.object), // {x,y,rowIdx} or {x,y,rowIdx,weight} or {x,y,rowIdx,right,left,low,high}
-    decimateKey: PropTypes.string,
-    xMin: PropTypes.number,
-    xMax: PropTypes.number,
-    yMin: PropTypes.number,
-    yMax: PropTypes.number,
-    weightMin: PropTypes.number,
-    weightMax: PropTypes.number,
-    idStr: PropTypes.string
-});
-
-const DATAPOINTS = 'data';
-const XERROR = 'xerror';
-const YERROR = 'yerror';
-const SELECTED = 'selected';
-const HIGHLIGHTED = 'highlighted';
-const MINMAX = 'minmax';
-
-const datapointsColor = 'rgba(63, 127, 191, 0.5)';
-const datapointsColorWithErrors = 'rgba(63, 127, 191, 0.7)';
-const errorBarColor = 'rgba(63, 127, 191, 0.5)'; //'rgba(255, 209, 128, 0.5)';
-const selectedColorWithErrors = 'rgba(255, 200, 0, 1)';
-const selectedColor = 'rgba(255, 200, 0, 1)';
-const highlightedColor = 'rgba(255, 165, 0, 1)';
-const selectionRectColor = 'rgba(255, 209, 128, 0.5)';
-const selectionRectColorGray = 'rgba(165, 165, 165, 0.5)';
-
-const isLinePlot = function(plotStyle) {
+export const isLinePlot = function(plotStyle) {
     return plotStyle === 'line' || plotStyle === 'linepoints';
 };
 
@@ -90,7 +22,7 @@ const isLinePlot = function(plotStyle) {
  @param {boolean} returnNum - if true return group number rather than group description
  @return {number|string} from 1 to 6, 1 for 1 pt series
  */
-const getWeightBasedGroup = function(weight, minWeight, maxWeight, logShading=false, returnNum=true) {
+export const getWeightBasedGroup = function(weight, minWeight, maxWeight, logShading=false, returnNum=true) {
     if (weight === 1) return returnNum ? 1 : '1pt';
     else {
         if (logShading) {
@@ -124,16 +56,16 @@ const getWeightBasedGroup = function(weight, minWeight, maxWeight, logShading=fa
     // should not reach
 };
 
-const getWeightedDataDescr = function(defaultDescr, numericData, minWeight, maxWeight, logShading) {
+export const getWeightedDataDescr = function(defaultDescr, numericData, minWeight, maxWeight, logShading) {
     if (numericData.length < 1) { return defaultDescr; }
     return getWeightBasedGroup(numericData[0].weight, minWeight, maxWeight, logShading, false);
 };
 
-const isDataSeries = function(name) {
+export const isDataSeries = function(name) {
     return (name === '1pt' || name.endsWith('pts'));
 };
 
-const getXAxisOptions = function(params) {
+export const getXAxisOptions = function(params) {
     const xTitle = params.x.label + (params.x.unit ? ` (${params.x.unit})` : '');
     let xGrid = false, xReversed = false, xOpposite = false, xLog = false;
     const {options:xOptions} = params.x;
@@ -146,7 +78,7 @@ const getXAxisOptions = function(params) {
     return {xTitle, xGrid, xReversed, xOpposite, xLog};
 };
 
-const validate = function(params, data) {
+export const validate = function(params, data) {
     const errors = [];
     const {options:xOptions} = get(params, 'x');
     if (xOptions && xOptions.includes('log')) {
@@ -169,7 +101,7 @@ const validate = function(params, data) {
     return errors;
 } ;
 
-const getYAxisOptions = function(params) {
+export const getYAxisOptions = function(params) {
     const yTitle = params.y.label + (params.y.unit ? ` (${params.y.unit})` : '');
 
     let yGrid = false, yReversed = false, yOpposite=false, yLog = false;
@@ -183,18 +115,18 @@ const getYAxisOptions = function(params) {
     return {yTitle, yGrid, yReversed, yOpposite, yLog};
 };
 
-const plotErrors = function(params, axis) {
+export const plotErrors = function(params, axis) {
     return get(params, [axis, 'error']) || get(params, [axis, 'errorLow']) || get(params, [axis, 'errorHigh']);
 };
 
-const getZoomSelection = function(params) {
+export const getZoomSelection = function(params) {
     return (params.zoom ? params.zoom : {xMin:null, xMax: null, yMin:null, yMax:null});
 };
 
 
 const selFinite = (v1, v2) => {return Number.isFinite(v1) ? v1 : v2;};
 
-const selFiniteMin = (v1, v2) => {
+export const selFiniteMin = (v1, v2) => {
     if (Number.isFinite(v1) && Number.isFinite(v2)) {
         return Math.min(v1, v2);
     } else {
@@ -202,7 +134,7 @@ const selFiniteMin = (v1, v2) => {
     }
 };
 
-const selFiniteMax = (v1, v2) => {
+export const selFiniteMax = (v1, v2) => {
     if (Number.isFinite(v1) && Number.isFinite(v2)) {
         return Math.max(v1, v2);
     } else {
@@ -210,51 +142,8 @@ const selFiniteMax = (v1, v2) => {
     }
 };
 
-/*
- A symbol to represent decimated series. The size of the rectangle depends of the decimation unit
- @param x lower left corner of the rectangle: ptX-options.radius
- @param y lower left corner of the rectangle: ptY-options.radius
- @param w width of the rectangle (2*options.radius)
- @param h height of the rectangle (2*options.radius)
- @param options {object} has hD - half difference between width and height of the rectangle
- */
-ReactHighcharts.Highcharts.SVGRenderer.prototype.symbols.rectangle = function (x, y, w, h, options) {
-    const hD = get(options, 'hD', Math.round(h/4));
-    // SVG path for the rectangle
-    return [
-        'M', x, y+hD,
-        'L', x+w, y+hD,
-        x+w, y+h-hD,
-        x, y+h-hD,
-        'Z'];
-};
 
-/*
- * Since decimated symbol should accurately reflect bin size,
- * the size of the symbol depends on the chart size.
- * @param {object} Highcharts' Chart object
- * @param {string} decimate key string (contains binning info)
- * @returns {object} x and y pixel size if the bin
- */
-const getDeciSymbolSize = function(chart, decimateKeyStr) {
-    const {xUnit,yUnit} = parseDecimateKey(decimateKeyStr);
-
-    const getPxSize = (axis, unit) => {
-        const {min} = axis.getExtremes();
-        const max = min+unit;
-        const minPx = axis.toPixels(min);
-        const maxPx = axis.toPixels(max);
-        let unitPx = Math.abs(maxPx-minPx);
-        if (unitPx < 2) { unitPx = 2; }
-        return unitPx;
-    };
-
-    const xUnitPx = getPxSize(chart.xAxis[0], xUnit);
-    const yUnitPx = getPxSize(chart.yAxis[0], yUnit);
-    return {xUnitPx, yUnitPx};
-};
-
-const calculateChartSize = function(widthPx, heightPx, props) {
+export const calculateChartSize = function(widthPx, heightPx, props) {
     const {params} = props;
     let chartWidth = undefined, chartHeight = undefined;
     if (params.xyRatio) {
@@ -275,7 +164,7 @@ const calculateChartSize = function(widthPx, heightPx, props) {
     return {chartWidth, chartHeight};
 };
 
-const formatError = function(val, err, errLow, errHigh) {
+export const formatError = function(val, err, errLow, errHigh) {
     if (Number.isFinite(err) || (Number.isFinite(errLow) && Number.isFinite(errHigh))) {
         const symmetricError = Number.isFinite(err);
         const lowErr = symmetricError ? err : errLow;
@@ -301,12 +190,6 @@ export class XYPlot extends React.Component {
 
     constructor(props) {
         super(props);
-        this.updateSelectionRect = this.updateSelectionRect.bind(this);
-        this.adjustPlotDisplay = this.adjustPlotDisplay.bind(this);
-        this.debouncedResize = this.debouncedResize.bind(this);
-        this.onSelectionEvent = this.onSelectionEvent.bind(this);
-        this.shouldAnimate = this.shouldAnimate.bind(this);
-        this.makeSeries = this.makeSeries.bind(this);
     }
 
     shouldComponentUpdate(nextProps) {
@@ -314,391 +197,18 @@ export class XYPlot extends React.Component {
         const propsToOmit = ['onHighlightChange', 'onSelection', 'highlighted'];
 
         // no update is needed if properties did ot change
-        if (shallowequal(omit(this.props, propsToOmit), omit(nextProps, propsToOmit)) &&
-            get(this.props,'highlighted.rowIdx') === get(nextProps,'highlighted.rowIdx')) {
-            return false;
-        }
-
-        const {data, width, height, params, highlighted, selectInfo, desc} = this.props;
-
-        // only re-render when the plot data change or an error occurs
-        // shading change for density plot changes series
-        if (nextProps.data !== data ||
-            get(params, 'plotStyle') !== get(nextProps.params, 'plotStyle') ||
-            plotErrors(params, 'x') !== plotErrors(nextProps.params, 'x') ||
-            plotErrors(params, 'y') !== plotErrors(nextProps.params, 'y') ||
-            get(params, 'shading', defaultShading) !== get(nextProps.params, 'shading', defaultShading)) {
-            return true;
-        } else {
-            const chart = this.refs.chart && this.refs.chart.getChart();
-            if (chart && chart.container && !this.error) {
-                const {params:newParams, width:newWidth, height:newHeight, highlighted:newHighlighted, selectInfo:newSelectInfo, desc:newDesc } = nextProps;
-                try {
-                    const errors = validate(newParams, data);
-                    if (errors.length > 0) {
-                        this.error = errors[0];
-                        chart.showLoading(errors[0]);
-                        return false;
-                    }
-
-                    if (newDesc !== desc) {
-                        chart.setTitle(newDesc, undefined, false);
-                    }
-
-                    // selection change (selection is not supported for decimated data)
-                    if (data && data.rows && !data.decimateKey && newSelectInfo !== selectInfo) {
-                        const selectedData = [];
-                        if (newSelectInfo) {
-                            const selectInfoCls = SelectInfo.newInstance(newSelectInfo, 0);
-                            data.rows.forEach((arow) => {
-                                if (selectInfoCls.isSelected(arow['rowIdx'])) {
-                                    selectedData.push(arow);
-                                }
-                            });
-                        }
-                        chart.get(SELECTED).setData(selectedData);
-                    }
-
-                    // highlight change
-                    if (!shallowequal(highlighted, newHighlighted)) {
-                        const highlightedData = [];
-                        if (!isUndefined(newHighlighted)) {
-                            highlightedData.push(newHighlighted);
-                        }
-                        chart.get(HIGHLIGHTED).setData(highlightedData);
-                    }
-
-
-                    // plot parameters change
-                    if (params !== newParams) {
-                        const xoptions = {};
-                        const yoptions = {};
-                        const newXOptions = getXAxisOptions(newParams);
-                        const newYOptions = getYAxisOptions(newParams);
-                        if (!shallowequal(getXAxisOptions(params), newXOptions)) {
-                            Object.assign(xoptions, {
-                                title: {text: newXOptions.xTitle},
-                                gridLineWidth: newXOptions.xGrid ? 1 : 0,
-                                reversed: newXOptions.xReversed,
-                                opposite: newXOptions.xOpposite,
-                                type: newXOptions.xLog ? 'logarithmic' : 'linear'
-                            });
-                        }
-                        if (!shallowequal(getYAxisOptions(params), newYOptions)) {
-                            Object.assign(yoptions, {
-                                title: {text: newYOptions.yTitle},
-                                gridLineWidth: newYOptions.yGrid ? 1 : 0,
-                                reversed: newYOptions.yReversed,
-                                opposite: newYOptions.yOpposite,
-                                type: newYOptions.yLog ? 'logarithmic' : 'linear'
-                            });
-                        }
-                        if (!shallowequal(params.zoom, newParams.zoom) || !shallowequal(params.boundaries, newParams.boundaries)) {
-                            const {xMin, xMax, yMin, yMax} = getZoomSelection(newParams);
-                            const {xMin:xDataMin, xMax:xDataMax, yMin:yDataMin, yMax:yDataMax} = get(newParams, 'boundaries', {});
-                            Object.assign(xoptions, {min: selFiniteMax(xMin, xDataMin), max: selFiniteMin(xMax, xDataMax)});
-                            Object.assign(yoptions, {min: selFiniteMax(yMin, yDataMin), max: selFiniteMin(yMax, yDataMax)});
-                            chart.get(MINMAX).setData([[xoptions.min, yoptions.min], [xoptions.max, yoptions.max]], false, false, false);
-                        }
-                        const xUpdate = Reflect.ownKeys(xoptions).length > 0;
-                        const yUpdate = Reflect.ownKeys(yoptions).length > 0;
-                        if (xUpdate || yUpdate) {
-                            const animate = this.shouldAnimate();
-                            xUpdate && chart.xAxis[0].update(xoptions, !yUpdate, animate);
-                            yUpdate && chart.yAxis[0].update(yoptions, true, animate);
-                        }
-
-                        if (!shallowequal(params.selection, newParams.selection)) {
-                            this.updateSelectionRect(newParams.selection);
-                        }
-
-                    }
-
-                    // size change
-                    if (newWidth !== width || newHeight !== height ||
-                        newParams.xyRatio !== params.xyRatio || newParams.stretch !== params.stretch) {
-                        const {chartWidth, chartHeight} = calculateChartSize(newWidth, newHeight, nextProps);
-                        if (Math.abs(chart.chartWidth - chartWidth) > 20 || Math.abs(chart.chartHeight - chartHeight) > 20) {
-
-                            if (get(nextProps, ['data', 'decimateKey'])) {
-                                // hide all series for resize
-                                chart.series.forEach((series) => {
-                                    series.setVisible(false, false);
-                                });
-                                chart.showLoading('Resizing');
-                            }
-                            chart.setSize(chartWidth, chartHeight, false);
-
-                            if (this.pendingResize) {
-                                // if resize is slow, we want to do it only once
-                                this.pendingResize.cancel();
-                            }
-                            this.pendingResize = this.debouncedResize();
-                            this.pendingResize();
-                        }
-                    }
-                } catch (error) {
-                    this.error = error;
-                    chart.showLoading(error);
-                }
-
-                return false;
-            }
-            return true;
-        }
-    }
-
-    componentDidMount() {
-        this.adjustPlotDisplay();
-    }
-
-    componentDidUpdate() {
-        this.adjustPlotDisplay();
-    }
-
-    debouncedResize() {
-        return debounce(() => {
-            const chart = this.refs.chart && this.refs.chart.getChart();
-            if (chart && chart.container) {
-                const {data} = this.props;
-                if (data.decimateKey) {
-                    // update marker's size
-                    const {xUnitPx, yUnitPx} = getDeciSymbolSize(chart, data.decimateKey);
-                    chart.series.forEach((series) => {
-                        isDataSeries(series.name) && series.update({
-                            marker: {radius: xUnitPx/2.0, hD: (xUnitPx-yUnitPx)/2.0}}, false);
-                        series.setVisible(true, false);
-                    });
-                    chart.redraw();
-                    chart.hideLoading();
-                }
-            }
-            this.pendingResize = null;
-        }, 300);
-    }
-
-    shouldAnimate() {
-        const {data} = this.props;
-        return (!data || !data.rows || data.rows.length <= 250);
-    }
-
-    adjustPlotDisplay() {
-        const {params} = this.props;
-
-        // can add more chart events here like
-        // chart.bind('selection', (event) => {});
-
-        if (params.selection) {
-            this.updateSelectionRect(params.selection);
-        }
-    }
-
-    updateSelectionRect(selection) {
-        const chart = this.refs.chart.getChart();
-
-        if (this.selectionRect) {
-            this.selectionRect.destroy();
-            this.selectionRect = undefined;
-        }
-        if (selection) {
-            const xMinPx = chart.xAxis[0].toPixels(selection.xMin);
-            const xMaxPx = chart.xAxis[0].toPixels(selection.xMax);
-            const yMinPx = chart.yAxis[0].toPixels(selection.yMin);
-            const yMaxPx = chart.yAxis[0].toPixels(selection.yMax);
-            const width = Math.abs(xMaxPx - xMinPx);
-            const height = Math.abs(yMaxPx - yMinPx);
-            const selColor = has(this.props, 'data.decimateKey') ? selectionRectColor : selectionRectColorGray;
-            this.selectionRect = chart.renderer.rect(Math.min(xMinPx, xMaxPx), Math.min(yMinPx, yMaxPx), width, height, 1)
-                .attr({
-                    fill: selColor,
-                    stroke: '#8c8c8c',
-                    'stroke-width': 0.5,
-                    zIndex: 7 // same as Highcharts' selectionMrker rectangle
-                })
-                .add();
-        }
-    }
-
-    onSelectionEvent(event) {
-        const xAxis = event.xAxis[0];
-        const yAxis = event.yAxis[0];
-
-        if (xAxis && yAxis) {
-            this.props.onSelection({xMin: xAxis.min, xMax: xAxis.max, yMin: yAxis.min, yMax: yAxis.max});
-        }
-    }
-
-    makeSeries(chart) {
-        //const chart = this.refs.chart && this.refs.chart.getChart();
-        if (chart && chart.container) {
-            const {data, params, selectInfo, highlighted, onHighlightChange} = this.props;
-            const {rows, decimateKey, weightMin, weightMax} = data;
-
-            let allSeries, marker;
-
-            const highlightedData = [];
-            if (!isUndefined(highlighted)) {
-                highlightedData.push(highlighted);
-            }
-
-            const point = {
-                events: {
-                    click() {
-                        if (onHighlightChange) {
-                            var highlightedIdx = this.rowIdx ? this.rowIdx : this.series.data.indexOf(this);
-                            if (highlightedIdx !== highlighted.rowIdx) {
-                                onHighlightChange(highlightedIdx);
-                            }
-                        }
-                    }
-                }
-            };
-
-            if (!decimateKey) {
-                const hasXErrors = plotErrors(params, 'x');
-                const hasYErrors = plotErrors(params, 'y');
-                const hasErrorBars = hasXErrors || hasYErrors;
-
-                let selectedRows = [];
-                if (selectInfo) {
-                    const selectInfoCls = SelectInfo.newInstance(selectInfo, 0);
-
-                    selectedRows = rows.reduce((selrows, arow) => {
-                        if (selectInfoCls.isSelected(arow['rowIdx'])) {
-                            selrows.push(arow);
-                        }
-                        return selrows;
-                    }, []);
-                }
-
-                marker = {symbol: 'circle', radius: 3};
-
-                allSeries = [];
-                if (hasXErrors) {
-                    const xErrRows = rows.filter((r) => (Number.isFinite(r['left']) && Number.isFinite(r['right'])));
-                    xErrRows.sort((r1,r2) => (r1['x']-r2['x']));
-                    allSeries.push({
-                        id: XERROR,
-                        name: XERROR,
-                        type: 'error_bar',
-                        animation: false,
-                        format: 'x',
-                        color: errorBarColor,
-                        lineWidth: 1,
-                        whiskerLength: (xErrRows.length > 20) ? 0 : 3,
-                        data: xErrRows,
-                        turboThreshold: 0,
-                        showInLegend: false,
-                        enableMouseTracking: false
-                    });
-                }
-                if (hasYErrors) {
-                    const yErrRows = rows.filter((r) => (Number.isFinite(r['low']) && Number.isFinite(r['high'])));
-                    yErrRows.sort((r1,r2) => (r1['x']-r2['x']));
-                    allSeries.push({
-                        id: YERROR,
-                        name: YERROR,
-                        type: 'error_bar',
-                        animation: false,
-                        format: 'y',
-                        animation: false,
-                        color: errorBarColor,
-                        lineWidth: 1,
-                        whiskerLength: (yErrRows.length > 20) ? 0 : 3,
-                        data: yErrRows,
-                        turboThreshold: 0,
-                        showInLegend: false,
-                        enableMouseTracking: false
-                    });
-                }
-                allSeries.push({
-                    id: DATAPOINTS,
-                    name: DATAPOINTS,
-                    type: isLinePlot(params.plotStyle) ? 'line' : 'scatter',
-                    color: hasErrorBars? datapointsColorWithErrors : datapointsColor,
-                    data: rows,
-                    marker,
-                    turboThreshold: 0,
-                    showInLegend: false,
-                    point
-                });
-                allSeries.push({
-                    id: SELECTED,
-                    name: SELECTED,
-                    color: hasErrorBars? selectedColorWithErrors : selectedColor,
-                    data: selectedRows,
-                    marker,
-                    turboThreshold: 0,
-                    showInLegend: false,
-                    point
-                });
-            } else {
-                const {xUnitPx, yUnitPx} = getDeciSymbolSize(chart, decimateKey);
-                marker = {symbol: 'rectangle', radius: xUnitPx/2.0, hD: (xUnitPx-yUnitPx)/2.0};
-
-                const {xMin, xUnit, yMin, yUnit} = parseDecimateKey(decimateKey);
-                const getCenter = (xval,yval) => {
-                    return {
-                        // bitwise operators convert operands to 32-bit integer
-                        // hence they can be used as a fast way to truncate a float to an integer
-                        x: xMin+(~~((xval-xMin)/xUnit)+0.5)*xUnit,
-                        y: yMin+(~~((yval-yMin)/yUnit)+0.5)*yUnit
-                    };
-                };
-
-                // split into 6 groups by weight
-                const numericDataArr = [[],[],[],[],[],[]];
-                for (var i= 0, l = rows.length; i < l; i++) {
-                    const {x:ptX,y:ptY,rowIdx, weight} = rows[i];
-                    const group = getWeightBasedGroup(weight, weightMin, weightMax, params.shading==='log');
-                    const {x,y} = getCenter(ptX, ptY);
-                    numericDataArr[group-1].push({x, y, rowIdx, weight});
-                }
-
-                // 5 colors (use http://colorbrewer2.org)
-                const weightBasedColors = ['#d9d9d9', '#BDBDBD', '#969696', '#737373', '#525252', '#252525'];
-
-                allSeries = numericDataArr.map((numericData, idx) => {
-                    return {
-                        id: DATAPOINTS+idx,
-                        name: getWeightedDataDescr(DATAPOINTS+idx, numericData, weightMin, weightMax, params.shading==='log'),
-                        color: weightBasedColors[idx],
-                        data: numericData,
-                        marker,
-                        turboThreshold: 0,
-                        showInLegend: numericData.length>0 && (xUnitPx>2 && xUnitPx<20 && yUnitPx>2 && yUnitPx<20), // legend symbol size can not be adjusted as of now
-                        point
-                    };
-                });
-            }
-
-            try {
-                allSeries.forEach((series) => {
-                    chart.addSeries(series, false, false);
-                });
-
-                chart.addSeries({
-                    id: HIGHLIGHTED,
-                    name: HIGHLIGHTED,
-                    color: highlightedColor,
-                    marker: {symbol: 'circle', radius: 4, lineColor: '#737373', lineWidth: 1},
-                    data: highlightedData,
-                    showInLegend: false
-                }, true, false);
-            } catch (error) {
-                this.error = error;
-                chart.showLoading(error);
-            }
-        }
+        return (
+            !(shallowequal(omit(this.props, propsToOmit), omit(nextProps, propsToOmit)) &&
+            get(this.props, 'highlighted.rowIdx') === get(nextProps, 'highlighted.rowIdx')) );
     }
 
     render() {
-        const {data, params, width, height, onSelection, desc} = this.props;
+
+        const {data, params} = this.props;
 
         // validate parameters for the given data
         const errors = validate(params, data);
         if (errors.length > 0) {
-            this.error = errors[0];
             return (
                 <div style={{position: 'relative', width: '100%', height: '100%'}}>
                     {errors.map((error, i) => {
@@ -710,169 +220,10 @@ export class XYPlot extends React.Component {
                     })}
                 </div>
             );
+        } else {
+            const XYPlotInstance=  get(getAppOptions(), 'charts.chartEngine')==='plotly' ? XYPlotPlotly : XYPlotHighcharts;
+            return (<XYPlotInstance {...this.props}/>);
         }
-
-        // render chart
-        this.error = undefined;
-        const onSelectionEvent = this.onSelectionEvent;
-        const {chartWidth, chartHeight} = calculateChartSize(width, height, this.props);
-
-        const {xTitle, xGrid, xReversed, xOpposite, xLog} = getXAxisOptions(params);
-        const {yTitle, yGrid, yReversed, yOpposite, yLog} = getYAxisOptions(params);
-        const {xMin, xMax, yMin, yMax} = getZoomSelection(params);
-        const {decimateKey, x, y} = data;
-        const {xMin:xDataMin, xMax:xDataMax, yMin:yDataMin, yMax:yDataMax} = get(params, 'boundaries', {});
-        // bin center and expression values need to be formatted
-        const xFormat = (decimateKey || (x && x.match(/\W/))) ? getFormatString(Math.abs(xDataMax-xDataMin), 4) : undefined;
-        const yFormat = (decimateKey || (y && y.match(/\W/))) ? getFormatString(Math.abs(yDataMax-yDataMin), 4) : undefined;
-
-        const makeSeries = this.makeSeries;
-
-        const component = this;
-
-        var config = {
-            chart: {
-                animation: this.shouldAnimate(),
-                renderTo: 'container',
-                type: 'scatter',
-                alignTicks: false,
-                height: chartHeight,
-                width: chartWidth,
-                borderColor: '#a5a5a5',
-                borderWidth: 1,
-                zoomType: 'xy',
-                events: {
-                    click() {
-                        if (component.props.params.selection && onSelection) {
-                            onSelection();
-                        }
-                    },
-                    selection(event) {
-                        if (onSelection) {
-                            onSelectionEvent(event);
-                            // prevent the default behavior
-                            return false;
-                        } else {
-                            // do the default behavior - zoom
-                            return true;
-                        }
-                    },
-                    load() {
-                        makeSeries(this);
-                        return true;
-                    }
-                },
-                resetZoomButton: {
-                    theme: {
-                        display: 'none'
-                    }
-                },
-                selectionMarkerFill: decimateKey? selectionRectColor : selectionRectColorGray
-            },
-            exporting: {
-                enabled: true
-            },
-            legend: {
-                enabled: true,
-                align: 'right',
-                layout: 'vertical',
-                verticalAlign: 'top',
-                symbolHeight: 12,
-                symbolWidth: 12,
-                symbolRadius: 6
-            },
-            plotOptions: {
-                series: {
-                    animation: false,
-                    cursor: 'pointer',
-                    stickyTracking: false
-                },
-                line: {
-                    marker: {
-                        enabled: params.plotStyle === 'linepoints'
-                    },
-                    states: {
-                        hover: {
-                            lineWidthPlus: 0 // do not increase line width when hovering over the series, default is 1
-                        }
-                    }
-                }
-            },
-            title: {
-                text: desc
-            },
-            tooltip: {
-                snap: 10,
-                borderWidth: 1,
-                formatter() {
-                    const weight = this.point.weight ? `represents ${this.point.weight} points <br/>` : '';
-                    const xval = xFormat ? numeral(this.point.x).format(xFormat) : this.point.x;
-                    const xerr = formatError(this.point.x, this.point.xErr, this.point.xErrLow, this.point.xErrHigh);
-                    const yval = yFormat ? numeral(this.point.y).format(yFormat) : this.point.y;
-                    const yerr = formatError(this.point.y, this.point.yErr, this.point.yErrLow, this.point.yErrHigh);
-                    return '<span> ' + `${params.x.label} = ${xval} ${xerr} ${params.x.unit} <br/>` +
-                        `${params.y.label} = ${yval} ${yerr} ${params.y.unit} <br/> ` +
-                        `${weight}</span>`;
-                },
-                shadow: !(decimateKey),
-                useHTML: Boolean((decimateKey))
-            },
-            xAxis: {
-                min: selFiniteMax(xMin, xDataMin),
-                max: selFiniteMin(xMax, xDataMax),
-                gridLineColor: '#e9e9e9',
-                gridLineWidth: xGrid ? 1 : 0,
-                lineColor: '#999',
-                tickColor: '#ccc',
-                opposite: xOpposite,
-                reversed: xReversed,
-                title: {text: xTitle},
-                type: xLog ? 'logarithmic' : 'linear'
-            },
-            yAxis: {
-                min: selFiniteMax(yMin,yDataMin),
-                max: selFiniteMin(yMax,yDataMax),
-                gridLineColor: '#e9e9e9',
-                gridLineWidth: yGrid ? 1 : 0,
-                tickWidth: 1,
-                tickLength: 10,
-                tickColor: '#ccc',
-                lineWidth: 1,
-                lineColor: '#999',
-                endOnTick: false,
-                opposite: yOpposite,
-                reversed: yReversed,
-                title: {text: yTitle},
-                type: yLog ? 'logarithmic' : 'linear'
-            },
-            series: [{
-                // This series is to make sure the axes are created.
-                // Without actual series, xAxis creation is deferred
-                // and there is no way to get value to pixel conversion
-                // for sizing the symbol
-                id: MINMAX,
-                name: MINMAX,
-                color: 'rgba(240, 240, 240, 0.1)',
-                marker: {radius: 1},
-                data: decimateKey? [[selFiniteMax(xMin, xDataMin), selFiniteMax(yMin,yDataMin)], [selFiniteMin(xMax, xDataMax), selFiniteMin(yMax,yDataMax)]]:[],
-                showInLegend: false,
-                enableMouseTracking: false,
-                states: {
-                    hover: {
-                        enabled: false
-                    }
-                }
-            }],
-            credits: {
-                enabled: false // removes a reference to Highcharts.com from the chart
-            }
-        };
-
-        return (
-            <div style={chartWidth<width?{float: 'left'}:{}}>
-                <ReactHighcharts config={config} isPureConfig={true} ref='chart'/>
-            </div>
-        );
     }
 }
 
diff --git a/src/firefly/js/charts/ui/XYPlotHighcharts.jsx b/src/firefly/js/charts/ui/XYPlotHighcharts.jsx
new file mode 100644
index 0000000000..9f4a85702e
--- /dev/null
+++ b/src/firefly/js/charts/ui/XYPlotHighcharts.jsx
@@ -0,0 +1,680 @@
+/*
+ * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
+ */
+import {isUndefined, debounce, get, has, omit} from 'lodash';
+import shallowequal from 'shallowequal';
+import React, {PropTypes} from 'react';
+import ReactHighcharts from 'react-highcharts';
+import {xyErrorBarExtension} from '../highcharts/XYErrorBars.js';
+
+import {SelectInfo} from '../../tables/SelectInfo.js';
+import {parseDecimateKey} from '../../tables/Decimate.js';
+
+import numeral from 'numeral';
+import {getFormatString} from '../../util/MathUtil.js';
+
+import {plotParamsShape, plotDataShape} from './XYPlotPropTypes.js';
+import {calculateChartSize, getWeightBasedGroup, getWeightedDataDescr,
+    getXAxisOptions, getYAxisOptions, getZoomSelection, formatError, isDataSeries, isLinePlot, plotErrors,
+    selFiniteMin, selFiniteMax, validate} from './XYPlot.jsx';
+
+
+
+xyErrorBarExtension(ReactHighcharts.Highcharts);
+
+const defaultShading = 'lin';
+
+const DATAPOINTS = 'data';
+const XERROR = 'xerror';
+const YERROR = 'yerror';
+const SELECTED = 'selected';
+const HIGHLIGHTED = 'highlighted';
+const MINMAX = 'minmax';
+
+const datapointsColor = 'rgba(63, 127, 191, 0.5)';
+const datapointsColorWithErrors = 'rgba(63, 127, 191, 0.7)';
+const errorBarColor = 'rgba(63, 127, 191, 0.5)'; //'rgba(255, 209, 128, 0.5)';
+const selectedColorWithErrors = 'rgba(255, 200, 0, 1)';
+const selectedColor = 'rgba(255, 200, 0, 1)';
+const highlightedColor = 'rgba(255, 165, 0, 1)';
+const selectionRectColor = 'rgba(255, 209, 128, 0.5)';
+const selectionRectColorGray = 'rgba(165, 165, 165, 0.5)';
+
+/*
+ A symbol to represent decimated series. The size of the rectangle depends of the decimation unit
+ @param x lower left corner of the rectangle: ptX-options.radius
+ @param y lower left corner of the rectangle: ptY-options.radius
+ @param w width of the rectangle (2*options.radius)
+ @param h height of the rectangle (2*options.radius)
+ @param options {object} has hD - half difference between width and height of the rectangle
+ */
+ReactHighcharts.Highcharts.SVGRenderer.prototype.symbols.rectangle = function (x, y, w, h, options) {
+    const hD = get(options, 'hD', Math.round(h/4));
+    // SVG path for the rectangle
+    return [
+        'M', x, y+hD,
+        'L', x+w, y+hD,
+        x+w, y+h-hD,
+        x, y+h-hD,
+        'Z'];
+};
+
+/*
+ * Since decimated symbol should accurately reflect bin size,
+ * the size of the symbol depends on the chart size.
+ * @param {object} Highcharts' Chart object
+ * @param {string} decimate key string (contains binning info)
+ * @returns {object} x and y pixel size if the bin
+ */
+const getDeciSymbolSize = function(chart, decimateKeyStr) {
+    const {xUnit,yUnit} = parseDecimateKey(decimateKeyStr);
+
+    const getPxSize = (axis, unit) => {
+        const {min} = axis.getExtremes();
+        const max = min+unit;
+        const minPx = axis.toPixels(min);
+        const maxPx = axis.toPixels(max);
+        let unitPx = Math.abs(maxPx-minPx);
+        if (unitPx < 2) { unitPx = 2; }
+        return unitPx;
+    };
+
+    const xUnitPx = getPxSize(chart.xAxis[0], xUnit);
+    const yUnitPx = getPxSize(chart.yAxis[0], yUnit);
+    return {xUnitPx, yUnitPx};
+};
+
+
+export class XYPlotHighcharts extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.updateSelectionRect = this.updateSelectionRect.bind(this);
+        this.adjustPlotDisplay = this.adjustPlotDisplay.bind(this);
+        this.debouncedResize = this.debouncedResize.bind(this);
+        this.onSelectionEvent = this.onSelectionEvent.bind(this);
+        this.shouldAnimate = this.shouldAnimate.bind(this);
+        this.makeSeries = this.makeSeries.bind(this);
+    }
+
+    shouldComponentUpdate(nextProps) {
+
+        const propsToOmit = ['onHighlightChange', 'onSelection', 'highlighted'];
+
+        // no update is needed if properties did ot change
+        if (shallowequal(omit(this.props, propsToOmit), omit(nextProps, propsToOmit)) &&
+            get(this.props,'highlighted.rowIdx') === get(nextProps,'highlighted.rowIdx')) {
+            return false;
+        }
+
+        const {data, width, height, params, highlighted, selectInfo, desc} = this.props;
+
+        // only re-render when the plot data change or an error occurs
+        // shading change for density plot changes series
+        if (nextProps.data !== data ||
+            get(params, 'plotStyle') !== get(nextProps.params, 'plotStyle') ||
+            plotErrors(params, 'x') !== plotErrors(nextProps.params, 'x') ||
+            plotErrors(params, 'y') !== plotErrors(nextProps.params, 'y') ||
+            get(params, 'shading', defaultShading) !== get(nextProps.params, 'shading', defaultShading)) {
+            return true;
+        } else {
+            const chart = this.refs.chart && this.refs.chart.getChart();
+            if (chart && chart.container && !this.error) {
+                const {params:newParams, width:newWidth, height:newHeight, highlighted:newHighlighted, selectInfo:newSelectInfo, desc:newDesc } = nextProps;
+                try {
+                    const errors = validate(newParams, data);
+                    if (errors.length > 0) {
+                        this.error = errors[0];
+                        chart.showLoading(errors[0]);
+                        return false;
+                    }
+
+                    if (newDesc !== desc) {
+                        chart.setTitle(newDesc, undefined, false);
+                    }
+
+                    // selection change (selection is not supported for decimated data)
+                    if (data && data.rows && !data.decimateKey && newSelectInfo !== selectInfo) {
+                        const selectedData = [];
+                        if (newSelectInfo) {
+                            const selectInfoCls = SelectInfo.newInstance(newSelectInfo, 0);
+                            data.rows.forEach((arow) => {
+                                if (selectInfoCls.isSelected(arow['rowIdx'])) {
+                                    selectedData.push(arow);
+                                }
+                            });
+                        }
+                        chart.get(SELECTED).setData(selectedData);
+                    }
+
+                    // highlight change
+                    if (!shallowequal(highlighted, newHighlighted)) {
+                        const highlightedData = [];
+                        if (!isUndefined(newHighlighted)) {
+                            highlightedData.push(newHighlighted);
+                        }
+                        chart.get(HIGHLIGHTED).setData(highlightedData);
+                    }
+
+
+                    // plot parameters change
+                    if (params !== newParams) {
+                        const xoptions = {};
+                        const yoptions = {};
+                        const newXOptions = getXAxisOptions(newParams);
+                        const newYOptions = getYAxisOptions(newParams);
+                        if (!shallowequal(getXAxisOptions(params), newXOptions)) {
+                            Object.assign(xoptions, {
+                                title: {text: newXOptions.xTitle},
+                                gridLineWidth: newXOptions.xGrid ? 1 : 0,
+                                reversed: newXOptions.xReversed,
+                                opposite: newXOptions.xOpposite,
+                                type: newXOptions.xLog ? 'logarithmic' : 'linear'
+                            });
+                        }
+                        if (!shallowequal(getYAxisOptions(params), newYOptions)) {
+                            Object.assign(yoptions, {
+                                title: {text: newYOptions.yTitle},
+                                gridLineWidth: newYOptions.yGrid ? 1 : 0,
+                                reversed: newYOptions.yReversed,
+                                opposite: newYOptions.yOpposite,
+                                type: newYOptions.yLog ? 'logarithmic' : 'linear'
+                            });
+                        }
+                        if (!shallowequal(params.zoom, newParams.zoom) || !shallowequal(params.boundaries, newParams.boundaries)) {
+                            const {xMin, xMax, yMin, yMax} = getZoomSelection(newParams);
+                            const {xMin:xDataMin, xMax:xDataMax, yMin:yDataMin, yMax:yDataMax} = get(newParams, 'boundaries', {});
+                            Object.assign(xoptions, {min: selFiniteMax(xMin, xDataMin), max: selFiniteMin(xMax, xDataMax)});
+                            Object.assign(yoptions, {min: selFiniteMax(yMin, yDataMin), max: selFiniteMin(yMax, yDataMax)});
+                            chart.get(MINMAX).setData([[xoptions.min, yoptions.min], [xoptions.max, yoptions.max]], false, false, false);
+                        }
+                        const xUpdate = Reflect.ownKeys(xoptions).length > 0;
+                        const yUpdate = Reflect.ownKeys(yoptions).length > 0;
+                        if (xUpdate || yUpdate) {
+                            const animate = this.shouldAnimate();
+                            xUpdate && chart.xAxis[0].update(xoptions, !yUpdate, animate);
+                            yUpdate && chart.yAxis[0].update(yoptions, true, animate);
+                        }
+
+                        if (!shallowequal(params.selection, newParams.selection)) {
+                            this.updateSelectionRect(newParams.selection);
+                        }
+
+                    }
+
+                    // size change
+                    if (newWidth !== width || newHeight !== height ||
+                        newParams.xyRatio !== params.xyRatio || newParams.stretch !== params.stretch) {
+                        const {chartWidth, chartHeight} = calculateChartSize(newWidth, newHeight, nextProps);
+                        if (Math.abs(chart.chartWidth - chartWidth) > 20 || Math.abs(chart.chartHeight - chartHeight) > 20) {
+
+                            if (get(nextProps, ['data', 'decimateKey'])) {
+                                // hide all series for resize
+                                chart.series.forEach((series) => {
+                                    series.setVisible(false, false);
+                                });
+                                chart.showLoading('Resizing');
+                            }
+                            chart.setSize(chartWidth, chartHeight, false);
+
+                            if (this.pendingResize) {
+                                // if resize is slow, we want to do it only once
+                                this.pendingResize.cancel();
+                            }
+                            this.pendingResize = this.debouncedResize();
+                            this.pendingResize();
+                        }
+                    }
+                } catch (error) {
+                    this.error = error;
+                    chart.showLoading(error);
+                }
+
+                return false;
+            }
+            return true;
+        }
+    }
+
+    componentDidMount() {
+        this.adjustPlotDisplay();
+    }
+
+    componentDidUpdate() {
+        this.adjustPlotDisplay();
+    }
+
+    debouncedResize() {
+        return debounce(() => {
+            const chart = this.refs.chart && this.refs.chart.getChart();
+            if (chart && chart.container) {
+                const {data} = this.props;
+                if (data.decimateKey) {
+                    // update marker's size
+                    const {xUnitPx, yUnitPx} = getDeciSymbolSize(chart, data.decimateKey);
+                    chart.series.forEach((series) => {
+                        isDataSeries(series.name) && series.update({
+                            marker: {radius: xUnitPx/2.0, hD: (xUnitPx-yUnitPx)/2.0}}, false);
+                        series.setVisible(true, false);
+                    });
+                    chart.redraw();
+                    chart.hideLoading();
+                }
+            }
+            this.pendingResize = null;
+        }, 300);
+    }
+
+    shouldAnimate() {
+        const {data} = this.props;
+        return (!data || !data.rows || data.rows.length <= 250);
+    }
+
+    adjustPlotDisplay() {
+        const {params} = this.props;
+
+        // can add more chart events here like
+        // chart.bind('selection', (event) => {});
+
+        if (params.selection) {
+            this.updateSelectionRect(params.selection);
+        }
+    }
+
+    updateSelectionRect(selection) {
+        const chart = this.refs.chart.getChart();
+
+        if (this.selectionRect) {
+            this.selectionRect.destroy();
+            this.selectionRect = undefined;
+        }
+        if (selection) {
+            const xMinPx = chart.xAxis[0].toPixels(selection.xMin);
+            const xMaxPx = chart.xAxis[0].toPixels(selection.xMax);
+            const yMinPx = chart.yAxis[0].toPixels(selection.yMin);
+            const yMaxPx = chart.yAxis[0].toPixels(selection.yMax);
+            const width = Math.abs(xMaxPx - xMinPx);
+            const height = Math.abs(yMaxPx - yMinPx);
+            const selColor = has(this.props, 'data.decimateKey') ? selectionRectColor : selectionRectColorGray;
+            this.selectionRect = chart.renderer.rect(Math.min(xMinPx, xMaxPx), Math.min(yMinPx, yMaxPx), width, height, 1)
+                .attr({
+                    fill: selColor,
+                    stroke: '#8c8c8c',
+                    'stroke-width': 0.5,
+                    zIndex: 7 // same as Highcharts' selectionMrker rectangle
+                })
+                .add();
+        }
+    }
+
+    onSelectionEvent(event) {
+        const xAxis = event.xAxis[0];
+        const yAxis = event.yAxis[0];
+
+        if (xAxis && yAxis) {
+            this.props.onSelection({xMin: xAxis.min, xMax: xAxis.max, yMin: yAxis.min, yMax: yAxis.max});
+        }
+    }
+
+    makeSeries(chart) {
+        //const chart = this.refs.chart && this.refs.chart.getChart();
+        if (chart && chart.container) {
+            const {data, params, selectInfo, highlighted, onHighlightChange} = this.props;
+            const {rows, decimateKey, weightMin, weightMax} = data;
+
+            let allSeries, marker;
+
+            const highlightedData = [];
+            if (!isUndefined(highlighted)) {
+                highlightedData.push(highlighted);
+            }
+
+            const point = {
+                events: {
+                    click() {
+                        if (onHighlightChange) {
+                            var highlightedIdx = this.rowIdx ? this.rowIdx : this.series.data.indexOf(this);
+                            if (highlightedIdx !== highlighted.rowIdx) {
+                                onHighlightChange(highlightedIdx);
+                            }
+                        }
+                    }
+                }
+            };
+
+            if (!decimateKey) {
+                const hasXErrors = plotErrors(params, 'x');
+                const hasYErrors = plotErrors(params, 'y');
+                const hasErrorBars = hasXErrors || hasYErrors;
+
+                let selectedRows = [];
+                if (selectInfo) {
+                    const selectInfoCls = SelectInfo.newInstance(selectInfo, 0);
+
+                    selectedRows = rows.reduce((selrows, arow) => {
+                        if (selectInfoCls.isSelected(arow['rowIdx'])) {
+                            selrows.push(arow);
+                        }
+                        return selrows;
+                    }, []);
+                }
+
+                marker = {symbol: 'circle', radius: 3};
+
+                allSeries = [];
+                if (hasXErrors) {
+                    const xErrRows = rows.filter((r) => (Number.isFinite(r['left']) && Number.isFinite(r['right'])));
+                    xErrRows.sort((r1,r2) => (r1['x']-r2['x']));
+                    allSeries.push({
+                        id: XERROR,
+                        name: XERROR,
+                        type: 'error_bar',
+                        animation: false,
+                        format: 'x',
+                        color: errorBarColor,
+                        lineWidth: 1,
+                        whiskerLength: (xErrRows.length > 20) ? 0 : 3,
+                        data: xErrRows,
+                        turboThreshold: 0,
+                        showInLegend: false,
+                        enableMouseTracking: false
+                    });
+                }
+                if (hasYErrors) {
+                    const yErrRows = rows.filter((r) => (Number.isFinite(r['low']) && Number.isFinite(r['high'])));
+                    yErrRows.sort((r1,r2) => (r1['x']-r2['x']));
+                    allSeries.push({
+                        id: YERROR,
+                        name: YERROR,
+                        type: 'error_bar',
+                        animation: false,
+                        format: 'y',
+                        animation: false,
+                        color: errorBarColor,
+                        lineWidth: 1,
+                        whiskerLength: (yErrRows.length > 20) ? 0 : 3,
+                        data: yErrRows,
+                        turboThreshold: 0,
+                        showInLegend: false,
+                        enableMouseTracking: false
+                    });
+                }
+                allSeries.push({
+                    id: DATAPOINTS,
+                    name: DATAPOINTS,
+                    type: isLinePlot(params.plotStyle) ? 'line' : 'scatter',
+                    color: hasErrorBars? datapointsColorWithErrors : datapointsColor,
+                    data: rows,
+                    marker,
+                    turboThreshold: 0,
+                    showInLegend: false,
+                    point
+                });
+                allSeries.push({
+                    id: SELECTED,
+                    name: SELECTED,
+                    color: hasErrorBars? selectedColorWithErrors : selectedColor,
+                    data: selectedRows,
+                    marker,
+                    turboThreshold: 0,
+                    showInLegend: false,
+                    point
+                });
+            } else {
+                const {xUnitPx, yUnitPx} = getDeciSymbolSize(chart, decimateKey);
+                marker = {symbol: 'rectangle', radius: xUnitPx/2.0, hD: (xUnitPx-yUnitPx)/2.0};
+
+                const {xMin, xUnit, yMin, yUnit} = parseDecimateKey(decimateKey);
+                const getCenter = (xval,yval) => {
+                    return {
+                        // bitwise operators convert operands to 32-bit integer
+                        // hence they can be used as a fast way to truncate a float to an integer
+                        x: xMin+(~~((xval-xMin)/xUnit)+0.5)*xUnit,
+                        y: yMin+(~~((yval-yMin)/yUnit)+0.5)*yUnit
+                    };
+                };
+
+                // split into 6 groups by weight
+                const numericDataArr = [[],[],[],[],[],[]];
+                for (var i= 0, l = rows.length; i < l; i++) {
+                    const {x:ptX,y:ptY,rowIdx, weight} = rows[i];
+                    const group = getWeightBasedGroup(weight, weightMin, weightMax, params.shading==='log');
+                    const {x,y} = getCenter(ptX, ptY);
+                    numericDataArr[group-1].push({x, y, rowIdx, weight});
+                }
+
+                // 5 colors (use http://colorbrewer2.org)
+                const weightBasedColors = ['#d9d9d9', '#BDBDBD', '#969696', '#737373', '#525252', '#252525'];
+
+                allSeries = numericDataArr.map((numericData, idx) => {
+                    return {
+                        id: DATAPOINTS+idx,
+                        name: getWeightedDataDescr(DATAPOINTS+idx, numericData, weightMin, weightMax, params.shading==='log'),
+                        color: weightBasedColors[idx],
+                        data: numericData,
+                        marker,
+                        turboThreshold: 0,
+                        showInLegend: numericData.length>0 && (xUnitPx>2 && xUnitPx<20 && yUnitPx>2 && yUnitPx<20), // legend symbol size can not be adjusted as of now
+                        point
+                    };
+                });
+            }
+
+            try {
+                allSeries.forEach((series) => {
+                    chart.addSeries(series, false, false);
+                });
+
+                chart.addSeries({
+                    id: HIGHLIGHTED,
+                    name: HIGHLIGHTED,
+                    color: highlightedColor,
+                    marker: {symbol: 'circle', radius: 4, lineColor: '#737373', lineWidth: 1},
+                    data: highlightedData,
+                    showInLegend: false
+                }, true, false);
+            } catch (error) {
+                this.error = error;
+                chart.showLoading(error);
+            }
+        }
+    }
+
+    render() {
+        const {data, params, width, height, onSelection, desc} = this.props;
+
+
+        // render chart
+        this.error = undefined;
+        const onSelectionEvent = this.onSelectionEvent;
+        const {chartWidth, chartHeight} = calculateChartSize(width, height, this.props);
+
+        const {xTitle, xGrid, xReversed, xOpposite, xLog} = getXAxisOptions(params);
+        const {yTitle, yGrid, yReversed, yOpposite, yLog} = getYAxisOptions(params);
+        const {xMin, xMax, yMin, yMax} = getZoomSelection(params);
+        const {decimateKey, x, y} = data;
+        const {xMin:xDataMin, xMax:xDataMax, yMin:yDataMin, yMax:yDataMax} = get(params, 'boundaries', {});
+        // bin center and expression values need to be formatted
+        const xFormat = (decimateKey || (x && x.match(/\W/))) ? getFormatString(Math.abs(xDataMax-xDataMin), 4) : undefined;
+        const yFormat = (decimateKey || (y && y.match(/\W/))) ? getFormatString(Math.abs(yDataMax-yDataMin), 4) : undefined;
+
+        const makeSeries = this.makeSeries;
+
+        const component = this;
+
+        var config = {
+            chart: {
+                animation: this.shouldAnimate(),
+                renderTo: 'container',
+                type: 'scatter',
+                alignTicks: false,
+                height: chartHeight,
+                width: chartWidth,
+                borderColor: '#a5a5a5',
+                borderWidth: 1,
+                zoomType: 'xy',
+                events: {
+                    click() {
+                        if (component.props.params.selection && onSelection) {
+                            onSelection();
+                        }
+                    },
+                    selection(event) {
+                        if (onSelection) {
+                            onSelectionEvent(event);
+                            // prevent the default behavior
+                            return false;
+                        } else {
+                            // do the default behavior - zoom
+                            return true;
+                        }
+                    },
+                    load() {
+                        makeSeries(this);
+                        return true;
+                    }
+                },
+                resetZoomButton: {
+                    theme: {
+                        display: 'none'
+                    }
+                },
+                selectionMarkerFill: decimateKey? selectionRectColor : selectionRectColorGray
+            },
+            exporting: {
+                enabled: true
+            },
+            legend: {
+                enabled: true,
+                align: 'right',
+                layout: 'vertical',
+                verticalAlign: 'top',
+                symbolHeight: 12,
+                symbolWidth: 12,
+                symbolRadius: 6
+            },
+            plotOptions: {
+                series: {
+                    animation: false,
+                    cursor: 'pointer',
+                    stickyTracking: false
+                },
+                line: {
+                    marker: {
+                        enabled: params.plotStyle === 'linepoints'
+                    },
+                    states: {
+                        hover: {
+                            lineWidthPlus: 0 // do not increase line width when hovering over the series, default is 1
+                        }
+                    }
+                }
+            },
+            title: {
+                text: desc
+            },
+            tooltip: {
+                snap: 10,
+                borderWidth: 1,
+                formatter() {
+                    const weight = this.point.weight ? `represents ${this.point.weight} points <br/>` : '';
+                    const xval = xFormat ? numeral(this.point.x).format(xFormat) : this.point.x;
+                    const xerr = formatError(this.point.x, this.point.xErr, this.point.xErrLow, this.point.xErrHigh);
+                    const yval = yFormat ? numeral(this.point.y).format(yFormat) : this.point.y;
+                    const yerr = formatError(this.point.y, this.point.yErr, this.point.yErrLow, this.point.yErrHigh);
+                    return '<span> ' + `${params.x.label} = ${xval} ${xerr} ${params.x.unit} <br/>` +
+                        `${params.y.label} = ${yval} ${yerr} ${params.y.unit} <br/> ` +
+                        `${weight}</span>`;
+                },
+                shadow: !(decimateKey),
+                useHTML: Boolean((decimateKey))
+            },
+            xAxis: {
+                min: selFiniteMax(xMin, xDataMin),
+                max: selFiniteMin(xMax, xDataMax),
+                gridLineColor: '#e9e9e9',
+                gridLineWidth: xGrid ? 1 : 0,
+                lineColor: '#999',
+                tickColor: '#ccc',
+                opposite: xOpposite,
+                reversed: xReversed,
+                title: {text: xTitle},
+                type: xLog ? 'logarithmic' : 'linear'
+            },
+            yAxis: {
+                min: selFiniteMax(yMin,yDataMin),
+                max: selFiniteMin(yMax,yDataMax),
+                gridLineColor: '#e9e9e9',
+                gridLineWidth: yGrid ? 1 : 0,
+                tickWidth: 1,
+                tickLength: 10,
+                tickColor: '#ccc',
+                lineWidth: 1,
+                lineColor: '#999',
+                endOnTick: false,
+                opposite: yOpposite,
+                reversed: yReversed,
+                title: {text: yTitle},
+                type: yLog ? 'logarithmic' : 'linear'
+            },
+            series: [{
+                // This series is to make sure the axes are created.
+                // Without actual series, xAxis creation is deferred
+                // and there is no way to get value to pixel conversion
+                // for sizing the symbol
+                id: MINMAX,
+                name: MINMAX,
+                color: 'rgba(240, 240, 240, 0.1)',
+                marker: {radius: 1},
+                data: decimateKey? [[selFiniteMax(xMin, xDataMin), selFiniteMax(yMin,yDataMin)], [selFiniteMin(xMax, xDataMax), selFiniteMin(yMax,yDataMax)]]:[],
+                showInLegend: false,
+                enableMouseTracking: false,
+                states: {
+                    hover: {
+                        enabled: false
+                    }
+                }
+            }],
+            credits: {
+                enabled: false // removes a reference to Highcharts.com from the chart
+            }
+        };
+
+        return (
+            <div style={chartWidth<width?{float: 'left'}:{}}>
+                <ReactHighcharts config={config} isPureConfig={true} ref='chart'/>
+            </div>
+        );
+    }
+}
+
+XYPlotHighcharts.propTypes = {
+    data: plotDataShape,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    params: plotParamsShape,
+    highlighted: PropTypes.shape({
+        x: PropTypes.number,
+        y: PropTypes.number,
+        rowIdx: PropTypes.number
+    }),
+    selectInfo: PropTypes.shape({
+        selectAll: PropTypes.bool,
+        exceptions: PropTypes.instanceOf(Set),
+        rowCount: PropTypes.number
+    }),
+    onHighlightChange: PropTypes.func,
+    onSelection: PropTypes.func,
+    desc: PropTypes.string
+};
+
+XYPlotHighcharts.defaultProps = {
+    data: undefined,
+    params: undefined,
+    highlighted: undefined,
+    onHighlightChange: undefined,
+    onSelection: undefined,
+    height: 300,
+    desc: 'Sample XY Plot'
+};
+
diff --git a/src/firefly/js/charts/ui/XYPlotOptions.jsx b/src/firefly/js/charts/ui/XYPlotOptions.jsx
index 7bf8074034..185463fb95 100644
--- a/src/firefly/js/charts/ui/XYPlotOptions.jsx
+++ b/src/firefly/js/charts/ui/XYPlotOptions.jsx
@@ -16,7 +16,7 @@ import {CheckboxGroupInputField} from '../../ui/CheckboxGroupInputField.jsx';
 import {RadioGroupInputField} from '../../ui/RadioGroupInputField.jsx';
 import {ListBoxInputField} from '../../ui/ListBoxInputField.jsx';
 import {FieldGroupCollapsible} from '../../ui/panel/CollapsiblePanel.jsx';
-import {plotParamsShape} from  './XYPlot.jsx';
+import {plotParamsShape} from './XYPlotPropTypes.js';
 import {hideColSelectPopup} from './ColSelectView.jsx';
 import {ColumnOrExpression, getColValidator} from './ColumnOrExpression.jsx';
 import {updateSet} from '../../util/WebUtil.js';
diff --git a/src/firefly/js/charts/ui/XYPlotPlotly.jsx b/src/firefly/js/charts/ui/XYPlotPlotly.jsx
new file mode 100644
index 0000000000..6f4be9fcdf
--- /dev/null
+++ b/src/firefly/js/charts/ui/XYPlotPlotly.jsx
@@ -0,0 +1,830 @@
+import {isUndefined, get, has, omit} from 'lodash';
+import shallowequal from 'shallowequal';
+import React, {PropTypes} from 'react';
+import sCompare from 'react-addons-shallow-compare';
+
+import {PlotlyWrapper} from './PlotlyWrapper.jsx';
+
+import {SelectInfo} from '../../tables/SelectInfo.js';
+import {parseDecimateKey} from '../../tables/Decimate.js';
+
+import numeral from 'numeral';
+import {getFormatString} from '../../util/MathUtil.js';
+
+import {plotParamsShape, plotDataShape} from './XYPlotPropTypes.js';
+import {calculateChartSize, getXAxisOptions, getYAxisOptions, getZoomSelection, formatError,
+    isLinePlot, plotErrors, selFiniteMin, selFiniteMax} from './XYPlot.jsx';
+
+const defaultShading = 'lin';
+
+const PLOTLY_CONFIG = {displayModeBar: false};
+
+const DATAPOINTS = 'data';
+const DATAPOINTS_HEATMAP = 'data_heatmap';
+const SELECTED = 'selected';
+const HIGHLIGHTED = 'highlighted';
+
+const datapointsColor = 'rgba(63, 127, 191, 0.5)';
+const datapointsColorWithErrors = 'rgba(63, 127, 191, 0.7)';
+const selectedColorWithErrors = 'rgba(255, 200, 0, 1)';
+const selectedColor = 'rgba(255, 200, 0, 1)';
+const highlightedColor = 'rgba(255, 165, 0, 1)';
+const selectionRectColor = 'rgba(255, 209, 128, 0.5)';
+const selectionRectColorGray = 'rgba(165, 165, 165, 0.5)';
+
+const Y_TICKLBL_PX = 90;
+const X_TICKLBL_PX = 60;
+const MIN_MARGIN_PX = 10;
+const MIN_YLBL_PX = 30;
+const FSIZE = 12;
+
+
+/**
+ * Get range for a plotly axis
+ * Plotly requires range to be reversed if the axis is reversed,
+ * and limits to be log if axis scale is log
+ * @param min - minimum value
+ * @param max - maximum value
+ * @param isLog - true, if an axis uses log scale
+ * @param isReversed - true, if the axis should be reversed
+ * @returns {Array<number>} an array for axis range property in plotly layout
+ */
+function getRange(min, max, isLog, isReversed) {
+    const [r1, r2] = isReversed ? [max, min] : [min, max];
+    return isLog ? [Math.log10(r1), Math.log10(r2)] : [r1, r2];
+}
+
+/**
+ * A function to make plotly data for the given properties
+ * @param props
+ * @returns {{plotlyData: Array, selectedRows: Array, toRowIdx: Map}} plotly data array, selected rows, and decimated key to row index map
+ */
+function makeSeries(props) {
+    const {data, params, selectInfo, highlighted} = props;
+    const {rows, decimateKey, weightMin, weightMax} = data;
+    const plotlyData = [];
+
+    if (rows.length < 1) { return {plotlyData}; }
+
+    let selectedRows = undefined; //the array with selected rows
+    let toRowIdx = undefined; //the map from decimate key of a bin to rowIdx
+
+    const highlightedData = [];
+
+
+    if (!decimateKey) {
+        const hasXErrors = plotErrors(params, 'x');
+        const hasYErrors = plotErrors(params, 'y');
+        const hasErrorBars = hasXErrors || hasYErrors;
+
+        selectedRows = [];
+        if (selectInfo) {
+            const selectInfoCls = SelectInfo.newInstance(selectInfo, 0);
+
+            selectedRows = rows.reduce((selrows, arow) => {
+                if (selectInfoCls.isSelected(arow['rowIdx'])) {
+                    selrows.push(arow);
+                }
+                return selrows;
+            }, []);
+        }
+
+        const errorAxes = ['x','y'];
+        const errors = errorAxes.map((axis) => {
+            const err = {visible: false};
+            if (get(params, [axis, 'error']) || get(params, [axis, 'errorLow']) || get(params, [axis, 'errorHigh'])) {
+                err.visible = true;
+                err.type = 'data';
+                err.color = datapointsColorWithErrors;
+                err.thickness = 1;
+                err.width = (rows.length > 20) ? 0 : 3;
+                if (get(params, [axis, 'error'])) {
+                    err.symmetric = true;
+                    err.array = rows.map((r) =>{return r[`${axis}Err`];});
+                } else {
+                    err.symmetric = false;
+                    if (get(params, [axis, 'errorHigh'])) {
+                        err.array = rows.map((r) => {return r[`${axis}ErrHigh`];});
+                    }
+                    if (get(params, [axis, 'errorLow'])) {
+                        err.arrayminus = rows.map((r) => {return r[`${axis}ErrLow`];});
+                    }
+                }
+            }
+            return err;
+        });
+
+        const x = [];
+        const y = [];
+        rows.forEach((r) => {
+            x.push(r.x);
+            y.push(r.y);
+        });
+
+        plotlyData.push({
+            name: DATAPOINTS,
+            type: 'scatter',
+            hoverinfo: 'text',
+            mode: !isLinePlot(params.plotStyle)? 'markers' : (params.plotStyle === 'line' ? 'lines' : 'lines+markers'),
+            marker: {
+                symbol: 'circle',
+                size: 6,
+                color: hasErrorBars? datapointsColorWithErrors : datapointsColor
+            },
+            showlegend: false,
+            error_x: errors[0],
+            error_y: errors[1],
+            x,
+            y,
+            text: generateTooltips(props, rows)
+        });
+        plotlyData.push({
+            name: SELECTED,
+            type: 'scatter',
+            hoverinfo: 'text',  // skip? to display the tooltips from the points under
+            mode: 'markers',
+            marker: {
+                symbol: 'circle',
+                size: 6,
+                color: hasErrorBars? selectedColorWithErrors : selectedColor
+            },
+            showlegend: false,
+            x: selectedRows.map((r)=>r['x']),
+            y: selectedRows.map((r)=>r['y']),
+            text: generateTooltips(props, selectedRows)
+        });
+        if (!isUndefined(highlighted)) {
+            highlightedData.push(highlighted);
+        }
+    } else {
+        const {xMin, xUnit, nX, yMin, yUnit, nY} = parseDecimateKey(decimateKey);
+        // get center point of the bin
+        const getCenter = (xval,yval) => {
+            return {
+                // bitwise operators convert operands to 32-bit integer
+                // hence they can be used as a fast way to truncate a float to an integer
+                x: xMin+(~~((xval-xMin)/xUnit)+0.5)*xUnit,
+                y: yMin+(~~((yval-yMin)/yUnit)+0.5)*yUnit
+            };
+        };
+
+        const x = [];
+        const y = [];
+        const z = [];
+        rows.forEach((r) => {
+            const centerPt = getCenter(r.x, r.y);
+            x.push(centerPt.x);
+            y.push(centerPt.y);
+            z.push(r.weight);
+        });
+
+        toRowIdx = new Map();
+        // map decimate key (bin identifier in the form 'x:y') to rowIdx
+        rows.forEach((r) => {
+            toRowIdx.set(r.decimate_key, r.rowIdx);
+        });
+
+        //to avoid showing variable cell heatmap,
+        //make sure the x and y values are populated for the empty bins
+        for (let i=0; i<nX; i++ ) {
+            for (let j = 0; j < nY; j++) {
+                if (!toRowIdx.has(`${i}:${j}`)) {
+                    x.push(xMin+(i+0.5)*xUnit);
+                    y.push(yMin+(j+0.5)*yUnit);
+                    z.push(undefined);
+                }
+            }
+        }
+
+        // to avoid axis and colorbar overlap,
+        // when axis on the right, move colorbar to the left
+        const {yOpposite} = getYAxisOptions(params);
+
+        const heatmap = {
+            name: DATAPOINTS_HEATMAP,
+            type: 'heatmap',
+            hoverinfo: 'text',
+            showlegend: true,
+            colorbar: {
+                xanchor: yOpposite ? 'right' : 'left',
+                x: yOpposite ? -0.02 : 1.02,
+                thickness: 10,
+                outlinewidth: 0,
+                title: 'pts'
+            },
+            x,
+            y,
+            z,
+            text: generateTooltips(props, rows)
+        };
+
+        if (get(params, 'shading', defaultShading) === defaultShading) {
+            heatmap.colorscale = [[0, 'rgb(240,240,240)'], [1, 'rgb(37,37,37)']];
+        } else if (weightMax - weightMin > 1) {
+            // 9 colors (use http://colorbrewer2.org)
+            const base = Math.pow(weightMax, 0.125); // 8 intervals
+            const colors9 = ['rgb(247,247,247)', 'rgb(240,240,240)', 'rgb(217,217,217)', 'rgb(189,189,189)',
+                'rgb(150,150,150)', 'rgb(115,115,115)', 'rgb(82,82,82)', 'rgb(37,37,37)', 'rgb(0,0,0)'];
+            heatmap.colorscale = colors9.map((c, i) => {
+                if (i === 0) { return [0, c]; }
+                else if (i === 8) { return [1.0, c]; }
+                else {return [Math.pow(base,i)/weightMax, c]; }
+            });
+        }
+        plotlyData.push(heatmap);
+
+        // add highlighted with weight
+        if (!isUndefined(highlighted)) {
+            highlightedData.push(highlightedWithWeight(props, toRowIdx));
+        }
+    }
+
+
+    plotlyData.push({
+        name: HIGHLIGHTED,
+        type: 'scatter',
+        hoverinfo: 'text',
+        mode: 'markers',
+        color: highlightedColor,
+        marker: {symbol: 'circle', size: 8, color: highlightedColor, line: {width: 1, color: '#737373'}},
+        x: highlightedData.map((r)=>r['x']),
+        y: highlightedData.map((r)=>r['y']),
+        showlegend: false,
+        text: generateTooltips(props, highlightedData)
+    });
+
+    return omit({plotlyData, selectedRows, toRowIdx}, isUndefined);
+}
+
+/**
+ * Returns new highlighted object with weight, if the data are decimated
+ * @param props
+ * @param toRowIdx
+ * @returns {*}
+ */
+function highlightedWithWeight(props, toRowIdx) {
+    const {data, highlighted} = props;
+    const {rows, decimateKey} = data;
+    if (rows.length > 0 && decimateKey) {
+        const {xMin, xUnit, yMin, yUnit} = parseDecimateKey(decimateKey);
+        const newHighlighted = Object.assign({}, highlighted);
+        const binXIdx = ~~((highlighted.x - xMin) / xUnit);
+        const binYIdx = ~~((highlighted.y - yMin) / yUnit);
+        const binRowIdx = toRowIdx.get(`${binXIdx}:${binYIdx}`);
+        if (binRowIdx >= 0) {
+            const binRow = rows.find((r) => (r.rowIdx === binRowIdx));
+            newHighlighted.weight = binRow.weight;
+        }
+        return newHighlighted;
+    } else {
+        return highlighted;
+    }
+
+}
+
+/**
+ * Generate tooltips
+ * @param props
+ * @param rows - data rows, an array of point defining objects
+ * @returns {Array.<string>} tooltips
+ */
+function generateTooltips(props, rows) {
+    const {data, params} = props;
+
+    const {decimateKey, x, y} = data;
+    const {xMin:xDataMin, xMax:xDataMax, yMin:yDataMin, yMax:yDataMax} = get(params, 'boundaries', {});
+
+    // bin center and expression values need to be formatted
+    const xFormat = (decimateKey || (x && x.match(/\W/))) ? getFormatString(Math.abs(xDataMax-xDataMin), 4) : undefined;
+    const yFormat = (decimateKey || (y && y.match(/\W/))) ? getFormatString(Math.abs(yDataMax-yDataMin), 4) : undefined;
+
+    return rows.map((point) => {
+        const weight = point.weight ? `<br> represents ${point.weight} point${point.weight>1?'s':''}` : '';
+        const xval = xFormat ? numeral(point.x).format(xFormat) : point.x;
+        const xerr = formatError(point.x, point.xErr, point.xErrLow, point.xErrHigh);
+        const yval = yFormat ? numeral(point.y).format(yFormat) : point.y;
+        const yerr = formatError(point.y, point.yErr, point.yErrLow, point.yErrHigh);
+        return `<span> ${params.x.label} = ${xval} ${xerr} ${params.x.unit} <br>` +
+            ` ${params.y.label} = ${yval} ${yerr} ${params.y.unit} ` +
+            `${weight} </span>`;
+    });
+}
+
+/**
+ * Create plotly data, layout, and style
+ * @param props
+ * @returns {{plotlyData: Array, plotlyLayout: Object, plotlyDivStyle: Object, toRowIdx: Map}} - an object with plotly data, layout, div style, and map from decimated key to row index
+ */
+function getChartingInfo(props) {
+    const {params, width, height, desc} = props;
+
+    const {chartWidth, chartHeight} = calculateChartSize(width, height, props);
+
+    const {xTitle, xGrid, xReversed, xOpposite, xLog} = getXAxisOptions(params);
+    const {yTitle, yGrid, yReversed, yOpposite, yLog} = getYAxisOptions(params);
+    const {xMin, xMax, yMin, yMax} = getZoomSelection(params);
+    const {xMin:xDataMin, xMax:xDataMax, yMin:yDataMin, yMax:yDataMax} = get(params, 'boundaries', {});
+
+    const xAxisMin = selFiniteMax(xMin, xDataMin);
+    const xAxisMax = selFiniteMin(xMax, xDataMax);
+    const yAxisMin = selFiniteMax(yMin,yDataMin);
+    const yAxisMax = selFiniteMin(yMax,yDataMax);
+
+    const plotlyDivStyle = {
+        border: '1px solid a5a5a5',
+        borderRadius: 5,
+        width: '100%',
+        height: '100%'
+    };
+
+    const {plotlyData, selectedRows, toRowIdx} = makeSeries(props);
+
+    const plotlyLayout = {
+        height: chartHeight,
+        width: chartWidth,
+        hovermode: 'closest',
+        dragmode: 'select',
+        title: desc,
+        legend: {
+            font: {size: FSIZE},
+            orientation: 'v',
+            yanchor: 'top'
+        },
+        xaxis: {
+            autorange:false,
+            range: getRange(xAxisMin, xAxisMax, xLog, xReversed),
+            title: xTitle,
+            gridLineWidth: 1,
+            type: xLog ? 'log' : 'linear',
+            lineColor: '#e9e9e9',
+            side: xOpposite ? 'top' : 'bottom',
+            tickwidth: 1,
+            ticklen: 5,
+            showline: true,
+            showgrid: xGrid,
+            titlefont: {
+                size: FSIZE
+            },
+            tickfont: {
+                size: FSIZE
+            },
+            zeroline: false
+        },
+        yaxis: {
+            autorange: false,
+            range: getRange(yAxisMin, yAxisMax, yLog, yReversed),
+            title: yTitle,
+            gridLineWidth: 1,
+            type: yLog ? 'log' : 'linear',
+            lineColor: '#e9e9e9',
+            side: yOpposite ? 'right' : 'left',
+            tickwidth: 1,
+            ticklen: 5,
+            showline: true,
+            showgrid: yGrid,
+            titlefont: {
+                size: FSIZE
+            },
+            tickprefix: yOpposite ? '' : '  ',
+            ticksuffix: yOpposite ? '  ' : '',
+            tickfont: {
+                size: FSIZE
+            },
+            zeroline: false
+        },
+        margin: {
+            l: yOpposite ? MIN_MARGIN_PX : Y_TICKLBL_PX,
+            r: yOpposite ? Y_TICKLBL_PX : MIN_MARGIN_PX,
+            b: xOpposite ? MIN_MARGIN_PX: X_TICKLBL_PX,
+            t: xOpposite ? X_TICKLBL_PX: MIN_MARGIN_PX,
+            pad: 2
+        }
+    };
+
+    return {plotlyData, plotlyLayout, plotlyDivStyle, selectedRows, toRowIdx};
+
+}
+
+
+/**
+ * Return an index of a trace with the given name
+ * @param {{plotlyData: Array, plotlyLayout: Object, plotlyDivStyle: Object}} chartingInfo
+ * @param {string} name - name of the trace
+ * @returns {number} index of the trace
+ */
+function getTraceIdx(chartingInfo, name) {
+    return chartingInfo.plotlyData.findIndex((t) => {return t.name === name;});
+}
+
+
+export class XYPlotPlotly extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            dataUpdateTraces: undefined,
+            dataUpdate: undefined,
+            layoutUpdate: undefined
+        };
+
+        this.afterRedraw = this.afterRedraw.bind(this);
+        this.adjustYMargin = this.adjustYMargin.bind(this);
+        this.updateSelectionRect = this.updateSelectionRect.bind(this);
+        this.onSelectionEvent = this.onSelectionEvent.bind(this);
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (this.props === nextProps || !this.chartingInfo) {  return; }
+
+        const propsToOmit = ['onHighlightChange', 'onSelection', 'highlighted'];
+        if (shallowequal(omit(this.props, propsToOmit), omit(nextProps, propsToOmit)) &&
+            get(this.props,'highlighted.rowIdx') === get(nextProps,'highlighted.rowIdx')) {
+            return;
+        }
+
+        const {data, width, height, params, highlighted, selectInfo, desc} = this.props;
+
+        // re-calculate charting info when the plot data change or an error occurs
+        // shading change for density plot changes series
+        if (nextProps.data !== data ||
+            get(params, 'plotStyle') !== get(nextProps.params, 'plotStyle') ||
+            plotErrors(params, 'x') !== plotErrors(nextProps.params, 'x') ||
+            plotErrors(params, 'y') !== plotErrors(nextProps.params, 'y') ||
+            get(params, 'shading', defaultShading) !== get(nextProps.params, 'shading', defaultShading)) {
+
+            this.setState({
+                dataUpdateTraces: undefined,
+                dataUpdate: undefined,
+                layoutUpdate: undefined
+            });
+            this.chartingInfo = null;
+
+        } else {
+
+            if (this.chartingInfo) {
+                // parameters are validates in parent XYPlot component
+
+                const {params:newParams, width:newWidth, height:newHeight, highlighted:newHighlighted, selectInfo:newSelectInfo, desc:newDesc } = nextProps;
+
+                if (newDesc !== desc) {
+                    this.setState({layoutUpdate: {title: newDesc}});
+                }
+
+                // selection change (selection is not supported for decimated data)
+                if (data && data.rows && !data.decimateKey && newSelectInfo !== selectInfo) {
+                    let selectedData = [];
+                    if (newSelectInfo) {
+                        const selectInfoCls = SelectInfo.newInstance(newSelectInfo, 0);
+                        selectedData = data.rows.reduce((selrows, arow) => {
+                            if (selectInfoCls.isSelected(arow['rowIdx'])) {
+                                selrows.push(arow);
+                            }
+                            return selrows;
+                        }, []);
+                    }
+                    const selectedTraceIdx  = getTraceIdx(this.chartingInfo, SELECTED);
+                    if (selectedTraceIdx >= 0) {
+                        this.setState({
+                            dataUpdateTraces: selectedTraceIdx,
+                            dataUpdate: {
+                                // Arrays need to be wrapped according to restyle docs:
+                                // In restyle, arrays are assumed to be used in conjunction with the trace indices provided.
+                                // Therefore, to apply an array as a value, you need to wrap it in an additional array.
+                                x: [selectedData.map((r) => r.x)],
+                                y: [selectedData.map((r) => r.y)],
+                                text: [generateTooltips(nextProps, selectedData)]
+                            }
+                        }, () => {this.chartingInfo.selectedRows = selectedData;});
+                    }
+                }
+
+                // highlight change
+                if (!shallowequal(highlighted, newHighlighted) && !isUndefined(get(newHighlighted, 'rowIdx'))) {
+                    const highlightedData = [];
+                    if (!isUndefined(newHighlighted)) {
+                        if (get(nextProps, ['data', 'decimateKey'])) {
+                            // make sure bin's weight is present in highlighted data when data are decimated
+                            highlightedData.push(highlightedWithWeight(nextProps, get(this.chartingInfo, 'toRowIdx')));
+                        } else {
+                            highlightedData.push(newHighlighted);
+                        }
+                    }
+                    const highlightedTraceIdx  = getTraceIdx(this.chartingInfo, HIGHLIGHTED);
+                    if (highlightedTraceIdx >= 0) {
+                        this.setState({
+                            dataUpdateTraces: highlightedTraceIdx,
+                            dataUpdate: {
+                                x: [highlightedData.map((r) => r.x)],
+                                y: [highlightedData.map((r) => r.y)],
+                                text: [generateTooltips(nextProps, highlightedData)]
+                            }
+                        });
+                    }
+                }
+
+                // plot parameters change
+                if (params !== newParams) {
+                    const dataUpdate = {};
+                    const layoutUpdate = {};
+                    let dataUpdateTraces = 0;
+                    const newXOptions = getXAxisOptions(newParams);
+                    const newYOptions = getYAxisOptions(newParams);
+                    const oldXOptions = getXAxisOptions(params);
+                    const oldYOptions = getYAxisOptions(params);
+                    if (!shallowequal(oldXOptions, newXOptions)) {
+                        layoutUpdate['xaxis.title'] = newXOptions.xTitle;
+                        layoutUpdate['xaxis.showgrid'] = newXOptions.xGrid;
+                        layoutUpdate['xaxis.side'] = newXOptions.xOpposite ? 'top' : 'bottom';
+                        layoutUpdate['xaxis.type'] = newXOptions.xLog ? 'log' : 'linear';
+                        layoutUpdate['margin.b'] = newXOptions.xOpposite ? MIN_MARGIN_PX : X_TICKLBL_PX;
+                        layoutUpdate['margin.t'] = newXOptions.xOpposite ? X_TICKLBL_PX : MIN_MARGIN_PX;
+                    }
+                    if (!shallowequal(oldYOptions, newYOptions)) {
+                        layoutUpdate['yaxis.title'] = newYOptions.yTitle;
+                        layoutUpdate['yaxis.showgrid'] = newYOptions.yGrid;
+                        layoutUpdate['yaxis.type'] = newYOptions.yLog ? 'log' : 'linear';
+                        if (oldYOptions.yOpposite !== newYOptions.yOpposite) {
+                            layoutUpdate['yaxis.side'] = newYOptions.yOpposite ? 'right' : 'left';
+                            layoutUpdate['yaxis.tickprefix'] = newYOptions.yOpposite ? '' : '  ',
+                            layoutUpdate['yaxis.ticksuffix'] = newYOptions.yOpposite ? '  ' : '',
+                            layoutUpdate['margin.l'] = newYOptions.yOpposite ? MIN_MARGIN_PX : Y_TICKLBL_PX;
+                            layoutUpdate['margin.r'] = newYOptions.yOpposite ? Y_TICKLBL_PX : MIN_MARGIN_PX;
+                            if (data.decimateKey) {
+                                // color bar should be on the opposite side of axis to avoid overlapping
+                                dataUpdateTraces = getTraceIdx(this.chartingInfo, DATAPOINTS_HEATMAP);
+                                dataUpdate['colorbar.xanchor'] = newYOptions.yOpposite ? 'right' : 'left';
+                                dataUpdate['colorbar.x'] = newYOptions.yOpposite ? -0.02 : 1.02;
+                            }
+                        }
+                    }
+                    if (!shallowequal(params.zoom, newParams.zoom) || !shallowequal(params.boundaries, newParams.boundaries) ||
+                        oldXOptions.xReversed !== newXOptions.xReversed || oldYOptions.yReversed !== newYOptions.yReversed) {
+                        const {xMin, xMax, yMin, yMax} = getZoomSelection(newParams);
+                        const {xMin:xDataMin, xMax:xDataMax, yMin:yDataMin, yMax:yDataMax} = get(newParams, 'boundaries', {});
+                        const xAxisMin = selFiniteMax(xMin, xDataMin);
+                        const xAxisMax = selFiniteMin(xMax, xDataMax);
+                        const yAxisMin = selFiniteMax(yMin,yDataMin);
+                        const yAxisMax = selFiniteMin(yMax,yDataMax);
+                        layoutUpdate['xaxis.autorange'] = false;
+                        layoutUpdate['xaxis.range'] = getRange(xAxisMin, xAxisMax, newXOptions.xLog, newXOptions.xReversed); // no change for reverse here
+                        layoutUpdate['yaxis.range'] = getRange(yAxisMin, yAxisMax, newYOptions.yLog, newYOptions.yReversed); // no change for reverse here
+                    }
+
+                    if (!shallowequal(params.selection, newParams.selection)) {
+                        if (newParams.selection) {
+                            this.updateSelectionRect(newParams.selection, newXOptions.xLog, newYOptions.yLog);
+                            return false;
+                        } else {
+                            layoutUpdate['shapes'] = [];
+                            layoutUpdate['hovermode'] = 'closest'; // enable tooltips
+                        }
+                    }
+
+                    if (Reflect.ownKeys(layoutUpdate).length > 0) {
+                        if (Reflect.ownKeys(dataUpdate).length > 0) {
+                            this.setState({layoutUpdate, dataUpdate, dataUpdateTraces});
+                        } else {
+                            this.setState({layoutUpdate});
+                        }
+                    }
+                }
+
+                // size change
+                if (newWidth !== width || newHeight !== height ||
+                    newParams.xyRatio !== params.xyRatio || newParams.stretch !== params.stretch) {
+                    const {chartWidth, chartHeight} = calculateChartSize(newWidth, newHeight, nextProps);
+                    this.setState({layoutUpdate: {height: chartHeight, width: chartWidth }});
+                }
+            }
+        }
+        return true;
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return sCompare(this, nextProps, nextState);
+    }
+
+    /**
+     * Plotly does not adjust margins, when tick label length changes.
+     * This method is calculating the length of the y tick labels and adjusts
+     * the margin so that the tick labels do not averlap with axis title
+     * @param chart
+     */
+    adjustYMargin(chart) {
+        if (!chart) { return; }
+        const ytickTexts = chart.querySelectorAll('g.ytick text');
+        var maxYTickLen = MIN_MARGIN_PX;
+        for (let i = 0, len=Math.abs(ytickTexts[i].clientWidth); i < ytickTexts.length; i++) {
+            if (len > maxYTickLen) {
+                maxYTickLen = len;
+            }
+        }
+
+        // Firefox has a bug which makes clientWidth tick texts 0
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=874811
+        // also, when axis on the right, clientWidth is big
+        if (maxYTickLen === MIN_MARGIN_PX || maxYTickLen > 200) { return; }
+
+        const newMargin = maxYTickLen + MIN_YLBL_PX;
+
+        const {yOpposite} = getYAxisOptions(this.props.params);
+        const layoutUpdate = {};
+        let oldMargin;
+        if (yOpposite) {
+            oldMargin =  get(chart, ['layout', 'margin', 'r']);
+            layoutUpdate['margin.r'] = newMargin;
+        } else {
+            oldMargin = get(chart, ['layout', 'margin', 'l']);
+            layoutUpdate['margin.l'] = newMargin;
+        }
+
+        if (Math.abs(newMargin-oldMargin) > 2) {
+            this.setState({layoutUpdate});
+        }
+    }
+
+    /**
+     * Selection area is represented by a rectangle.
+     * User can filter, zoom, or select the points in the selection rectangle.
+     * While the selection rectangle is present, tooltips should be disabled
+     * @param selection
+     * @param {boolean} xLog
+     * @param {boolean} yLog
+     */
+    updateSelectionRect(selection, xLog, yLog) {
+
+        if (this.selectionRect) {
+            this.selectionRect.destroy();
+            this.selectionRect = undefined;
+        }
+        if (selection) {
+            const {xMin, xMax, yMin, yMax} = selection;
+            const selColor = has(this.props, 'data.decimateKey') ? selectionRectColor : selectionRectColorGray;
+            const layoutUpdate = {
+                shapes: [{
+                    layer: 'above',
+                    type: 'rect',
+                    xref: 'x',
+                    yref: 'y',
+                    x0: xLog ? Math.log10(xMin) : xMin,
+                    y0: yLog ? Math.log10(yMin) : yMin,
+                    x1: xLog ? Math.log10(xMax) : xMax,
+                    y1: yLog ? Math.log10(yMax) : yMax,
+                    fillcolor: selColor,
+                    opacity: 0.5,
+                    line: {
+                        width: 0
+                    }
+                }],
+                hovermode: false // disable tooltips
+            };
+            this.setState({layoutUpdate});
+        }
+    }
+
+    onSelectionEvent(event) {
+        const xAxis = event.xAxis[0];
+        const yAxis = event.yAxis[0];
+
+        if (xAxis && yAxis) {
+            this.props.onSelection({xMin: xAxis.min, xMax: xAxis.max, yMin: yAxis.min, yMax: yAxis.max});
+        }
+    }
+
+
+    /**
+     * This method is called when new plotly chart is created
+     * Because of plotly library is loaded asynchronously,
+     * and restyle and relayout are called in promise,
+     * whatever we usually do in componentDidMount should be done here,
+     * whatever we usually do in componentDidUpdate, should be done
+     * in plotly_relayout or plotly_restyle handler
+     * @param chart
+     * @param pl
+     */
+    afterRedraw(chart, pl) {
+
+        const {params, onHighlightChange, onSelection} = this.props;
+
+        // new plot adjustments
+        if (params.selection) {
+            this.updateSelectionRect(get(params, 'selection'), getXAxisOptions(params).xLog, getYAxisOptions(params).yLog);
+        }
+        this.adjustYMargin(chart);
+
+        // handling tooltips in plotly_hover is very slow in Firefox
+        // that's why we are pre-generating tooltips when creating data
+
+        // handling highlight change
+        if (onHighlightChange) {
+            chart.on('plotly_click', (eventData) => {
+                const curveNumber = eventData.points[0].curveNumber;
+                const pointNumber = eventData.points[0].pointNumber;
+                const chartingInfo = this.chartingInfo;
+                if (curveNumber === getTraceIdx(chartingInfo, DATAPOINTS)) {
+                    const rows = get(this.props, 'data.rows');
+                    const point = rows && rows[pointNumber];
+                    if (point) {
+                        onHighlightChange(point.rowIdx);
+                    }
+                } else if (curveNumber === getTraceIdx(chartingInfo, SELECTED)) {
+                    const selectedRows = chartingInfo.selectedRows;
+                    const point = selectedRows && selectedRows[pointNumber];
+                    if (point) {
+                        onHighlightChange(point.rowIdx);
+                    }
+                } else if (curveNumber === getTraceIdx(chartingInfo, DATAPOINTS_HEATMAP)) {
+                    // pointNumber is an array with y and x values - indexes of heatmap cell
+                    const [y,x] = pointNumber;
+                    const key = `${x}:${y}`;
+                    const highlightedIdx = chartingInfo.toRowIdx.get(key);
+                    if (!isUndefined(highlightedIdx)) {
+                        onHighlightChange(highlightedIdx);
+                    }
+                }
+            });
+        }
+
+        // handling selection (controls display of selection rectangle and selection options)
+        if (onSelection) {
+            chart.on('plotly_selected', (eventData) => {
+                if (eventData && eventData.range) {
+                    const [xMin, xMax] = eventData.range.x;
+                    const [yMin, yMax] = eventData.range.y;
+                    pl.d3.selectAll('.select-outline').remove();
+                    if (get(this.props, ['data', 'decimateKey']) || eventData.points.length>0) {
+                        onSelection({xMin, xMax, yMin, yMax});
+                    } else {
+                        const idx = getTraceIdx(this.chartingInfo, DATAPOINTS);
+                        if (idx >= 0) {
+                            // reset the opacity of the data points
+                            const dataSeries = this.chartingInfo.plotlyData[idx];
+                            const dataUpdate = {'data.marker': dataSeries.marker.color};
+                            this.setState({dataUpdateTraces: idx, dataUpdate});
+                        }
+                    }
+                } else {
+                    onSelection(null);
+                }
+            });
+        }
+
+        // whenever relayout occurs, adjust margin to accommodate tick length
+        chart.on('plotly_relayout', () => {
+            this.adjustYMargin(chart);
+        });
+
+    }
+
+    render() {
+        if (!this.chartingInfo) {
+            this.chartingInfo = getChartingInfo(this.props);
+        }
+        const {plotlyData, plotlyLayout, plotlyDivStyle} = this.chartingInfo;
+        const {dataUpdateTraces, dataUpdate, layoutUpdate} = this.state;
+
+        return (
+            <div style={{float: 'left'}}>
+                <PlotlyWrapper data={plotlyData} layout={plotlyLayout}  style={plotlyDivStyle}
+                               dataUpdateTraces={dataUpdateTraces}
+                               dataUpdate={dataUpdate}
+                               layoutUpdate={layoutUpdate}
+                               config={PLOTLY_CONFIG}
+                               newPlotCB={this.afterRedraw}
+                />
+            </div>
+        );
+    }
+}
+
+XYPlotPlotly.propTypes = {
+    data: plotDataShape,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    params: plotParamsShape,
+    highlighted: PropTypes.shape({
+        x: PropTypes.number,
+        y: PropTypes.number,
+        rowIdx: PropTypes.number
+    }),
+    selectInfo: PropTypes.shape({
+        selectAll: PropTypes.bool,
+        exceptions: PropTypes.instanceOf(Set),
+        rowCount: PropTypes.number
+    }),
+    onHighlightChange: PropTypes.func,
+    onSelection: PropTypes.func,
+    desc: PropTypes.string
+};
+
+XYPlotPlotly.defaultProps = {
+    data: undefined,
+    params: undefined,
+    highlighted: undefined,
+    onHighlightChange: undefined,
+    onSelection: undefined,
+    height: 300,
+    desc: 'Sample XY Plot'
+};
+
diff --git a/src/firefly/js/charts/ui/XYPlotPropTypes.js b/src/firefly/js/charts/ui/XYPlotPropTypes.js
new file mode 100644
index 0000000000..6b70633d04
--- /dev/null
+++ b/src/firefly/js/charts/ui/XYPlotPropTypes.js
@@ -0,0 +1,48 @@
+import {PropTypes} from 'react';
+
+const axisParamsShape = PropTypes.shape({
+    columnOrExpr : PropTypes.string,
+    error : PropTypes.string, // for symmetric errors
+    errorLow : PropTypes.string, // for asymmetric errors
+    errorHigh : PropTypes.string, // for asymmetric errors
+    label : PropTypes.string,
+    unit : PropTypes.string,
+    error: PropTypes.string,
+    options : PropTypes.string // ex. 'grid,log,flip,opposite'
+});
+
+const selectionShape = PropTypes.shape({
+    xMin : PropTypes.number,
+    xMax : PropTypes.number,
+    yMin : PropTypes.number,
+    yMax : PropTypes.number
+});
+
+export const plotParamsShape = PropTypes.shape({
+    plotStyle: PropTypes.oneOf(['points', 'line', 'linepoints']),
+    sortColOrExpr: PropTypes.string,
+    xyRatio: PropTypes.number,
+    stretch: PropTypes.oneOf(['fit', 'fill']),
+    selection: selectionShape,
+    zoom: selectionShape,
+    boundaries: selectionShape,
+    userSetBoundaries: selectionShape,
+    nbins: PropTypes.shape({x: PropTypes.number, y: PropTypes.number}),
+    shading: PropTypes.oneOf(['lin', 'log']),
+    x: axisParamsShape,
+    y: axisParamsShape
+});
+
+
+export const plotDataShape = PropTypes.shape({
+    rows: PropTypes.arrayOf(PropTypes.object), // {x,y,rowIdx} or {x,y,rowIdx,weight} or {x,y,rowIdx,right,left,low,high}
+    decimateKey: PropTypes.string,
+    xMin: PropTypes.number,
+    xMax: PropTypes.number,
+    yMin: PropTypes.number,
+    yMax: PropTypes.number,
+    weightMin: PropTypes.number,
+    weightMax: PropTypes.number,
+    idStr: PropTypes.string
+});
+