diff --git a/pom.xml b/pom.xml
index 0ac1a9a540ed37ee4ddcd97fd68523c487adb6a9..e10f5f5e59091269b136cdc8c5db7cecfc4d82f8 100644
--- a/pom.xml
+++ b/pom.xml
@@ -64,6 +64,7 @@
         <fontawesome.version>5.0.10</fontawesome.version>
         <sortablejs.version>1.8.1</sortablejs.version>
         <mousetrap.version>1.6.1</mousetrap.version>
+        <codemirror.version>5.45.0</codemirror.version>
         <webdrivermanager.version>2.2.1</webdrivermanager.version>
         <selenium.version>3.141.59</selenium.version>
 
@@ -189,6 +190,11 @@
             <artifactId>mousetrap</artifactId>
             <version>${mousetrap.version}</version>
         </dependency>
+        <dependency>
+            <groupId>org.webjars</groupId>
+            <artifactId>codemirror</artifactId>
+            <version>${codemirror.version}</version>
+        </dependency>
 
         <!-- selenium -->
         <dependency>
diff --git a/src/main/resources/languages/_de.properties b/src/main/resources/languages/_de.properties
index c0cfad504a94ad05ee77a9197c190bc823de12a0..5acea3b1153b4005de2c0d96a8143e1193969dcf 100644
--- a/src/main/resources/languages/_de.properties
+++ b/src/main/resources/languages/_de.properties
@@ -344,7 +344,7 @@ charts.default.categoryBudget=Verbrauch nach Kategorien
 chart.new.label.name=Name
 chart.new.label.script=Script
 chart.new.info.default=Diese mitgelieferte Diagrammvorlage kann nicht �berschrieben werden, aber du kannst dir den Code ansehen.
-chart.new.info.wiki=Tutorial: <a href="https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts">https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts</a
+chart.new.info.wiki=Tutorial: <a href="https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts">https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts</a>
 
 chart.type=Typ
 chart.actions=Aktionen
diff --git a/src/main/resources/languages/_en.properties b/src/main/resources/languages/_en.properties
index 9eb4f0c8e478949007f3ff6a35a9f2b64bd90f84..9ae4d8da99d0401efb6c3e607c49b95a2724bd51 100644
--- a/src/main/resources/languages/_en.properties
+++ b/src/main/resources/languages/_en.properties
@@ -344,7 +344,7 @@ charts.default.categoryBudget=Consumption by categories
 chart.new.label.name=Name
 chart.new.label.script=Script
 chart.new.info.default=This default chart can''t be overwritten but you can have a look on how it''s implemented.
-chart.new.info.wiki=Tutorial: <a href="https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts">https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts</a
+chart.new.info.wiki=Tutorial: <a href="https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts">https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts</a>
 chart.type=Type
 chart.actions=Actions
 chart.show=Show chart
diff --git a/src/main/resources/static/css/charts.css b/src/main/resources/static/css/charts.css
index 5b4e6aea7b60ab4acdee31cb46054bd344ae24ac..4ff972dcbf7ae1e2f0f802752e0eab40093fba07 100644
--- a/src/main/resources/static/css/charts.css
+++ b/src/main/resources/static/css/charts.css
@@ -20,4 +20,14 @@
 
 #chart-canvas {
     height: 40em;
+}
+
+.CodeMirror {
+    width: 100%;
+    height: auto;
+    resize: vertical;
+}
+
+.CodeMirror-scroll {
+    height: auto;
 }
\ No newline at end of file
diff --git a/src/main/resources/static/css/dark/charts.css b/src/main/resources/static/css/dark/charts.css
index 5b4e6aea7b60ab4acdee31cb46054bd344ae24ac..4ff972dcbf7ae1e2f0f802752e0eab40093fba07 100644
--- a/src/main/resources/static/css/dark/charts.css
+++ b/src/main/resources/static/css/dark/charts.css
@@ -20,4 +20,14 @@
 
 #chart-canvas {
     height: 40em;
+}
+
+.CodeMirror {
+    width: 100%;
+    height: auto;
+    resize: vertical;
+}
+
+.CodeMirror-scroll {
+    height: auto;
 }
\ No newline at end of file
diff --git a/src/main/resources/static/js/charts.js b/src/main/resources/static/js/charts.js
index 3700b412f0cba0565e5ed1ef03fb3e9718c19f56..1b6d7154aabe9c432304d2bca99e992085e19518 100644
--- a/src/main/resources/static/js/charts.js
+++ b/src/main/resources/static/js/charts.js
@@ -1,5 +1,15 @@
 $(document).ready(function()
 {
+    if($("#chart-script").length)
+    {
+        var editor = CodeMirror.fromTextArea(document.getElementById('chart-script'), {
+            mode: "javascript",
+            lineNumbers: 50,
+            viewportMargin: Infinity
+        });
+        editor.save();
+    }
+
     if($("#modalConfirmDelete").length)
     {
         $('#modalConfirmDelete').modal('open');
diff --git a/src/main/resources/templates/charts/newChart.ftl b/src/main/resources/templates/charts/newChart.ftl
index 4d3ad1fdb1edeb4dd7e12f8d8e48611c66338db1..29c0b3d7bc4560412716f84c6b6246fc14e66ec7 100644
--- a/src/main/resources/templates/charts/newChart.ftl
+++ b/src/main/resources/templates/charts/newChart.ftl
@@ -3,6 +3,8 @@
         <#import "../helpers/header.ftl" as header>
         <@header.header "BudgetMaster"/>
         <#import "/spring.ftl" as s>
+        <link rel="stylesheet" href="<@s.url "/webjars/codemirror/5.45.0/lib/codemirror.css"/>">
+        <@header.style "charts"/>
     </head>
     <body class="budgetmaster-blue-light">
         <#import "../helpers/navbar.ftl" as navbar>
@@ -38,9 +40,8 @@
 
                         <#-- script -->
                         <div class="row">
-                            <div class="input-field col s12 m12 l8 offset-l2">
+                            <div class="input-field col sl2" style="width: 100%">
                                 <textarea id="chart-script" name="script" <@validation.validation "script" "materialize-textarea"/>><#if chart.getScript()??>${chart.getScript()}<#else>${locale.getString("chart.script.default")}</#if></textarea>
-                                <label for="chart-script">${locale.getString("chart.new.label.script")}</label>
                             </div>
                         </div>
 
@@ -85,5 +86,8 @@
         <!-- Scripts-->
         <#import "../helpers/scripts.ftl" as scripts>
         <@scripts.scripts/>
+        <script src="<@s.url '/webjars/codemirror/5.45.0/lib/codemirror.js'/>"></script>
+        <script src="<@s.url '/webjars/codemirror/5.45.0/mode/javascript/javascript.js'/>"></script>
+        <script src="<@s.url '/js/charts.js'/>"></script>
     </body>
 </html>
\ No newline at end of file