diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.spec.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.spec.ts
index 995a3e2d6..a0d0f65a7 100644
--- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.spec.ts
+++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.spec.ts
@@ -25,4 +25,26 @@ describe('quadrant unit tests', () => {
     const result = quadrantDb.parseStyles(styles);
     expect(result).toEqual({});
   });
+
+  it('should throw an error for unacceptable style value', () => {
+    let styles: string[] = ['radius: f'];
+    expect(() => quadrantDb.parseStyles(styles)).toThrowError(
+      'value for radius f is unvalid, requires a number'
+    );
+
+    styles = ['color: ffaa'];
+    expect(() => quadrantDb.parseStyles(styles)).toThrowError(
+      'value for color ffaa is unvalid, requires a valid hex code'
+    );
+
+    styles = ['stroke-color: #f677779'];
+    expect(() => quadrantDb.parseStyles(styles)).toThrowError(
+      'value for stroke-color #f677779 is unvalid, requires a valid hex code'
+    );
+
+    styles = ['stroke-width: 30'];
+    expect(() => quadrantDb.parseStyles(styles)).toThrowError(
+      'value for stroke-width 30 is unvalid, requires a valid number of pixels (eg. 10px)'
+    );
+  });
 });
diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts
index b4e9d38f9..9d8dbe732 100644
--- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts
+++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts
@@ -60,12 +60,28 @@ function parseStyles(styles: string[]): StylesObject {
     for (const item of styles) {
       const style = item.trim().split(/\s*:\s*/);
       if (style[0] == 'radius') {
+        if (!/^\d+$/.test(style[1])) {
+          throw new Error(`value for radius ${style[1]} is unvalid, requires a number`);
+        }
         stylesObject.radius = parseInt(style[1]);
       } else if (style[0] == 'color') {
+        if (!/^#?([\dA-Fa-f]{6}|[\dA-Fa-f]{3})$/.test(style[1])) {
+          throw new Error(`value for color ${style[1]} is unvalid, requires a valid hex code`);
+        }
         stylesObject.color = style[1];
       } else if (style[0] == 'stroke-color') {
+        if (!/^#?([\dA-Fa-f]{6}|[\dA-Fa-f]{3})$/.test(style[1])) {
+          throw new Error(
+            `value for stroke-color ${style[1]} is unvalid, requires a valid hex code`
+          );
+        }
         stylesObject.strokeColor = style[1];
       } else if (style[0] == 'stroke-width') {
+        if (!/^\d+px$/.test(style[1])) {
+          throw new Error(
+            `value for stroke-width ${style[1]} is unvalid, requires a valid number of pixels (eg. 10px)`
+          );
+        }
         stylesObject.strokeWidth = style[1];
       } else {
         throw new Error(`stlye named ${style[0]} is unacceptable`);