diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js index 8b65c8a42..d955606ed 100644 --- a/cypress/integration/rendering/pie.spec.js +++ b/cypress/integration/rendering/pie.spec.js @@ -91,4 +91,16 @@ describe('Pie Chart', () => { expect(strokeWidth).to.eq(5); }); }); + + it('should render a pie diagram when text-position is set', () => { + imgSnapshotTest( + ` + pie + "Dogs": 50 + "Cats": 25 + `, + { logLevel: 1, pie: { textPosition: 0.9 } } + ); + cy.get('svg'); + }); }); diff --git a/demos/pie.html b/demos/pie.html index 333ef9491..8cc49272c 100644 --- a/demos/pie.html +++ b/demos/pie.html @@ -26,6 +26,7 @@
+    %%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%%
     pie
       title Key elements in Product X
         accTitle: Key elements in Product X
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index 302bd51e1..354286758 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2084](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2084)
+[defaultConfig.ts:2102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2102)
 
 ---
 
diff --git a/docs/syntax/pie.md b/docs/syntax/pie.md
index 63f371e87..73bd66220 100644
--- a/docs/syntax/pie.md
+++ b/docs/syntax/pie.md
@@ -48,6 +48,7 @@ Drawing a pie chart is really simple in mermaid.
 ## Example
 
 ```mermaid-example
+%%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%%
 pie showData
     title Key elements in Product X
     "Calcium" : 42.96
@@ -57,6 +58,7 @@ pie showData
 ```
 
 ```mermaid
+%%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%%
 pie showData
     title Key elements in Product X
     "Calcium" : 42.96
@@ -64,3 +66,12 @@ pie showData
     "Magnesium" : 10.01
     "Iron" :  5
 ```
+
+## Configuration
+
+Possible pie diagram configuration parameters:
+
+| Parameter          | Description                                                                                                  | Default value |
+| ------------------ | ------------------------------------------------------------------------------------------------------------ | ------------- |
+| `outerBorderWidth` | The border width of the pie diagram's outside circle                                                         | `2`           |
+| `textPosition`     | The axial position of the pie slice labels, from 0.0 at the center to 1.0 at the outside edge of the circle. | `0.5`         |
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index ec741e908..ecc7b54a5 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -1247,6 +1247,24 @@ const config: Partial = {
      * Default value: true
      */
     useMaxWidth: true,
+
+    /**
+     * | Parameter        | Description                                | Type    | Required | Values             |
+     * | ---------------- | ------------------------------------------ | ------- | -------- | ------------------ |
+     * | outerBorderWidth | Border width of the diagram's outer circle | Integer | Optional | Any Positive Value |
+     *
+     * **Notes:** Default value: 2
+     */
+    outerBorderWidth: 2,
+
+    /**
+     * | Parameter    | Description                                                                      | Type    | Required | Values              |
+     * | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- |
+     * | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number  | Optional | Decimal from 0 to 1 |
+     *
+     * **Notes:** Default value: 0.5
+     */
+    textPosition: 0.5,
   },
 
   /** The object containing configurations specific for req diagrams */
diff --git a/packages/mermaid/src/docs/syntax/pie.md b/packages/mermaid/src/docs/syntax/pie.md
index 2fe8c3e54..a18161c3f 100644
--- a/packages/mermaid/src/docs/syntax/pie.md
+++ b/packages/mermaid/src/docs/syntax/pie.md
@@ -35,6 +35,7 @@ Drawing a pie chart is really simple in mermaid.
 ## Example
 
 ```mermaid-example
+%%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%%
 pie showData
     title Key elements in Product X
     "Calcium" : 42.96
@@ -42,3 +43,12 @@ pie showData
     "Magnesium" : 10.01
     "Iron" :  5
 ```
+
+## Configuration
+
+Possible pie diagram configuration parameters:
+
+| Parameter          | Description                                                                                                  | Default value |
+| ------------------ | ------------------------------------------------------------------------------------------------------------ | ------------- |
+| `outerBorderWidth` | The border width of the pie diagram's outside circle                                                         | `2`           |
+| `textPosition`     | The axial position of the pie slice labels, from 0.0 at the center to 1.0 at the outside edge of the circle. | `0.5`         |