Fixed all review comment

demos/xychart.html

@@ -23,9 +23,8 @@
     bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
     line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
     </pre>
-
     <hr />
-
+    <h1>XY Charts horizontal</h1>
     <pre class="mermaid">
     xychart-beta horizontal
     title "Basic xychart"
@@ -34,19 +33,8 @@
     bar "sample bat" [52, 96, 35, 10]
     line [23, 46, 75, 43]
     </pre>
-
-    <h1>XY Charts demos</h1>
-    <pre class="mermaid">
-    xychart-beta
-    title "Basic xychart"
-    x-axis "this is x axis" [category1, "category 2", category3, category4]
-    y-axis yaxisText 10 --> 150
-    bar "sample bat" [52, 96, 35, 10]
-    line [23, 46, 75, 43]
-    </pre>
-
     <hr />
-    <h1>XY Charts demos</h1>
+    <h1>XY Charts only lines and bar</h1>
     <pre class="mermaid">
     xychart-beta
     line [23, 46, 77, 34]
@@ -54,19 +42,18 @@
     line [87, 54, 99, 85]
     line [78, 88, 22, 4]
     line [22, 29, 75, 33]
-    bar "sample bat" [52, 96, 35, 10]
+    bar [52, 96, 35, 10]
     </pre>
 
     <hr />
-    <h1>XY Charts demos</h1>
+    <h1>XY Charts with +ve and -ve numbers</h1>
     <pre class="mermaid">
     xychart-beta
     line [+1.3, .6, 2.4, -.34]
     </pre>
 
-    <h1>XY Charts demos</h1>
+    <h1>XY Charts Bar with multiple category</h1>
     <pre class="mermaid">
-    %%{init: {"xyChart": {"width": 600, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
     xychart-beta
     title "Basic xychart with many categories"
     x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
@@ -74,7 +61,7 @@
     bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
     </pre>
 
-    <h1>XY Charts demos</h1>
+    <h1>XY Charts line with multiple category</h1>
     <pre class="mermaid">
     xychart-beta
     title "Line chart with many category"
@@ -83,7 +70,7 @@
     line "sample line" [52, 96, 35, 10, 87, 34, 67, 99]
     </pre>
 
-    <h1>XY Charts demos</h1>
+    <h1>XY Charts category with large text</h1>
     <pre class="mermaid">
     xychart-beta
     title "Basic xychart with many categories with category overlap"
@@ -92,23 +79,89 @@
     bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
     </pre>
 
-    <h1>sparkline demos</h1>
+    <h1>sparkline demo</h1>
     <pre class="mermaid">
-      %%{init: {"theme":"dark", "xyChart": { "width":200, "height": 20, "plotReservedSpacePercent": 100}}}%%
+---
+config:
+  theme: dark
+  xyChart:
+    width: 200
+    height: 20
+    plotReservedSpacePercent: 100
+---
     xychart-beta
       line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
     </pre>
 
-    <h1>sparkBar demos</h1>
+    <h1>sparkBar demo</h1>
     <pre class="mermaid">
-    %%{init: {"theme":"dark", "xyChart": {"width": 200, "height": 20,  "xAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false},  "yAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}}}}%%
+---
+config:
+  theme: dark
+  xyChart:
+    width: 200
+    height: 20
+    plotReservedSpacePercent: 100
+---
     xychart-beta
       bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
     </pre>
 
-    <h1>XY Charts demos</h1>
+    <h1>XY Charts demos with all configs</h1>
     <pre class="mermaid">
-    %%{init: {"theme": "dark", "xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5},  "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60  }}}%%
+---
+config:
+  theme: forest
+  xyChart:
+    width: 1000
+    height: 600
+    titlePadding: 5
+    titleFontSize: 10
+    xAxis:
+      labelFontSize: 20
+      labelPadding: 10
+      titleFontSize: 30
+      titlePadding: 20
+      tickLength: 10
+      tickWidth: 5
+      axisLineWidth: 5
+    yAxis:
+      labelFontSize: 20
+      labelPadding: 10
+      titleFontSize: 30
+      titlePadding: 20
+      tickLength: 10
+      tickWidth: 5
+      axisLineWidth: 5
+    chartOrientation: horizontal
+    plotReservedSpacePercent: 60
+---
+    xychart-beta
+      title "Sales Revene"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+
+    </pre>
+    <h1>XY Charts demos with all theme config</h1>
+    <pre class="mermaid">
+---
+config:
+  themeVariables:
+    xyChart:
+      titleColor: #ff0000
+      backgroundColor: #f0f8ff
+      yAxisLabelColor: #ee82ee
+      yAxisTitleColor: #7fffd4
+      yAxisTickColor: #87ceeb
+      yAxisLineColor: #ff6347
+      xAxisLabelColor: #7fffd4
+      xAxisTitleColor: #ee82ee
+      xAxisTickColor: #ff6347
+      xAxisLineColor: #87ceeb
+      plotColorPalette: #008000, #faba63
+---
     xychart-beta
       title "Sales Revene"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]