From 8d7f496ecaaa3c39aefa88cf451b449bdf25f414 Mon Sep 17 00:00:00 2001
From: Mark <mark@does.work>
Date: Fri, 6 Dec 2024 13:27:57 -0500
Subject: [PATCH] Fix sytle error

---
 .../pb_bar_graph/docs/_bar_graph_custom.jsx   | 68 ++++++++++---------
 1 file changed, 35 insertions(+), 33 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
index c96836f449..96ae417437 100644
--- a/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
+++ b/playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
@@ -1,43 +1,45 @@
 import React from 'react'
+import BarGraph from 'playbook-ui'
 
-import BarGraph from '../_bar_graph'
-
-const chartData = [{
-  name: 'Role',
-  data: [0, 200, 300, 654, 656],
-}, {
-  name: 'Company',
-  data: [150, 524, 320, 440, 500],
-}]
+const chartData = [
+  {
+    name: 'Role',
+    data: [0, 200, 300, 654, 656],
+  },
+  {
+    name: 'Company',
+    data: [150, 524, 320, 440, 500],
+  },
+]
 
 const barGraphOptions = {
   subtitle: {
-    text: "Overwritten subtitle",
+    text: 'Overwritten subtitle',
     style: {
-      color: "red"
-    }
+      color: 'red',
+    },
   },
   xAxis: {
-      labels: {
-          useHTML: true,
-          formatter: function() {
-              switch (this.value) {
-                  case 'Angry':
-                      return `<i style="color: red; font-size: 18px;" class="far fa-face-angry"></i> `
-                  case 'Frown':
-                      return `<i style="color: orange; font-size: 18px;" class="far fa-face-frown"></i>`
-                  case 'Meh':
-                      return `<i style="color: grey; font-size: 18px;" class="far fa-face-meh"></i>`
-                  case 'Smile':
-                      return `<i style="color: #63E6BE; font-size: 18px;" class="far fa-face-smile"></i>`
-                  case 'Laugh':
-                      return `<i style="color: green; font-size: 18px;" class="far fa-laugh-beam sucess"></i>`
-                  default:
-                      return ''
-              }
-          }
-      }
-  }
+    labels: {
+      useHTML: true,
+      formatter: function () {
+        switch (this.value) {
+          case 'Angry':
+            return '<i style="color: red; font-size: 18px;" class="far fa-face-angry"></i>'
+          case 'Frown':
+            return '<i style="color: orange; font-size: 18px;" class="far fa-face-frown"></i>'
+          case 'Meh':
+            return '<i style="color: grey; font-size: 18px;" class="far fa-face-meh"></i>'
+          case 'Smile':
+            return '<i style="color: #63E6BE; font-size: 18px;" class="far fa-face-smile"></i>'
+          case 'Laugh':
+            return '<i style="color: green; font-size: 18px;" class="far fa-laugh-beam sucess"></i>'
+          default:
+            return ''
+        }
+      },
+    },
+  },
 }
 
 const BarGraphCustom = (props) => (
@@ -49,7 +51,7 @@ const BarGraphCustom = (props) => (
         legend
         subTitle="Subtitle to replace"
         title="Bar Graph with Custom Overrides"
-        xAxisCategories={['Angry', 'Frown', 'Meh', 'Smile', 'Laugh']} 
+        xAxisCategories={['Angry', 'Frown', 'Meh', 'Smile', 'Laugh']}
         yAxisMin={0}
         {...props}
     />