fix #596; negative line color feature added

apexcharts · Nov 7, 2024 · 14b2c7c · 14b2c7c
1 parent 5c3bba0
commit 14b2c7c
Show file tree

Hide file tree

Showing 12 changed files with 698 additions and 863 deletions.
diff --git a/samples/react/area/area-with-negative.html b/samples/react/area/area-with-negative.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Area with Negative - Stacked</title>
+    <title>Area with different negative color</title>
 
     <link href="../../assets/styles.css" rel="stylesheet" />
 
@@ -71,231 +71,53 @@
 
           this.state = {
 
-            series: [{
-              name: 'north',
-              data: [{
-                  x: 1996,
-                  y: 322
-                },
-                {
-                  x: 1997,
-                  y: 324
-                },
-                {
-                  x: 1998,
-                  y: 329
-                },
-                {
-                  x: 1999,
-                  y: 342
-                },
-                {
-                  x: 2000,
-                  y: 348
-                },
-                {
-                  x: 2001,
-                  y: 334
-                },
-                {
-                  x: 2002,
-                  y: 325
-                },
-                {
-                  x: 2003,
-                  y: 316
-                },
-                {
-                  x: 2004,
-                  y: 318
-                },
-                {
-                  x: 2005,
-                  y: 330
-                },
-                {
-                  x: 2006,
-                  y: 355
-                },
-                {
-                  x: 2007,
-                  y: 366
-                },
-                {
-                  x: 2008,
-                  y: 337
-                },
-                {
-                  x: 2009,
-                  y: 352
-                },
-                {
-                  x: 2010,
-                  y: 377
-                },
-                {
-                  x: 2011,
-                  y: 383
-                },
-                {
-                  x: 2012,
-                  y: 344
-                },
-                {
-                  x: 2013,
-                  y: 366
-                },
-                {
-                  x: 2014,
-                  y: 389
-                },
-                {
-                  x: 2015,
-                  y: 334
-                }
-              ]
-            }, {
-              name: 'south',
-              data: [
-                {
-                  x: 1996,
-                  y: 162
-                },
-                {
-                  x: 1997,
-                  y: 90
-                },
-                {
-                  x: 1998,
-                  y: 50
-                },
-                {
-                  x: 1999,
-                  y: 77
-                },
-                {
-                  x: 2000,
-                  y: 35
-                },
-                {
-                  x: 2001,
-                  y: -45
-                },
-                {
-                  x: 2002,
-                  y: -88
-                },
-                {
-                  x: 2003,
-                  y: -120
-                },
-                {
-                  x: 2004,
-                  y: -156
-                },
-                {
-                  x: 2005,
-                  y: -123
-                },
-                {
-                  x: 2006,
-                  y: -88
-                },
-                {
-                  x: 2007,
-                  y: -66
-                },
-                {
-                  x: 2008,
-                  y: -45
-                },
-                {
-                  x: 2009,
-                  y: -29
-                },
-                {
-                  x: 2010,
-                  y: -45
-                },
-                {
-                  x: 2011,
-                  y: -88
-                },
-                {
-                  x: 2012,
-                  y: -132
-                },
-                {
-                  x: 2013,
-                  y: -146
-                },
-                {
-                  x: 2014,
-                  y: -169
-                },
-                {
-                  x: 2015,
-                  y: -184
-                }
-              ]
-            }],
+            series: [
+              {
+                data: [0, -41, 35, -51, 0, 62, -69, 32, -32, 54, 16, -50],
+              }
+            ],
             options: {
               chart: {
+                height: 350,
                 type: 'area',
-                height: 350
+                zoom: {
+                  enabled: false,
+                },
               },
               dataLabels: {
-                enabled: false
-              },
-              stroke: {
-                curve: 'straight'
+                enabled: false,
               },
-
               title: {
-                text: 'Area with Negative Values',
+                text: 'Negative color for values less than 0',
                 align: 'left',
-                style: {
-                  fontSize: '14px'
-                }
-              },
-              yaxis: {
-                tickAmount: 4,
-                floating: false,
-                labels: {
-                  style: {
-                    colors: '#8e8da4',
-                  },
-                  offsetY: -7,
-                  offsetX: 0,
-                },
-                axisBorder: {
-                  show: false,
-                },
-                axisTicks: {
-                  show: false
-                }
               },
-              fill: {
-                opacity: 0.5
+              xaxis: {
+                categories: [
+                  'Jan',
+                  'Feb',
+                  'Mar',
+                  'Apr',
+                  'May',
+                  'Jun',
+                  'Jul',
+                  'Aug',
+                  'Sep',
+                  'Oct',
+                  'Nov',
+                  'Dec',
+                ],
               },
-              tooltip: {
-                x: {
-                  format: "yyyy",
-                },
-                fixed: {
-                  enabled: false,
-                  position: 'topRight'
-                }
+              stroke: {
+                width: 0,
               },
-              grid: {
-                yaxis: {
-                  lines: {
-                    offsetX: -30
-                  }
+              plotOptions: {
+                line: {
+                  colors: {
+                    threshold: 0,
+                    colorAboveThreshold: '#0088ee',
+                    colorBelowThreshold: '#ff0000',
+                  },
                 },
-                padding: {
-                  left: 20
-                }
               }
             },