diff --git a/package-lock.json b/package-lock.json
index 2420730..90e033a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1789,6 +1789,39 @@
         "supports-color": "^5.3.0"
       }
     },
+    "chart.js": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.8.0.tgz",
+      "integrity": "sha512-Di3wUL4BFvqI5FB5K26aQ+hvWh8wnP9A3DWGvXHVkO13D3DSnaSsdZx29cXlEsYKVkn1E2az+ZYFS4t0zi8x0w==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz",
+      "integrity": "sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==",
+      "requires": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^0.5.3"
+      },
+      "dependencies": {
+        "color-convert": {
+          "version": "0.5.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
+          "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
+        }
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "chokidar": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.6.tgz",
@@ -1900,8 +1933,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "commander": {
       "version": "2.20.0",
@@ -4059,6 +4091,11 @@
         "minimist": "0.0.8"
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
diff --git a/package.json b/package.json
index df2f3e9..ce14479 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   "homepage": "https://github.com/Sarsoo/spotify-web#readme",
   "dependencies": {
     "axios": "^0.19.0",
+    "chart.js": "^2.8.0",
     "react": "^16.10.1",
     "react-dom": "^16.10.1",
     "react-router-dom": "^5.1.1"
diff --git a/src/js/Maths/BarChart.js b/src/js/Maths/BarChart.js
new file mode 100644
index 0000000..98d2ad7
--- /dev/null
+++ b/src/js/Maths/BarChart.js
@@ -0,0 +1,57 @@
+import React, { Component } from "react";
+var Chart = require('chart.js');
+
+class BarChart extends Component {
+
+    constructor(props) {
+        super(props);
+        this.chartRef = React.createRef();
+    }
+
+    componentDidMount() {
+        this.chart = new Chart(this.chartRef.current, {
+          type: 'bar',
+          data: {
+            labels: this.props.data.map(d => d.label),
+            datasets: [{
+              label: this.props.title,
+              data: this.props.data.map(d => d.value),
+              backgroundColor: this.props.color
+            }]
+          },
+          options: {
+              legend : {
+                  display : false
+              },
+              elements: {
+                  rectangle : {
+                    backgroundColor: 'rgb(255, 255, 255)'
+                  }
+              },
+              scales: {
+                yAxes: [
+                  {
+                    ticks: {
+                      min: 0
+                    }
+                  }
+                ]
+              }
+          }
+        });
+    }
+
+    componentDidUpdate() {
+      this.chart.data.labels = this.props.data.map(d => d.label);
+      this.chart.data.datasets[0].data = this.props.data.map(d => d.value);
+      this.chart.update();
+    }
+    
+    render() {
+        return (
+            <canvas ref={this.chartRef} />
+        );
+    }    
+}
+
+export default BarChart;
\ No newline at end of file
diff --git a/src/js/Maths/Count.js b/src/js/Maths/Count.js
index 151a1ab..c38318b 100644
--- a/src/js/Maths/Count.js
+++ b/src/js/Maths/Count.js
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 const axios = require('axios');
 
 import showMessage from "../Toast.js";
+import BarChart from "./BarChart.js";
 
 class Count extends Component {
 
@@ -44,7 +45,15 @@ class Count extends Component {
 
     render() {
 
-        var table = <table className="app-table max-width">
+        var data = this.state.playlists.map((entry) => {
+            return {
+                "label": entry.name,
+                "value": entry.lastfm_stat_count
+            };
+        })
+
+        var table = <div>
+            <table className="app-table max-width">
                 <thead>
                     <tr>
                         <th colSpan='2'>
@@ -55,7 +64,9 @@ class Count extends Component {
                 <tbody>
                     {this.state.playlists.map((entry) => <Row name={entry.name} count={entry.lastfm_stat_count} percent={entry.lastfm_stat_percent} key={entry.name}/>)}
                 </tbody>
-            </table>;
+            </table>
+            <BarChart data={data} title='scrobbles'/>
+            </div>;
 
         const loadingMessage = <p className="center-text">loading...</p>;
 
diff --git a/src/js/Maths/PieChart.js b/src/js/Maths/PieChart.js
new file mode 100644
index 0000000..88d0563
--- /dev/null
+++ b/src/js/Maths/PieChart.js
@@ -0,0 +1,50 @@
+import React, { Component } from "react";
+var Chart = require('chart.js');
+
+class PieChart extends Component {
+
+    constructor(props) {
+        super(props);
+        this.chartRef = React.createRef();
+    }
+
+    componentDidMount() {
+        this.chart = new Chart(this.chartRef.current, {
+          type: 'doughnut',
+          data: {
+            labels: this.props.data.map(d => d.label),
+            datasets: [{
+              label: this.props.title,
+              data: this.props.data.map(d => d.value),
+              backgroundColor: this.props.color
+            }]
+          },
+          options: {
+              legend : {
+                  display : false
+              },
+              elements: {
+                  arc : {
+                    backgroundColor: ['rgb(55, 61, 255)', 'rgb(255, 55, 61)'],
+                    borderWidth: 2,
+                    borderColor: 'rgb(0, 0, 0)'
+                  }
+              }
+          }
+        });
+    }
+
+    componentDidUpdate() {
+      this.chart.data.labels = this.props.data.map(d => d.label);
+      this.chart.data.datasets[0].data = this.props.data.map(d => d.value);
+      this.chart.update();
+    }
+    
+    render() {
+        return (
+            <canvas ref={this.chartRef} />
+        );
+    }    
+}
+
+export default PieChart;
\ No newline at end of file
diff --git a/src/js/Playlist/View/Count.js b/src/js/Playlist/View/Count.js
index d50cd95..4edec69 100644
--- a/src/js/Playlist/View/Count.js
+++ b/src/js/Playlist/View/Count.js
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 const axios = require('axios');
 
 import showMessage from "../../Toast.js"
+import PieChart from "../../Maths/PieChart.js";
 
 class Count extends Component {
 
@@ -64,6 +65,18 @@ class Count extends Component {
                 <tr>
                     <td className="ui-text center-text text-no-select">last updated <b>{this.state.lastfm_refresh.toLocaleString()}</b></td>
                 </tr>
+                <tr>
+                    <td>
+                        <PieChart data={[{
+                                "label": this.state.name,
+                                "value": this.state.lastfm_percent
+                            },{
+                                "label": 'other',
+                                "value": 100 - this.state.lastfm_percent
+                            }]} 
+                            title={this.state.name}/>
+                    </td>
+                </tr>
                 <tr>
                     <td colSpan="2">
                         <button style={{width: "100%"}} className="button" onClick={this.updateStats}>update</button>
@@ -74,6 +87,4 @@ class Count extends Component {
     }
 }
 
-
-
 export default Count;
\ No newline at end of file