diff --git a/src/DataExplorer/DataExplorerVisualizations.jsx b/src/DataExplorer/DataExplorerVisualizations.jsx
index f59d010c29..68be4151b9 100644
--- a/src/DataExplorer/DataExplorerVisualizations.jsx
+++ b/src/DataExplorer/DataExplorerVisualizations.jsx
@@ -22,7 +22,7 @@ class DataExplorerVisualizations extends React.Component {
 
   render() {
     const charts = this.props.arrangerData ?
-      getCharts(this.props.arrangerData, this.props.arrangerConfig)
+      getCharts(this.props.arrangerData, this.props.arrangerConfig, this.props.sqon)
       : null;
     return (
       <div className='data-explorer__visualizations'>
@@ -66,11 +66,13 @@ class DataExplorerVisualizations extends React.Component {
 DataExplorerVisualizations.propTypes = {
   arrangerData: PropTypes.object,
   arrangerConfig: PropTypes.object,
+  sqon: PropTypes.object,
 };
 
 DataExplorerVisualizations.defaultProps = {
   arrangerData: null,
   arrangerConfig: {},
+  sqon: null,
 };
 
 export default DataExplorerVisualizations;
diff --git a/src/components/charts/helper.js b/src/components/charts/helper.js
index c30f7fff96..937f8e3867 100644
--- a/src/components/charts/helper.js
+++ b/src/components/charts/helper.js
@@ -47,29 +47,43 @@ const getCategoryColorFrom2Colors = index => colorsForCharts.categorical2Colors[
 
 const getDataKey = showPercentage => (showPercentage ? 'percentage' : 'value');
 
-const transformArrangerDataToChart = (field) => {
+const transformArrangerDataToChart = (field, sqonValues) => {
   const chartData = [];
-  field.buckets.map(bucket =>
-    chartData.push({
-      name: bucket.key,
-      value: bucket.doc_count,
-    }),
-  );
+  field.buckets
+    .filter(bucket => (sqonValues === null || sqonValues.includes(bucket.key)))
+    .forEach(bucket =>
+      chartData.push({
+        name: bucket.key,
+        value: bucket.doc_count,
+      }),
+    );
   return chartData;
 };
 
-const transformArrangerDataToSummary = (field, chartType, title) => ({
+const transformArrangerDataToSummary = (field, chartType, title, sqonValues) => ({
   type: chartType,
   title,
-  data: transformArrangerDataToChart(field),
+  data: transformArrangerDataToChart(field, sqonValues),
 });
 
-const transformDataToCount = (field, label) => ({
+const transformDataToCount = (field, label, sqonValues) => ({
   label,
-  value: field.buckets.length,
+  value: sqonValues ? Math.min(field.buckets.length, sqonValues.length) : field.buckets.length,
 });
 
-const getCharts = (data, arrangerConfig) => {
+/**
+ * Return an array of selected values in a given field
+ * If no value selected, return null
+ */
+const getSQONValues = (sqon, field) => {
+  if (!sqon || !sqon.content) return null;
+  const sqonItems = sqon.content.filter(item => item.content.field === field);
+  if (!sqonItems || sqonItems.length !== 1) return null;
+  const sqonValues = sqonItems[0].content.value;
+  return sqonValues;
+};
+
+const getCharts = (data, arrangerConfig, sqon) => {
   const countItems = [];
   const summaries = [];
   const stackedBarCharts = [];
@@ -78,10 +92,11 @@ const getCharts = (data, arrangerConfig) => {
     const fields = data.subject.aggregations;
     Object.keys(fields).forEach((field) => {
       const fieldConfig = arrangerConfig.charts[field];
+      const sqonValues = getSQONValues(sqon, field);
       if (fieldConfig) {
         switch (fieldConfig.chartType) {
         case 'count':
-          countItems.push(transformDataToCount(fields[field], fieldConfig.title));
+          countItems.push(transformDataToCount(fields[field], fieldConfig.title, sqonValues));
           break;
         case 'pie':
         case 'bar':
@@ -89,7 +104,8 @@ const getCharts = (data, arrangerConfig) => {
             transformArrangerDataToSummary(
               fields[field],
               fieldConfig.chartType,
-              fieldConfig.title),
+              fieldConfig.title,
+              sqonValues),
           );
           break;
         case 'stackedBar':
@@ -97,7 +113,8 @@ const getCharts = (data, arrangerConfig) => {
             transformArrangerDataToSummary(
               fields[field],
               fieldConfig.chartType,
-              fieldConfig.title),
+              fieldConfig.title,
+              sqonValues),
           );
           break;
         default:
@@ -121,4 +138,5 @@ module.exports = {
   transformArrangerDataToChart,
   transformArrangerDataToSummary,
   getCharts,
+  getSQONValues,
 };
diff --git a/src/components/charts/helper.test.js b/src/components/charts/helper.test.js
index f97d64f203..14bf5c2c77 100644
--- a/src/components/charts/helper.test.js
+++ b/src/components/charts/helper.test.js
@@ -54,6 +54,23 @@ describe('helper', () => {
     expect(helper.getDataKey(false)).toBe('value');
   });
 
+  const noSelectSqonValues = null;
+  const selectWhiteSqon = {
+    op: 'and',
+    content: [
+      {
+        op: 'in',
+        content: {
+          field: 'ethnicity',
+          value: [
+            'White',
+          ],
+        },
+      },
+    ],
+  };
+  const selectWhiteSqonValues = ['White'];
+
   const ethnicityFieldJSON = {
     buckets: [
       { doc_count: 4, key: 'White' },
@@ -77,7 +94,12 @@ describe('helper', () => {
     { name: 'Black', value: 5 },
   ];
 
+  const ethnicityChartDataWithOnlyWhiteSelected = [
+    { name: 'White', value: 4 },
+  ];
+
   const ethnicityCountData = { label: 'Ethnicity', value: 3 };
+  const ethnicityCountDataWithOnlyWhiteSelected = { label: 'Ethnicity', value: 1 };
 
   const projectCountData = { label: 'Projects', value: 4 };
 
@@ -87,6 +109,12 @@ describe('helper', () => {
     data: ethnicityChartData,
   };
 
+  const summaryDataWithOnlyWhiteSelected = {
+    title: 'Ethnicity',
+    type: 'pie',
+    data: ethnicityChartDataWithOnlyWhiteSelected,
+  };
+
   const rawData = {
     subject: {
       aggregations: {
@@ -110,15 +138,23 @@ describe('helper', () => {
   };
 
   it('returns chart data as expected', () => {
-    expect(helper.transformArrangerDataToChart(ethnicityFieldJSON)).toEqual(ethnicityChartData);
+    expect(helper.transformArrangerDataToChart(ethnicityFieldJSON, noSelectSqonValues))
+      .toEqual(ethnicityChartData);
+    expect(helper.transformArrangerDataToChart(ethnicityFieldJSON, selectWhiteSqonValues))
+      .toEqual(ethnicityChartDataWithOnlyWhiteSelected);
   });
 
   it('returns count data as expected', () => {
-    expect(helper.transformDataToCount(ethnicityFieldJSON, 'Ethnicity')).toEqual(ethnicityCountData);
+    expect(helper.transformDataToCount(ethnicityFieldJSON, 'Ethnicity', noSelectSqonValues))
+      .toEqual(ethnicityCountData);
+    expect(helper.transformDataToCount(ethnicityFieldJSON, 'Ethnicity', selectWhiteSqonValues))
+      .toEqual(ethnicityCountDataWithOnlyWhiteSelected);
   });
 
   it('returns chart summaries as expected', () => {
-    expect(helper.transformArrangerDataToSummary(ethnicityFieldJSON, 'pie', 'Ethnicity')).toEqual(summaryData);
+    expect(helper.transformArrangerDataToSummary(ethnicityFieldJSON, 'pie', 'Ethnicity', noSelectSqonValues)).toEqual(summaryData);
+    expect(helper.transformArrangerDataToSummary(ethnicityFieldJSON, 'pie', 'Ethnicity',
+      selectWhiteSqonValues)).toEqual(summaryDataWithOnlyWhiteSelected);
   });
 
   it('gets charts', () => {
@@ -127,4 +163,9 @@ describe('helper', () => {
     expect(charts.summaries).toEqual([summaryData]);
     expect(charts.stackedBarCharts).toEqual([]);
   });
+
+  it('return selecetd values from SQON as expected', () => {
+    expect(helper.getSQONValues(selectWhiteSqon, 'ethnicity')).toEqual(selectWhiteSqonValues);
+    expect(helper.getSQONValues(noSelectSqonValues, 'ethnicity')).toEqual(null);
+  });
 });