update funnel and pyramid samples

Author: junedchhipa

samples/react/funnel/funnel-first-class.html

@@ -44,7 +44,7 @@
     <div id="app"></div>
 
     <div id="html">&lt;div id=&quot;chart&quot;&gt;
-  &lt;ReactApexChart options={state.options} series={state.series} type=&quot;bar&quot; height={350} /&gt;
+  &lt;ReactApexChart options={state.options} series={state.series} type=&quot;funnel&quot; height={350} /&gt;
 &lt;/div&gt;</div>
 
     <script type="text/babel">
@@ -59,7 +59,7 @@
             ],
             options: {
               chart: {
-                type: 'bar',
+                type: 'funnel',
                 height: 350,
                 dropShadow: {
                   enabled: true,
@@ -68,9 +68,7 @@
               plotOptions: {
                 bar: {
                   borderRadius: 0,
-                  horizontal: true,
                   barHeight: '80%',
-                  isFunnel: true,
                 },
               },
               dataLabels: {
@@ -111,7 +109,7 @@
         return (
           <div>
             <div id="chart">
-                <ReactApexChart options={state.options} series={state.series} type="bar" height={350} />
+                <ReactApexChart options={state.options} series={state.series} type="funnel" height={350} />
               </div>
             <div id="html-dist"></div>
           </div>

samples/react/funnel/funnel.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>Funnel Chart</title>
+    <title>Pyramid Chart (chart.type: 'pyramid')</title>
 
     <link href="../../assets/styles.css" rel="stylesheet" />
 
@@ -44,7 +44,7 @@
     <div id="app"></div>
 
     <div id="html">&lt;div id=&quot;chart&quot;&gt;
-  &lt;ReactApexChart options={state.options} series={state.series} type=&quot;bar&quot; height={350} /&gt;
+  &lt;ReactApexChart options={state.options} series={state.series} type=&quot;pyramid&quot; height={350} /&gt;
 &lt;/div&gt;</div>
 
     <script type="text/babel">
@@ -59,7 +59,7 @@
             ],
             options: {
               chart: {
-                type: 'bar',
+                type: 'pyramid',
                 height: 350,
                 dropShadow: {
                   enabled: true,
@@ -68,10 +68,8 @@
               plotOptions: {
                 bar: {
                   borderRadius: 0,
-                  horizontal: true,
                   distributed: true,
                   barHeight: '80%',
-                  isFunnel: true,
                 },
               },
               colors: [
@@ -87,14 +85,14 @@
               dataLabels: {
                 enabled: true,
                 formatter: function (val, opt) {
-                  return opt.w.globals.labels[opt.dataPointIndex] 
+                  return opt.w.globals.labels[opt.dataPointIndex]
                 },
                 dropShadow: {
                   enabled: true,
                 },
               },
               title: {
-                text: 'Pyramid Chart',
+                text: 'Food Pyramid',
                 align: 'middle',
               },
               xaxis: {
@@ -113,7 +111,7 @@
         return (
           <div>
             <div id="chart">
-                <ReactApexChart options={state.options} series={state.series} type="bar" height={350} />
+                <ReactApexChart options={state.options} series={state.series} type="pyramid" height={350} />
               </div>
             <div id="html-dist"></div>
           </div>

samples/react/funnel/pyramid-first-class.html

@@ -68,6 +68,7 @@
                   lastShape: 'taper',
                 },
                 bar: {
+                  barHeight: '90%',
                   distributed: true,
                 },
               },

samples/react/funnel/pyramid.html

@@ -71,16 +71,17 @@
                   lastShape: 'flat',
                 },
                 bar: {
+                  barHeight: '90%',
                   distributed: true,
                 },
               },
               colors: [
-                '#3B82F6',
-                '#6366F1',
-                '#8B5CF6',
-                '#A855F7',
-                '#D946EF',
-                '#EC4899',
+                '#3b82f6',
+                '#00a3f4',
+                '#00b7b8',
+                '#00c161',
+                '#93bd00',
+                '#ffa600'
               ],
               dataLabels: {
                 enabled: true,