diff --git a/src/pages/studyView/StudyViewConfig.ts b/src/pages/studyView/StudyViewConfig.ts
index 166ef974a1f..afa09668b39 100644
--- a/src/pages/studyView/StudyViewConfig.ts
+++ b/src/pages/studyView/StudyViewConfig.ts
@@ -23,6 +23,7 @@ export type StudyViewColorTheme = {
 
 export type StudyViewThreshold = {
     pieToTable: number;
+    pieToBar: number;
     piePadding: number;
     barRatio: number;
     rowsInTableForOneGrid: number;
@@ -61,9 +62,14 @@ export type StudyViewFrontEndConfig = {
 
 export type StudyViewConfig = StudyView & StudyViewFrontEndConfig;
 
+export type ChangeChartOptionsMap = {
+    [chartType in ChartTypeEnum]?: ChartType[];
+};
+
 export enum ChartTypeEnum {
     PIE_CHART = 'PIE_CHART',
     BAR_CHART = 'BAR_CHART',
+    BAR_CATEGORICAL_CHART = 'BAR_CATEGORICAL_CHART',
     SURVIVAL = 'SURVIVAL',
     TABLE = 'TABLE',
     SCATTER = 'SCATTER',
@@ -88,6 +94,7 @@ export enum ChartTypeEnum {
 export enum ChartTypeNameEnum {
     PIE_CHART = 'pie chart',
     BAR_CHART = 'bar chart',
+    BAR_CATEGORICAL_CHART = 'categorical bar chart',
     SURVIVAL = 'survival plot',
     TABLE = 'table',
     SCATTER = 'density plot',
@@ -160,6 +167,7 @@ const studyViewFrontEnd = {
     },
     thresholds: {
         pieToTable: 20,
+        pieToBar: 5,
         piePadding: 20,
         barRatio: 0.8,
         rowsInTableForOneGrid: 4,
@@ -186,6 +194,10 @@ const studyViewFrontEnd = {
                 w: 2,
                 h: 1,
             },
+            [ChartTypeEnum.BAR_CATEGORICAL_CHART]: {
+                w: 2,
+                h: 1,
+            },
             [ChartTypeEnum.SCATTER]: {
                 w: 2,
                 h: 2,
diff --git a/src/pages/studyView/StudyViewPageStore.ts b/src/pages/studyView/StudyViewPageStore.ts
index faf5c3cc105..b9a96defeee 100644
--- a/src/pages/studyView/StudyViewPageStore.ts
+++ b/src/pages/studyView/StudyViewPageStore.ts
@@ -184,6 +184,7 @@ import {
     MutationCategorization,
     getChartMetaSet,
     getVisibleAttributes,
+    CategoryDataBin,
 } from './StudyViewUtils';
 import { SingleGeneQuery } from 'shared/lib/oql/oql-parser';
 import autobind from 'autobind-decorator';
@@ -592,7 +593,9 @@ export class StudyViewPageStore
         }
     };
 
-    public isShowNAToggleVisible(dataBins: DataBin[]): boolean {
+    public isShowNAToggleVisible(
+        dataBins: DataBin[] | CategoryDataBin[]
+    ): boolean {
         return (
             dataBins.length !== 0 &&
             dataBins.some(dataBin => dataBin.specialValue === 'NA')
@@ -2155,6 +2158,11 @@ export class StudyViewPageStore
         ChartDimension
     >();
 
+    @observable public availableChartTypes = observable.map<
+        ChartUniqueKey,
+        ChartType[]
+    >();
+
     @observable public chartsType = observable.map<ChartUniqueKey, ChartType>();
 
     private newlyAddedCharts = observable.array<string>();
@@ -4532,7 +4540,7 @@ export class StudyViewPageStore
             data.forEach(item => {
                 const uniqueKey = item.attributeId;
                 if (this.isNewlyAdded(uniqueKey)) {
-                    this.showAsPieChart(uniqueKey, item.counts.length);
+                    this.showAsPieChart(uniqueKey, item.counts);
                     this.newlyAddedCharts.remove(uniqueKey);
                 }
             });
@@ -4559,7 +4567,7 @@ export class StudyViewPageStore
             data.forEach(item => {
                 const uniqueKey = item.attributeId;
                 if (this.isNewlyAdded(uniqueKey)) {
-                    this.showAsPieChart(uniqueKey, item.counts.length);
+                    this.showAsPieChart(uniqueKey, item.counts);
                     this.newlyAddedCharts.remove(uniqueKey);
                 }
             });
@@ -4588,7 +4596,7 @@ export class StudyViewPageStore
             data.forEach(item => {
                 const uniqueKey = item.attributeId;
                 this.unfilteredClinicalDataCountCache[uniqueKey] = item;
-                this.showAsPieChart(uniqueKey, item.counts.length);
+                this.showAsPieChart(uniqueKey, item.counts);
                 this.newlyAddedCharts.remove(uniqueKey);
             });
         },
@@ -5881,7 +5889,10 @@ export class StudyViewPageStore
         onError: () => {},
         onResult: clinicalAttributes => {
             clinicalAttributes.forEach((obj: ClinicalAttribute) => {
-                if (obj.datatype === DataType.NUMBER) {
+                if (
+                    obj.datatype === DataType.NUMBER ||
+                    obj.datatype === DataType.STRING
+                ) {
                     const uniqueKey = getUniqueKey(obj);
                     let filter = getDefaultClinicalDataBinFilter(obj);
 
@@ -7638,7 +7649,7 @@ export class StudyViewPageStore
         if (this.queriedPhysicalStudyIds.result.length > 1) {
             this.showAsPieChart(
                 SpecialChartsUniqueKeyEnum.CANCER_STUDIES,
-                this.queriedPhysicalStudyIds.result.length
+                this.queriedPhysicalStudyIds.result
             );
         }
     }
@@ -7681,7 +7692,7 @@ export class StudyViewPageStore
                     this.getTableDimensionByNumberOfRecords(data.result!.length)
                 );
             }
-            this.chartsType.set(attr.uniqueKey, ChartTypeEnum.TABLE);
+            this.chartsType.set(attr.uniqueKey, newChartType);
         } else {
             this.chartsDimension.set(
                 attr.uniqueKey,
@@ -7830,7 +7841,7 @@ export class StudyViewPageStore
         _.each(
             this.initialVisibleAttributesClinicalDataCountData.result,
             item => {
-                this.showAsPieChart(item.attributeId, item.counts.length);
+                this.showAsPieChart(item.attributeId, item.counts);
             }
         );
     }
@@ -9917,31 +9928,93 @@ export class StudyViewPageStore
     });
 
     @action
-    showAsPieChart(uniqueKey: string, dataSize: number): void {
+    showAsPieChart(
+        uniqueKey: string,
+        data: ClinicalDataCount[] | string[]
+    ): void {
+        // Aggregate the total count and the count of 'NA'
+        // values from the ClinicalDataCount[] array
+        const { totalCount, naCount } = (data as (
+            | ClinicalDataCount
+            | string
+        )[]).reduce(
+            (acc: { totalCount: number; naCount: number }, item) => {
+                if (
+                    typeof item === 'object' &&
+                    'value' in item &&
+                    'count' in item
+                ) {
+                    acc.totalCount += item.count;
+                    if (item.value === 'NA') {
+                        acc.naCount += item.count;
+                    }
+                }
+                return acc;
+            },
+            { totalCount: 0, naCount: 0 }
+        );
+
+        // Determine the proportion of 'NA' values relative to the total data count
+        const naProportion = totalCount > 0 ? naCount / totalCount : 0;
+
         if (
             shouldShowChart(
                 this.initialFilters,
-                dataSize,
+                data.length,
                 this.samples.result.length
             )
         ) {
             this.changeChartVisibility(uniqueKey, true);
-
+            // Display the data as a table if it exceeds the defined threshold
+            // or contains specific table attributes
             if (
-                dataSize > STUDY_VIEW_CONFIG.thresholds.pieToTable ||
-                _.includes(STUDY_VIEW_CONFIG.tableAttrs, uniqueKey)
+                data.length > STUDY_VIEW_CONFIG.thresholds.pieToTable ||
+                STUDY_VIEW_CONFIG.tableAttrs.includes(uniqueKey)
             ) {
                 this.chartsType.set(uniqueKey, ChartTypeEnum.TABLE);
                 this.chartsDimension.set(
                     uniqueKey,
-                    this.getTableDimensionByNumberOfRecords(dataSize)
+                    this.getTableDimensionByNumberOfRecords(data.length)
                 );
-            } else {
+                this.availableChartTypes.set(uniqueKey, [
+                    ChartTypeEnum.PIE_CHART,
+                    ChartTypeEnum.TABLE,
+                ]);
+            }
+            // Use a bar chart if the data is exceeds the pie chart
+            // threshold or if 'NA' values are greater than 50%
+            else if (
+                data.length > STUDY_VIEW_CONFIG.thresholds.pieToBar ||
+                naProportion > 0.5
+            ) {
+                this.chartsType.set(
+                    uniqueKey,
+                    ChartTypeEnum.BAR_CATEGORICAL_CHART
+                );
+                this.chartsDimension.set(
+                    uniqueKey,
+                    STUDY_VIEW_CONFIG.layout.dimensions[
+                        ChartTypeEnum.BAR_CATEGORICAL_CHART
+                    ]
+                );
+                this.availableChartTypes.set(uniqueKey, [
+                    ChartTypeEnum.PIE_CHART,
+                    ChartTypeEnum.BAR_CATEGORICAL_CHART,
+                    ChartTypeEnum.TABLE,
+                ]);
+            }
+            // Default to a pie chart for simpler data sets
+            else {
                 this.chartsType.set(uniqueKey, ChartTypeEnum.PIE_CHART);
                 this.chartsDimension.set(
                     uniqueKey,
                     STUDY_VIEW_CONFIG.layout.dimensions[ChartTypeEnum.PIE_CHART]
                 );
+                this.availableChartTypes.set(uniqueKey, [
+                    ChartTypeEnum.PIE_CHART,
+                    ChartTypeEnum.BAR_CATEGORICAL_CHART,
+                    ChartTypeEnum.TABLE,
+                ]);
             }
         }
     }
diff --git a/src/pages/studyView/StudyViewUtils.tsx b/src/pages/studyView/StudyViewUtils.tsx
index 06c56f02131..851aec20e8e 100644
--- a/src/pages/studyView/StudyViewUtils.tsx
+++ b/src/pages/studyView/StudyViewUtils.tsx
@@ -35,7 +35,6 @@ import {
 } from 'cbioportal-ts-api-client';
 import * as React from 'react';
 import { buildCBioPortalPageUrl } from '../../shared/api/urls';
-import { BarDatum } from './charts/barChart/BarChart';
 import {
     BinMethodOption,
     GenericAssayChart,
@@ -226,6 +225,18 @@ export type DataBin = {
     start: number;
 };
 
+export type BarDatum = {
+    x: number;
+    y: number;
+    dataBin: DataBin;
+};
+
+export type CategoryDataBin = {
+    id: string;
+    count: number;
+    specialValue: string;
+};
+
 export type MutationCategorization = 'MUTATED' | 'MUTATION_TYPE';
 
 export const SPECIAL_CHARTS: ChartMetaWithDimensionAndChartType[] = [
@@ -1253,6 +1264,16 @@ export function filterIntervalBins(numericalBins: DataBin[]) {
     );
 }
 
+export function clinicalDataToDataBin(
+    data: ClinicalDataCountSummary[]
+): CategoryDataBin[] {
+    return data.map(item => ({
+        id: item.value,
+        count: item.count,
+        specialValue: `${item.value}`,
+    }));
+}
+
 export function calcIntervalBinValues(intervalBins: DataBin[]) {
     const values = intervalBins.map(dataBin => dataBin.start);
 
@@ -1339,6 +1360,19 @@ export function generateCategoricalData(
     }));
 }
 
+export function generateCategoricalBarData(
+    categoryBins: CategoryDataBin[],
+    startIndex: number
+): BarDatum[] {
+    // x is not the actual data value, it is the normalized data for representation
+    // y is the actual count value
+    return categoryBins.map((dataBin: DataBin, index: number) => ({
+        x: startIndex + index + 1,
+        y: dataBin.count,
+        dataBin,
+    }));
+}
+
 export function isLogScaleByValues(values: number[]) {
     return (
         // empty list is not considered log scale
@@ -1369,6 +1403,14 @@ export function isEveryBinDistinct(data?: DataBin[]) {
     );
 }
 
+export const onlyContainsNA = (element: BarDatum): boolean => {
+    return element.dataBin.specialValue === 'NA';
+};
+
+export const doesNotContainNA = (element: BarDatum): boolean => {
+    return !onlyContainsNA(element);
+};
+
 function createRangeForDataBinOrFilter(
     start?: number,
     end?: number,
diff --git a/src/pages/studyView/chartHeader/ChartHeader.tsx b/src/pages/studyView/chartHeader/ChartHeader.tsx
index 83a273aa57d..7e9d9e33fd8 100644
--- a/src/pages/studyView/chartHeader/ChartHeader.tsx
+++ b/src/pages/studyView/chartHeader/ChartHeader.tsx
@@ -8,7 +8,7 @@ import {
 import classnames from 'classnames';
 import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { ChartTypeEnum } from '../StudyViewConfig';
+import { ChartTypeEnum, ChartTypeNameEnum } from '../StudyViewConfig';
 import { ChartMeta, getClinicalAttributeOverlay } from '../StudyViewUtils';
 import {
     DataType,
@@ -82,6 +82,7 @@ export interface ChartControls {
     showSwapAxes?: boolean;
     showSurvivalPlotLeftTruncationToggle?: boolean;
     survivalPlotLeftTruncationChecked?: boolean;
+    showChartChangeOptions?: boolean;
 }
 
 @observer
@@ -90,6 +91,7 @@ export class ChartHeader extends React.Component<IChartHeaderProps, {}> {
     @observable downloadSubmenuOpen = false;
     @observable comparisonSubmenuOpen = false;
     @observable showCustomBinModal: boolean = false;
+    @observable showChartChangeOptions: boolean = false;
     private closeMenuTimeout: number | undefined = undefined;
 
     constructor(props: IChartHeaderProps) {
@@ -414,6 +416,88 @@ export class ChartHeader extends React.Component<IChartHeaderProps, {}> {
             );
         }
 
+        if (this.props.chartControls?.showChartChangeOptions) {
+            const submenuWidth = 120;
+            const availableCharts =
+                this.props.store.availableChartTypes.get(
+                    this.props.chartMeta.uniqueKey
+                ) || [];
+            items.push(
+                <li style={{ position: 'relative' }}>
+                    <div
+                        className={classnames(
+                            'dropdown-item',
+                            styles.dropdownHoverEffect
+                        )}
+                        style={{
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            padding: '3px 20px',
+                        }}
+                        onMouseEnter={() =>
+                            (this.showChartChangeOptions = true)
+                        }
+                        onMouseLeave={() =>
+                            (this.showChartChangeOptions = false)
+                        }
+                    >
+                        <div style={{ display: 'flex', alignItems: 'center' }}>
+                            <i
+                                className={classnames(
+                                    'fa fa-xs',
+                                    'fa-exchange',
+                                    styles.menuItemIcon
+                                )}
+                                aria-hidden="true"
+                            />
+                            <span>Change Chart</span>
+                        </div>
+                        <i
+                            className={'fa fa-xs fa-fw fa-caret-right'}
+                            style={{ lineHeight: 'inherit' }}
+                        />
+                        {this.showChartChangeOptions && (
+                            <ul
+                                className={classnames('dropdown-menu', {
+                                    show: this.showChartChangeOptions,
+                                })}
+                                style={{
+                                    top: 0,
+                                    margin: '-6px 0',
+                                    left:
+                                        this.props.placement === 'left'
+                                            ? -submenuWidth
+                                            : '100%',
+                                }}
+                            >
+                                <li>
+                                    {availableCharts
+                                        ?.filter(
+                                            (chartType, id) =>
+                                                chartType !=
+                                                this.props.chartType
+                                        )
+                                        .map((chartType, id) => (
+                                            <a
+                                                key={id}
+                                                className="dropdown-item text-capitalize"
+                                                onClick={() =>
+                                                    this.props.changeChartType(
+                                                        chartType
+                                                    )
+                                                }
+                                            >
+                                                {ChartTypeNameEnum[chartType]}
+                                            </a>
+                                        ))}
+                                </li>
+                            </ul>
+                        )}
+                    </div>
+                </li>
+            );
+        }
+
         if (
             this.props.chartControls &&
             this.props.chartControls.showBoxPlotToggle &&
@@ -444,58 +528,6 @@ export class ChartHeader extends React.Component<IChartHeaderProps, {}> {
             );
         }
 
-        if (
-            this.props.chartControls &&
-            !!this.props.chartControls.showTableIcon
-        ) {
-            items.push(
-                <li>
-                    <a
-                        className="dropdown-item"
-                        onClick={() =>
-                            this.props.changeChartType(ChartTypeEnum.TABLE)
-                        }
-                    >
-                        <i
-                            className={classnames(
-                                'fa fa-xs fa-fw',
-                                'fa-table',
-                                styles.menuItemIcon
-                            )}
-                            aria-hidden="true"
-                        />
-                        Show Table
-                    </a>
-                </li>
-            );
-        }
-
-        if (
-            this.props.chartControls &&
-            !!this.props.chartControls.showPieIcon
-        ) {
-            items.push(
-                <li>
-                    <a
-                        className="dropdown-item"
-                        onClick={() =>
-                            this.props.changeChartType(ChartTypeEnum.PIE_CHART)
-                        }
-                    >
-                        <i
-                            className={classnames(
-                                'fa fa-xs fa-fw',
-                                'fa-pie-chart',
-                                styles.menuItemIcon
-                            )}
-                            aria-hidden="true"
-                        />
-                        Show Pie
-                    </a>
-                </li>
-            );
-        }
-
         if (
             this.props.chartControls &&
             this.props.chartControls.showComparisonPageIcon
@@ -540,7 +572,10 @@ export class ChartHeader extends React.Component<IChartHeaderProps, {}> {
             );
         }
 
-        if (this.props.chartType === ChartTypeEnum.BAR_CHART) {
+        if (
+            this.props.chartType === ChartTypeEnum.BAR_CHART ||
+            this.props.chartType === ChartTypeEnum.BAR_CATEGORICAL_CHART
+        ) {
             items.push(
                 <li>
                     <a
diff --git a/src/pages/studyView/charts/ChartContainer.tsx b/src/pages/studyView/charts/ChartContainer.tsx
index ab3c4ea2c8f..e9429f8cba5 100644
--- a/src/pages/studyView/charts/ChartContainer.tsx
+++ b/src/pages/studyView/charts/ChartContainer.tsx
@@ -20,6 +20,7 @@ import SurvivalChart, {
 } from '../../resultsView/survival/SurvivalChart';
 
 import BarChart from './barChart/BarChart';
+import CategoryBarChart from './categoryBarChart/CategoryBarChart';
 import {
     ChartMeta,
     ChartType,
@@ -198,6 +199,7 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
     @observable chartType: ChartType;
 
     @observable newlyAdded = false;
+    @observable chartChanged = false;
     @observable private selectedRowsKeys: string[] = [];
 
     @observable alertContent: JSX.Element | string | null = null;
@@ -300,10 +302,15 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
             },
             onChangeChartType: (newChartType: ChartType) => {
                 this.mouseInChart = false;
+                this.chartChanged = true;
                 this.props.onChangeChartType(
                     this.props.chartMeta,
                     newChartType
                 );
+                setTimeout(
+                    () => (this.chartChanged = false),
+                    STUDY_VIEW_CONFIG.thresholds.chartHighlight
+                );
             },
             onDeleteChart: () => {
                 this.props.onDeleteChart(this.props.chartMeta);
@@ -359,11 +366,19 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
                 };
                 break;
             case ChartTypeEnum.PIE_CHART: {
-                controls = { showTableIcon: true };
+                controls = { showChartChangeOptions: true };
                 break;
             }
             case ChartTypeEnum.TABLE: {
-                controls = { showPieIcon: true };
+                controls = { showChartChangeOptions: true };
+                break;
+            }
+            case ChartTypeEnum.BAR_CATEGORICAL_CHART: {
+                controls = {
+                    showChartChangeOptions: true,
+                    showNAToggle: this.props.showNAToggle,
+                    isShowNAChecked: this.props.isShowNAChecked,
+                };
                 break;
             }
             case ChartTypeEnum.SURVIVAL: {
@@ -414,6 +429,7 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
             switch (this.props.chartType) {
                 case ChartTypeEnum.PIE_CHART:
                 case ChartTypeEnum.TABLE:
+                case ChartTypeEnum.BAR_CATEGORICAL_CHART:
                     this.props.store.openComparisonPage(this.props.chartMeta, {
                         clinicalAttributeValues: this.props.promise
                             .result! as ClinicalDataCountSummary[],
@@ -567,6 +583,27 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
                     />
                 );
             }
+            case ChartTypeEnum.BAR_CATEGORICAL_CHART: {
+                return () => (
+                    <CategoryBarChart
+                        width={getWidthByDimension(
+                            this.props.dimension,
+                            this.borderWidth
+                        )}
+                        height={getHeightByDimension(
+                            this.props.dimension,
+                            this.chartHeaderHeight
+                        )}
+                        ref={this.handlers.ref}
+                        onUserSelection={this.handlers.onDataBinSelection}
+                        filters={this.props.filters}
+                        data={this.props.promise.result}
+                        showNAChecked={this.props.store.isShowNAChecked(
+                            this.props.chartMeta.uniqueKey
+                        )}
+                    />
+                );
+            }
             case ChartTypeEnum.TABLE: {
                 return () => (
                     <ClinicalTable
@@ -1436,7 +1473,7 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
 
     @computed
     get highlightChart() {
-        return this.newlyAdded;
+        return this.newlyAdded || this.chartChanged;
     }
 
     @action.bound
diff --git a/src/pages/studyView/charts/barChart/BarChart.tsx b/src/pages/studyView/charts/barChart/BarChart.tsx
index 5ac0382c8a0..f9f1e4bd24e 100644
--- a/src/pages/studyView/charts/barChart/BarChart.tsx
+++ b/src/pages/studyView/charts/barChart/BarChart.tsx
@@ -21,6 +21,9 @@ import {
     generateNumericalData,
     needAdditionShiftForLogScaleBarChart,
     DataBin,
+    BarDatum,
+    onlyContainsNA,
+    doesNotContainNA,
     isDataBinSelected,
 } from '../../StudyViewUtils';
 import { STUDY_VIEW_CONFIG } from '../../StudyViewConfig';
@@ -42,21 +45,15 @@ export interface IBarChartProps {
     showNAChecked: boolean;
 }
 
-export type BarDatum = {
-    x: number;
-    y: number;
-    dataBin: DataBin;
-};
-
-function generateTheme() {
+export function generateTheme() {
     const theme = _.cloneDeep(CBIOPORTAL_VICTORY_THEME);
     theme.axis.style.tickLabels.fontSize *= 0.85;
 
     return theme;
 }
 
-const VICTORY_THEME = generateTheme();
-const TILT_ANGLE = 50;
+export const VICTORY_THEME = generateTheme();
+export const TILT_ANGLE = 50;
 
 @observer
 export default class BarChart extends React.Component<IBarChartProps, {}>
@@ -377,11 +374,3 @@ export default class BarChart extends React.Component<IBarChartProps, {}>
         );
     }
 }
-
-const onlyContainsNA = (element: BarDatum): boolean => {
-    return element.dataBin.specialValue === 'NA';
-};
-
-const doesNotContainNA = (element: BarDatum): boolean => {
-    return !onlyContainsNA(element);
-};
diff --git a/src/pages/studyView/charts/barChart/BarChartAxisLabel.tsx b/src/pages/studyView/charts/barChart/BarChartAxisLabel.tsx
index 1b58ce3e183..3486351b75d 100644
--- a/src/pages/studyView/charts/barChart/BarChartAxisLabel.tsx
+++ b/src/pages/studyView/charts/barChart/BarChartAxisLabel.tsx
@@ -28,6 +28,16 @@ export class BarChartAxisLabel extends VictoryLabel {
             key: style[0].textAnchor || textAnchor,
         };
 
+        let tspan = this.getTspan(content, tspanProps, style, datum);
+
+        return React.cloneElement(
+            props.textComponent,
+            { dx, dy, x, y, events, transform, className, title, desc },
+            tspan
+        );
+    }
+
+    getTspan(content: string[], tspanProps: any, style: any, datum: any) {
         let tspan = [];
 
         // add the second string as a superscript
@@ -47,11 +57,7 @@ export class BarChartAxisLabel extends VictoryLabel {
             tspan.push(<tspan {...tspanProps}>{content[0]}</tspan>);
         }
 
-        return React.cloneElement(
-            props.textComponent,
-            { dx, dy, x, y, events, transform, className, title, desc },
-            tspan
-        );
+        return tspan;
     }
 }
 
diff --git a/src/pages/studyView/charts/barChart/BarChartToolTip.tsx b/src/pages/studyView/charts/barChart/BarChartToolTip.tsx
index a19acbda4b9..7d1ef3038ec 100644
--- a/src/pages/studyView/charts/barChart/BarChartToolTip.tsx
+++ b/src/pages/studyView/charts/barChart/BarChartToolTip.tsx
@@ -19,6 +19,7 @@ export type BarChartToolTipProps = {
     currentBarIndex: number;
     model: ToolTipModel | null;
     windowWidth: number;
+    isCategorical?: boolean;
 };
 
 export const VERTICAL_OFFSET = 17;
@@ -59,6 +60,15 @@ export default class BarChartToolTip extends React.Component<
         return this.placement === 'left' ? 'translate(-100%,0%)' : undefined;
     }
 
+    @computed
+    get toolTipLabel(): string {
+        if (this.props.isCategorical) {
+            return 'Category:';
+        }
+
+        return 'Range:';
+    }
+
     render() {
         if (!this.props.model) {
             return null;
@@ -79,7 +89,7 @@ export default class BarChartToolTip extends React.Component<
                         <strong>{this.props.model.sampleCount}</strong>
                     </div>
                     <div>
-                        Range:{' '}
+                        {this.toolTipLabel}{' '}
                         <strong>
                             {formatRange(
                                 this.props.model.start,
diff --git a/src/pages/studyView/charts/barChart/CustomBinsModal.tsx b/src/pages/studyView/charts/barChart/CustomBinsModal.tsx
index 22875f89945..708804cfec7 100644
--- a/src/pages/studyView/charts/barChart/CustomBinsModal.tsx
+++ b/src/pages/studyView/charts/barChart/CustomBinsModal.tsx
@@ -79,11 +79,12 @@ export default class CustomBinsModal extends React.Component<
     updateCurrentBinsValue() {
         let newBins: number[] = [];
         if (this.currentBinMethod === BinMethodOption.CUSTOM) {
-            newBins = _.sortBy(
-                this.newStringBins
-                    .filter(item => item !== '')
-                    .map(item => Number(item.trim()))
-            );
+            const newBins = _(this.newStringBins)
+                .filter(item => item !== '')
+                .map(item => Number(item.trim()))
+                .sortBy()
+                .value();
+
             this.currentBinsValue = newBins.join(`${this.binSeparator} `);
         }
 
diff --git a/src/pages/studyView/charts/categoryBarChart/CategoryBarChart.tsx b/src/pages/studyView/charts/categoryBarChart/CategoryBarChart.tsx
new file mode 100644
index 00000000000..15959eb3cba
--- /dev/null
+++ b/src/pages/studyView/charts/categoryBarChart/CategoryBarChart.tsx
@@ -0,0 +1,328 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import {
+    VictoryAxis,
+    VictoryBar,
+    VictoryChart,
+    VictoryLabel,
+    VictorySelectionContainer,
+} from 'victory';
+import { computed, observable, makeObservable } from 'mobx';
+import _ from 'lodash';
+import { DataFilterValue } from 'cbioportal-ts-api-client';
+import { AbstractChart } from 'pages/studyView/charts/ChartContainer';
+import autobind from 'autobind-decorator';
+import CategoryBarChartAxisLabel from './CategoryBarChartAxisLabel';
+import {
+    clinicalDataToDataBin,
+    BarDatum,
+    DataBin,
+    onlyContainsNA,
+    doesNotContainNA,
+    isDataBinSelected,
+    ClinicalDataCountSummary,
+    CategoryDataBin,
+    generateCategoricalBarData,
+} from '../../StudyViewUtils';
+import { STUDY_VIEW_CONFIG } from '../../StudyViewConfig';
+import { DEFAULT_NA_COLOR } from 'shared/lib/Colors';
+import BarChartToolTip from '../barChart/BarChartToolTip';
+import { ToolTipModel } from '../barChart/BarChartToolTip';
+import WindowStore from 'shared/components/window/WindowStore';
+import ReactDOM from 'react-dom';
+import { calcPlotBottomPadding } from 'cbioportal-frontend-commons';
+import { VICTORY_THEME, TILT_ANGLE } from '../barChart/BarChart';
+
+export interface IBarChartProps {
+    data: ClinicalDataCountSummary[];
+    width: number;
+    height: number;
+    filters: DataFilterValue[];
+    onUserSelection: (dataBins: DataBin[]) => void;
+    showNAChecked: boolean;
+}
+
+@observer
+export default class CategoryBarChart
+    extends React.Component<IBarChartProps, {}>
+    implements AbstractChart {
+    private svgContainer: any;
+
+    @observable.ref
+    private mousePosition = { x: 0, y: 0 };
+
+    @observable
+    private currentBarIndex = -1;
+
+    @observable
+    private toolTipModel: ToolTipModel | null = null;
+
+    constructor(props: IBarChartProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    @autobind
+    private onSelection(bars: { data: BarDatum[] }[]): void {
+        const dataBins = _(bars)
+            .map(bar => bar.data)
+            .flatten()
+            .map(barDatum => barDatum.dataBin)
+            .value();
+        this.props.onUserSelection(dataBins);
+    }
+
+    public toSVGDOMNode(): Element {
+        return this.svgContainer.firstChild;
+    }
+
+    @computed
+    get categoryBins(): CategoryDataBin[] {
+        return clinicalDataToDataBin(this.props.data);
+    }
+
+    @computed
+    get categoricalData(): BarDatum[] {
+        return generateCategoricalBarData(this.categoryBins, 0);
+    }
+
+    @computed
+    get barData(): BarDatum[] {
+        return [...this.categoricalData];
+    }
+
+    @computed
+    get barDataBasedOnNA(): BarDatum[] {
+        return this.props.showNAChecked
+            ? this.barData
+            : this.barData.filter(doesNotContainNA);
+    }
+
+    @computed
+    get categories(): string[] {
+        return this.categoryBins.map(dataBin => dataBin.specialValue);
+    }
+
+    @computed
+    get tickValues(): number[] {
+        const values = [];
+        for (let i = 1; i <= this.categories.length; i++) {
+            values.push(i);
+        }
+        return values;
+    }
+
+    @computed
+    get barDataWithNA(): BarDatum[] {
+        return this.barData.filter(onlyContainsNA);
+    }
+
+    @computed
+    get numberOfNA(): number {
+        return this.barDataWithNA.length;
+    }
+
+    @computed
+    get tickValuesBasedOnNA(): number[] {
+        if (this.props.showNAChecked || !this.numberOfNA) {
+            return this.tickValues;
+        }
+        const tickValuesWithoutNA = this.tickValues.slice(0, -this.numberOfNA);
+        return tickValuesWithoutNA;
+    }
+
+    @computed
+    get tickFormat(): (string | string[])[] {
+        return [...this.categories];
+    }
+
+    @computed
+    get bottomPadding(): number {
+        return calcPlotBottomPadding(
+            VICTORY_THEME.axis.style.tickLabels.fontFamily,
+            VICTORY_THEME.axis.style.tickLabels.fontSize,
+            this.tickFormat,
+            TILT_ANGLE,
+            30,
+            10
+        );
+    }
+
+    @computed
+    get barRatio(): number {
+        return STUDY_VIEW_CONFIG.thresholds.barRatio;
+    }
+
+    @autobind
+    private onMouseMove(event: React.MouseEvent<any>): void {
+        this.mousePosition = { x: event.pageX, y: event.pageY };
+    }
+
+    /*
+     * Supplies the CategoryBarPlot with the event handlers needed to record when the mouse enters
+     * or leaves a bar on the plot.
+     */
+    private get barPlotEvents() {
+        const self = this;
+        return [
+            {
+                target: 'data',
+                eventHandlers: {
+                    onMouseEnter: () => {
+                        return [
+                            {
+                                target: 'data',
+                                mutation: (event: any) => {
+                                    self.currentBarIndex = event.datum.eventKey;
+                                    self.toolTipModel = {
+                                        start:
+                                            self.barData[self.currentBarIndex]
+                                                .dataBin.start,
+                                        end:
+                                            self.barData[self.currentBarIndex]
+                                                .dataBin.end,
+                                        special:
+                                            self.barData[self.currentBarIndex]
+                                                .dataBin.specialValue,
+                                        sampleCount: event.datum.y,
+                                    };
+                                },
+                            },
+                        ];
+                    },
+                    onMouseLeave: () => {
+                        return [
+                            {
+                                target: 'data',
+                                mutation: () => {
+                                    self.toolTipModel = null;
+                                },
+                            },
+                        ];
+                    },
+                },
+            },
+        ];
+    }
+
+    @computed
+    get maximumX(): number {
+        return (
+            this.tickValuesBasedOnNA[this.tickValuesBasedOnNA.length - 1] + 1
+        );
+    }
+
+    @computed
+    get maximumY(): number {
+        const barDataWithoutNA = this.barData.filter(doesNotContainNA);
+        return Math.max(
+            ...barDataWithoutNA.map((element: BarDatum) => element.y)
+        );
+    }
+
+    @computed
+    get labelShowingNA(): JSX.Element | null {
+        if (!this.props.showNAChecked && this.numberOfNA) {
+            const labelNA = this.barDataWithNA
+                .map((element: BarDatum) => element.dataBin.count)
+                .join(', ');
+            return (
+                <VictoryLabel
+                    text={`NA: ${labelNA}`}
+                    textAnchor="end"
+                    datum={{ x: this.maximumX, y: this.maximumY }}
+                    style={{
+                        fontFamily:
+                            VICTORY_THEME.axis.style.tickLabels.fontFamily,
+                        fontSize: VICTORY_THEME.axis.style.tickLabels.fontSize,
+                    }}
+                />
+            );
+        }
+        return null;
+    }
+
+    public render() {
+        return (
+            <div onMouseMove={this.onMouseMove}>
+                {this.barData.length > 0 && (
+                    <VictoryChart
+                        containerComponent={
+                            <VictorySelectionContainer
+                                containerRef={(ref: any) =>
+                                    (this.svgContainer = ref)
+                                }
+                                selectionDimension="x"
+                                onSelection={this.onSelection}
+                            />
+                        }
+                        style={{
+                            parent: {
+                                width: this.props.width,
+                                height: this.props.height,
+                            },
+                        }}
+                        height={this.props.height - this.bottomPadding}
+                        width={this.props.width}
+                        padding={{
+                            left: 40,
+                            right: 20,
+                            top: 10,
+                            bottom: this.bottomPadding,
+                        }}
+                        theme={VICTORY_THEME}
+                    >
+                        <VictoryAxis
+                            tickValues={this.tickValuesBasedOnNA}
+                            tickFormat={(t: number) => this.tickFormat[t - 1]}
+                            domain={[0, this.maximumX]}
+                            tickLabelComponent={<CategoryBarChartAxisLabel />}
+                            style={{
+                                tickLabels: {
+                                    angle: TILT_ANGLE,
+                                    verticalAnchor: 'start',
+                                    textAnchor: 'start',
+                                },
+                            }}
+                        />
+                        <VictoryAxis
+                            dependentAxis={true}
+                            tickFormat={(t: number) =>
+                                Number.isInteger(t) ? t.toFixed(0) : ''
+                            }
+                        />
+                        <VictoryBar
+                            barRatio={this.barRatio}
+                            style={{
+                                data: {
+                                    fill: (d: BarDatum) =>
+                                        isDataBinSelected(
+                                            d.dataBin,
+                                            this.props.filters
+                                        ) || this.props.filters.length === 0
+                                            ? STUDY_VIEW_CONFIG.colors.theme
+                                                  .primary
+                                            : DEFAULT_NA_COLOR,
+                                },
+                            }}
+                            data={this.barDataBasedOnNA}
+                            events={this.barPlotEvents}
+                        />
+                        {this.labelShowingNA}
+                    </VictoryChart>
+                )}
+                {ReactDOM.createPortal(
+                    <BarChartToolTip
+                        mousePosition={this.mousePosition}
+                        windowWidth={WindowStore.size.width}
+                        model={this.toolTipModel}
+                        totalBars={this.barData.length}
+                        currentBarIndex={this.currentBarIndex}
+                        isCategorical
+                    />,
+                    document.body
+                )}
+            </div>
+        );
+    }
+}
diff --git a/src/pages/studyView/charts/categoryBarChart/CategoryBarChartAxisLabel.tsx b/src/pages/studyView/charts/categoryBarChart/CategoryBarChartAxisLabel.tsx
new file mode 100644
index 00000000000..bf8414ed39c
--- /dev/null
+++ b/src/pages/studyView/charts/categoryBarChart/CategoryBarChartAxisLabel.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Tooltip, OverlayTrigger } from 'react-bootstrap';
+import BarChartAxisLabelIgnoreType from '../barChart/BarChartAxisLabel';
+
+export class CategoryBarChartAxisLabel extends BarChartAxisLabelIgnoreType {
+    getTspan(content: string[], tspanProps: any, style: any, datum: any) {
+        let tspan: any = [];
+        const tooltip = (
+            <Tooltip id={`tooltip-${datum}`}>{`${content.join(' ')}`}</Tooltip>
+        );
+
+        content.forEach((line, index) => {
+            const isSuperscript = index > 0;
+            const superscriptStyle = isSuperscript
+                ? {
+                      dy: -style[0].fontSize / 2,
+                      style: { ...style[0], fontSize: style[0].fontSize * 0.7 },
+                  }
+                : {};
+
+            tspan.push(
+                <OverlayTrigger placement="top" overlay={tooltip}>
+                    <tspan {...tspanProps} {...superscriptStyle}>
+                        {line.length > 4
+                            ? line.slice(0, 4).trim() + '...'
+                            : line}
+                    </tspan>
+                </OverlayTrigger>
+            );
+        });
+
+        return tspan;
+    }
+}
+
+// we need to ignore the type of CategoryBarChartAxisLabel to avoid typescript error
+// TS2605: JSX element type 'BarChartAxisLabel' is not a constructor function for JSX elements.
+// we get this error because VictoryLabel cannot be resolved as a valid react component (due to missing victory types)
+const CategoryBarChartAxisLabelIgnoreType = CategoryBarChartAxisLabel as any;
+export default CategoryBarChartAxisLabelIgnoreType;
diff --git a/src/pages/studyView/tabs/SummaryTab.tsx b/src/pages/studyView/tabs/SummaryTab.tsx
index e32c44c2057..9010f05e902 100644
--- a/src/pages/studyView/tabs/SummaryTab.tsx
+++ b/src/pages/studyView/tabs/SummaryTab.tsx
@@ -42,6 +42,7 @@ import {
     getGenesCNADownloadData,
     getPatientTreatmentDownloadData,
     getSampleTreatmentDownloadData,
+    clinicalDataToDataBin,
 } from '../StudyViewUtils';
 import { DataType } from 'cbioportal-frontend-commons';
 import DelayedRender from 'shared/components/DelayedRender';
@@ -352,6 +353,89 @@ export class StudySummaryTab extends React.Component<
                     ),
                 }),
             }),
+            [ChartTypeEnum.BAR_CATEGORICAL_CHART]: () => ({
+                commonProps: {
+                    onToggleNAValue: this.handlers.onToggleNAValue,
+                    onChangeChartType: this.handlers.onChangeChartType,
+                    getData: (dataType?: DataType) =>
+                        this.store.getChartDownloadableData(
+                            chartMeta,
+                            dataType
+                        ),
+                    isShowNAChecked: this.store.isShowNAChecked(
+                        chartMeta.uniqueKey
+                    ),
+                    downloadTypes: ['Summary Data', 'Full Data', 'SVG', 'PDF'],
+                },
+                [ChartMetaDataTypeEnum.GENE_SPECIFIC]: () => ({
+                    promise: this.store.getGenomicChartDataBin(chartMeta),
+                    filters: this.store.getGenomicDataFiltersByUniqueKey(
+                        chartMeta.uniqueKey
+                    ),
+                    onDataBinSelection: this.handlers.onGenomicDataBinSelection,
+                    onResetSelection: this.handlers.onGenomicDataBinSelection,
+                    getData: () =>
+                        this.store.getChartDownloadableData(chartMeta),
+                    showLogScaleToggle: this.store.isLogScaleToggleVisible(
+                        chartMeta.uniqueKey,
+                        this.store.getGenomicChartDataBin(chartMeta).result
+                    ),
+                    showNAToggle: this.store.isShowNAToggleVisible(
+                        this.store.getGenomicChartDataBin(chartMeta).result!
+                    ),
+                }),
+                [ChartMetaDataTypeEnum.GENERIC_ASSAY]: () => ({
+                    promise: this.store.getGenericAssayChartDataBin(chartMeta),
+                    filters: this.store.getGenericAssayDataFiltersByUniqueKey(
+                        chartMeta.uniqueKey
+                    ),
+                    onDataBinSelection: this.handlers
+                        .onGenericAssayDataBinSelection,
+                    onResetSelection: this.handlers
+                        .onGenericAssayDataBinSelection,
+                    getData: () =>
+                        this.store.getChartDownloadableData(chartMeta),
+                    showLogScaleToggle: this.store.isLogScaleToggleVisible(
+                        chartMeta.uniqueKey,
+                        this.store.getGenericAssayChartDataBin(chartMeta).result
+                    ),
+                    showNAToggle: this.store.isShowNAToggleVisible(
+                        this.store.getGenericAssayChartDataBin(chartMeta)
+                            .result!
+                    ),
+                }),
+                [ChartMetaDataTypeEnum.CUSTOM_DATA]: () => ({
+                    promise: this.store.getCustomDataNumerical(chartMeta),
+                    onDataBinSelection: this.handlers
+                        .onCustomChartDataBinSelection,
+                    filters: this.store.getCustomDataFiltersByUniqueKey(
+                        chartMeta.uniqueKey
+                    ),
+                    onResetSelection: this.handlers.onDataBinSelection,
+                    getData: () =>
+                        this.store.getChartDownloadableData(chartMeta),
+                    showLogScaleToggle: this.store.isLogScaleToggleVisible(
+                        chartMeta.uniqueKey,
+                        this.store.getCustomDataNumerical(chartMeta).result
+                    ),
+                    showNAToggle: this.store.isShowNAToggleVisible(
+                        this.store.getCustomDataNumerical(chartMeta).result!
+                    ),
+                }),
+                [ChartMetaDataTypeEnum.CLINICAL]: () => ({
+                    promise: this.store.getClinicalDataCount(chartMeta),
+                    onDataBinSelection: this.handlers.onDataBinSelection,
+                    filters: this.store.getClinicalDataFiltersByUniqueKey(
+                        chartMeta.uniqueKey
+                    ),
+                    onResetSelection: this.handlers.onDataBinSelection,
+                    showNAToggle: this.store.isShowNAToggleVisible(
+                        clinicalDataToDataBin(
+                            this.store.getClinicalDataCount(chartMeta).result!
+                        )
+                    ),
+                }),
+            }),
             [ChartTypeEnum.TABLE]: () => ({
                 commonProps: {
                     onChangeChartType: this.handlers.onChangeChartType,