diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_dog.jsx b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_dog.jsx
new file mode 100644
index 0000000000..7a27a18fa6
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_dog.jsx
@@ -0,0 +1,72 @@
+import React from 'react'
+import ReactDOMServer from 'react-dom/server'
+import BarGraph from '../_bar_graph'
+import Icon from '../../pb_icon/_icon'
+
+const chartData = [
+  {
+    name: 'Role',
+    data: [0, 200, 300, 654, 656],
+  },
+  {
+    name: 'Company',
+    data: [150, 524, 320, 440, 500],
+  },
+]
+
+const renderIcon = (iconName, color) => {
+  return ReactDOMServer.renderToStaticMarkup(
+  <Icon
+      color={color}
+      icon={iconName}
+  />)
+};
+
+const barGraphOptions = {
+  yAxis: {
+    tickInterval: 5,
+  },
+  xAxis: {
+    categories: ['1', '2', '3', '4', '5'],
+    labels: {
+      useHTML: true,
+      formatter: function () {
+        switch (this.value) {
+          case '1':
+            return `${renderIcon('frown', 'error')}`;
+          case '2':
+            return `${renderIcon('frown', 'warning')}`;
+          case '3':
+            return `${renderIcon('frown-open', 'neutral')}`;
+          case '4':
+            return `${renderIcon('smile', 'category_7')}`;
+          case '5':
+            return `${renderIcon('smile-beam', 'success')}`;
+          default:
+            return ''
+        }
+      },
+      style: {
+        fontSize: '1.4em',
+      },
+      y: 42,
+    },
+  },
+  legend: {
+    itemMarginTop: 62,
+  },
+}
+
+const BarGraphDog = () => (
+  <div>
+    <BarGraph
+        chartData={chartData}
+        customOptions={barGraphOptions}
+        id="happiness-dashboard"
+        legend
+        title="Bar Graph with Custom Overrides"
+    />
+  </div>
+)
+
+export default BarGraphDog
diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_dog.md b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_dog.md
new file mode 100644
index 0000000000..b1dec331dd
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_dog.md
@@ -0,0 +1 @@
+you can use highcharts and pass plabyook styles to it
diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/example.yml b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/example.yml
index c0e7daaff6..a4dd5959d3 100644
--- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/example.yml
@@ -16,15 +16,5 @@ examples:
 
 
   react:
-  - bar_graph_default: Default
-  - bar_graph_legend: Legend
-  - bar_graph_legend_position: Legend Position
-  - bar_graph_legend_non_clickable: Legend Non Clickable
-  - bar_graph_height: Height
-  - bar_graph_spline: Spline
-  - bar_graph_colors: Color Overrides
-  - bar_graph_custom: Custom Overrides
-  - bar_graph_stacked: Stacked
-  - bar_graph_negative_numbers: Negative Numbers
-  - bar_graph_secondary_y_axis: Secondary Y-Axis
-  - bar_graph_horizontal: Custom Options From Highcharts
+  - bar_graph_dog: Default 
+  - bar_graph_default: Default 
diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/index.js b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/index.js
index 37c272bc4f..03a25b8761 100644
--- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/index.js
@@ -1,4 +1,5 @@
-export { default as BarGraphDefault } from './_bar_graph_default.jsx'
+export { default as BarGraphDuck } from './_bar_graph_default.jsx'
+export { default as BarGraphDog } from './_bar_graph_dog.jsx'
 export { default as BarGraphLegend } from './_bar_graph_legend.jsx'
 export { default as BarGraphLegendPosition } from './_bar_graph_legend_position.jsx'
 export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_clickable.jsx'