syncfusion-content · mercy-orejo · May 21, 2024 · May 22, 2024 · May 22, 2024 · May 27, 2024
diff --git a/ej2-react/chart/chart-types/pareto.md b/ej2-react/chart/chart-types/pareto.md
@@ -87,41 +87,41 @@ Use the [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/paret
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/chart/series/waterfall-cs8/app/index.jsx %}
+{% include code-snippet/chart/series/waterfall-cs9/app/index.jsx %}
 {% endhighlight %}
 {% highlight ts tabtitle="index.tsx" %}
-{% include code-snippet/chart/series/waterfall-cs8/app/index.tsx %}
+{% include code-snippet/chart/series/waterfall-cs9/app/index.tsx %}
 {% endhighlight %}
 {% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/chart/series/waterfall-cs8/app/datasource.jsx %}
+{% include code-snippet/chart/series/waterfall-cs9/app/datasource.jsx %}
 {% endhighlight %}
 {% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/chart/series/waterfall-cs8/app/datasource.tsx %}
+{% include code-snippet/chart/series/waterfall-cs9/app/datasource.tsx %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/chart/series/waterfall-cs8" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/waterfall-cs9" %}
 
 ### Dash array
 
 The [dashArray](https://ej2.syncfusion.com/react/documentation/api/chart/paretoOptions/#dasharray) property determines the pattern of dashes and gaps in the pareto line series.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/chart/series/waterfall-cs9/app/index.jsx %}
+{% include code-snippet/chart/series/waterfall-cs8/app/index.jsx %}
 {% endhighlight %}
 {% highlight ts tabtitle="index.tsx" %}
-{% include code-snippet/chart/series/waterfall-cs9/app/index.tsx %}
+{% include code-snippet/chart/series/waterfall-cs8/app/index.tsx %}
 {% endhighlight %}
 {% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/chart/series/waterfall-cs9/app/datasource.jsx %}
+{% include code-snippet/chart/series/waterfall-cs8/app/datasource.jsx %}
 {% endhighlight %}
 {% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/chart/series/waterfall-cs9/app/datasource.tsx %}
+{% include code-snippet/chart/series/waterfall-cs8/app/datasource.tsx %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/chart/series/waterfall-cs9" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/waterfall-cs8" %}
 
 ### Marker
 

diff --git a/ej2-react/chart/chart-types/stacked-line.md b/ej2-react/chart/chart-types/stacked-line.md
@@ -80,6 +80,25 @@ The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/
 
 {% previewsample "page.domainurl/code-snippet/chart/series/100stackedline-cs1" %}
 
+The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#fill) property can be used to apply a gradient color to the 100% stacked line series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/chart/series/100stackedline-cs1A/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/series/100stackedline-cs1A/app/index.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/chart/series/100stackedline-cs1A/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/chart/series/100stackedline-cs1A/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/100stackedline-cs1A" %}
+
 **Opacity**
 
 The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel/#opacity) property specifies the transparency level of the fill. Adjusting this property allows you to control how opaque or transparent the fill color of the series appears.

diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let chartData = [
+    { x: 'Food',          y: 90,  y1: 40, y2: 70,  y3: 120 },
+    { x: 'Transport',     y: 80,  y1: 90, y2: 110, y3: 70 },
+    { x: 'Medical',       y: 50,  y1: 80, y2: 120, y3: 50 },
+    { x: 'Clothes',       y: 70,  y1: 30, y2: 60,  y3: 180 },
+    { x: 'Personal Care', y: 30,  y1: 80, y2: 80,  y3: 30 },
+    { x: 'Books',         y: 10,  y1: 40, y2: 30,  y3: 270 },
+    { x: 'Fitness',       y: 100, y1: 30, y2: 70,  y3: 40 },
+    { x: 'Electricity',   y: 55,  y1: 95, y2: 55,  y3: 75 },
+    { x: 'Tax',           y: 20,  y1: 50, y2: 40,  y3: 65 },
+    { x: 'Pet Care',      y: 40,  y1: 20, y2: 80,  y3: 95 },
+    { x: 'Education',     y: 45,  y1: 15, y2: 45,  y3: 195 },
+    { x: 'Entertainment', y: 75,  y1: 45, y2: 65,  y3: 115 }
+];
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let chartData: Object[] = [
+    { x: 'Food',          y: 90,  y1: 40, y2: 70,  y3: 120 },
+    { x: 'Transport',     y: 80,  y1: 90, y2: 110, y3: 70 },
+    { x: 'Medical',       y: 50,  y1: 80, y2: 120, y3: 50 },
+    { x: 'Clothes',       y: 70,  y1: 30, y2: 60,  y3: 180 },
+    { x: 'Personal Care', y: 30,  y1: 80, y2: 80,  y3: 30 },
+    { x: 'Books',         y: 10,  y1: 40, y2: 30,  y3: 270 },
+    { x: 'Fitness',       y: 100, y1: 30, y2: 70,  y3: 40 },
+    { x: 'Electricity',   y: 55,  y1: 95, y2: 55,  y3: 75 },
+    { x: 'Tax',           y: 20,  y1: 50, y2: 40,  y3: 65 },
+    { x: 'Pet Care',      y: 40,  y1: 20, y2: 80,  y3: 95 },
+    { x: 'Education',     y: 45,  y1: 15, y2: 45,  y3: 195 },
+    { x: 'Entertainment', y: 75,  y1: 45, y2: 65,  y3: 115 }
+];
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/index.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/index.jsx
@@ -0,0 +1,27 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingLineSeries } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+function App() {
+    const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+    return <ChartComponent id='charts' primaryXAxis={{ interval: 1, valueType: 'Category' }} primaryYAxis={{ title: 'Expense', interval: 20 }} title='Family Expense for Month'>
+          <Inject services={[StackingLineSeries, Legend, Tooltip, DataLabel, Category]}/>
+          <SeriesCollectionDirective>
+          <SeriesDirective dataSource={chartData} xName='x' yName='y' name='John' type='StackingLine100' marker={{ visible: true }} fill='url(#gradient1)'>
+              </SeriesDirective>
+              <SeriesDirective dataSource={chartData} xName='x' yName='y1' name='Peter' type='StackingLine100' marker={{ visible: true }} fill='url(#gradient2)'>
+              </SeriesDirective>
+              <SeriesDirective dataSource={chartData} xName='x' yName='y2' name='Steve' type='StackingLine100' marker={{ visible: true }} fill='url(#gradient3)'>
+              </SeriesDirective>
+              <SeriesDirective dataSource={chartData} xName='x' yName='y3' name='Charle' type='StackingLine100' marker={{ visible: true }} fill='url(#gradient4)'>
+              </SeriesDirective>
+              </SeriesCollectionDirective>
+         </ChartComponent>
+}
+;
+export default App;
+ReactDOM.render(<App />, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/index.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/index.tsx
@@ -0,0 +1,36 @@
+
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingLineSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+
+function App() {
+
+  const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+
+  return <ChartComponent id='charts'
+          primaryXAxis={{ interval: 1,  valueType: 'Category' }}
+          primaryYAxis={{ title: 'Expense', interval: 20 }}
+          title='Family Expense for Month'>
+          <Inject services={[StackingLineSeries, Legend, Tooltip, DataLabel, Category]} />
+          <SeriesCollectionDirective>
+          <SeriesDirective dataSource={chartData} xName='x' yName='y' name='John' type='StackingLine100' marker={{ visible: true }} fill='url(#gradient1)'>
+              </SeriesDirective>
+              <SeriesDirective dataSource={chartData} xName='x' yName='y1' name='Peter' type='StackingLine100' marker={{ visible: true }} fill='url(#gradient2)'>
+              </SeriesDirective>
+              <SeriesDirective dataSource={chartData} xName='x' yName='y2' name='Steve' type='StackingLine100' marker={{ visible: true }} fill='url(#gradient3)'>
+              </SeriesDirective>
+              <SeriesDirective dataSource={chartData} xName='x' yName='y3' name='Charle' type='StackingLine100' marker={{ visible: true }} fill='url(#gradient4)'>
+              </SeriesDirective>
+              </SeriesCollectionDirective>
+         </ChartComponent>
+
+};
+export default App;
+ReactDOM.render(<App />, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs1A/index.html b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Chart-Line Series</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+     <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+        #charts {
+            height : 350px;
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+        <div id='charts'>
+            <div id='loader'>Loading....</div>
+        </div>
+        <svg style="width:1px; height:1px">
+            <defs>
+                <linearGradient id="gradient1">
+                    <stop offset="0%" style="stop-color:coral;stop-opacity:5" />
+                    <stop offset="50%" style="stop-color:mediumseagreen;stop-opacity:5" />
+                </linearGradient>
+            </defs>
+        </svg>
+
+        <svg style="width:1px; height:1px">
+            <defs>
+                <linearGradient id="gradient2">
+                    <stop offset="0%" style="stop-color:darkred;stop-opacity:5" />
+                    <stop offset="50%" style="stop-color:darkorange;stop-opacity:5" />
+                </linearGradient>
+            </defs>
+        </svg>
+
+        <svg style="width:1px; height:1px">
+            <defs>
+                <linearGradient id="gradient3">
+                    <stop offset="0%" style="stop-color:darkmagenta;stop-opacity:5" />
+                    <stop offset="50%" style="stop-color:darkcyan;stop-opacity:5" />
+                </linearGradient>
+            </defs>
+        </svg>
+
+        <svg style="width:1px; height:1px">
+            <defs>
+                <linearGradient id="gradient4">
+                    <stop offset="0%" style="stop-color:darkviolet;stop-opacity:5" />
+                    <stop offset="50%" style="stop-color:darkgoldenrod;stop-opacity:5" />
+                </linearGradient>
+            </defs>
+        </svg>
+</body>
+
+</html>
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs1A/systemjs.config.js b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+            target: "es5",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true,
+            "jsx": "react"
+    },
+     meta: {
+      'typescript': {
+        "exports": "ts"
+      }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: 'app',
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+        "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+        "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/bubble-cs5/app/index.jsx b/ej2-react/code-snippet/chart/series/bubble-cs5/app/index.jsx
@@ -8,10 +8,10 @@ function App() {
     const seriesRender = (args) => {
       args.fill = '#ff6347';
     };
-    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='GDP vs Literacy Rate'>
+    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} seriesRender={seriesRender} title='GDP vs Literacy Rate'>
             <Inject services={[BubbleSeries]}/>
             <SeriesCollectionDirective>
-                <SeriesDirective dataSource={data} xName='x' yName='y' size='size' type='Bubble' name='pound' seriesRender={seriesRender}>
+                <SeriesDirective dataSource={data} xName='x' yName='y' size='size' type='Bubble' name='pound'>
                 </SeriesDirective>
             </SeriesCollectionDirective>
           </ChartComponent>;

diff --git a/ej2-react/code-snippet/chart/series/bubble-cs5/app/index.tsx b/ej2-react/code-snippet/chart/series/bubble-cs5/app/index.tsx
@@ -18,6 +18,7 @@ const seriesRender: EmitType<ISeriesRenderEventArgs> = (args: ISeriesRenderEvent
            primaryXAxis={ primaryxAxis }
            primaryYAxis={ primaryyAxis }
            title='GDP vs Literacy Rate'>
+            seriesRender={seriesRender}
             <Inject services={[BubbleSeries]}/>
             <SeriesCollectionDirective>
                 <SeriesDirective dataSource ={data}  xName='x' yName='y' size='size' type='Bubble' name='pound' seriesRender={seriesRender}>

diff --git a/ej2-react/code-snippet/chart/series/bubble-cs6/app/index.jsx b/ej2-react/code-snippet/chart/series/bubble-cs6/app/index.jsx
@@ -11,10 +11,10 @@ function App() {
         args.series.bullFillColor = '#009cb8';
       };
     };
-    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='GDP vs Literacy Rate'>
+    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='GDP vs Literacy Rate' pointRender={pointRender}>
             <Inject services={[BubbleSeries]}/>
             <SeriesCollectionDirective>
-                <SeriesDirective dataSource={data} xName='x' yName='y' size='size' type='Bubble' name='pound' pointRender={pointRender}>
+                <SeriesDirective dataSource={data} xName='x' yName='y' size='size' type='Bubble' name='pound'>
                 </SeriesDirective>
             </SeriesCollectionDirective>
           </ChartComponent>;

diff --git a/ej2-react/code-snippet/chart/series/bubble-cs6/app/index.tsx b/ej2-react/code-snippet/chart/series/bubble-cs6/app/index.tsx
@@ -17,10 +17,10 @@ const pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArg
   return <ChartComponent id='charts'
            primaryXAxis={ primaryxAxis }
            primaryYAxis={ primaryyAxis }
-           title='GDP vs Literacy Rate'>
+           title='GDP vs Literacy Rate' pointRender={pointRender}>
             <Inject services={[BubbleSeries]}/>
             <SeriesCollectionDirective>
-                <SeriesDirective dataSource ={data}  xName='x' yName='y' size='size' type='Bubble' name='pound' pointRender={pointRender}>
+                <SeriesDirective dataSource ={data}  xName='x' yName='y' size='size' type='Bubble' name='pound'>
                 </SeriesDirective>
             </SeriesCollectionDirective>
           </ChartComponent>

diff --git a/ej2-react/code-snippet/chart/series/candle-cs5/app/index.tsx b/ej2-react/code-snippet/chart/series/candle-cs5/app/index.tsx
@@ -25,7 +25,7 @@ function App() {
       <Inject services={[CandleSeries, Tooltip, Category, Crosshair, Zoom]} />
       <SeriesCollectionDirective>
         <SeriesDirective dataSource={chartData} xName='x' yName='low' name='SHIRPUR-G' type='Candle' low='low'
-          high='high' open='open' close='close' emptyPointSettings={emptyPoint} bearFillColor='#e56590' bullFillColor='#f8b883'>
+          high='high' open='open' close='close' bearFillColor='#e56590' bullFillColor='#f8b883'>
         </SeriesDirective>
       </SeriesCollectionDirective>
     </ChartComponent>

diff --git a/ej2-react/code-snippet/chart/series/errorbar-cs8/app/index.tsx b/ej2-react/code-snippet/chart/series/errorbar-cs8/app/index.tsx
@@ -5,7 +5,7 @@ import * as ReactDOM from "react-dom";
 import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
          Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection, ErrorBar, ISeriesRenderEventArgs }
 from'@syncfusion/ej2-react-charts';
-import { EmitType } '@syncfusion/ej2-base';
+import { EmitType } from '@syncfusion/ej2-base';
 import { data } from './datasource';
 
 function App() {

diff --git a/ej2-react/code-snippet/chart/series/errorbar-cs9/app/index.tsx b/ej2-react/code-snippet/chart/series/errorbar-cs9/app/index.tsx
@@ -5,7 +5,7 @@ import * as ReactDOM from "react-dom";
 import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
          Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection, ErrorBar, IPointRenderEventArgs }
 from'@syncfusion/ej2-react-charts';
-import { EmitType } '@syncfusion/ej2-base';
+import { EmitType } from '@syncfusion/ej2-base';
 import { data } from './datasource';
 
 function App() {

diff --git a/ej2-react/code-snippet/chart/series/hilo-cs8/app/index.tsx b/ej2-react/code-snippet/chart/series/hilo-cs8/app/index.tsx
@@ -20,7 +20,7 @@ function App() {
   else {
       args.fill = '#009cb8';
   }
-}l
+};
   return <ChartComponent id='charts' style={style}
       primaryXAxis={primaryxAxis}
       primaryYAxis={primaryyAxis}

diff --git a/ej2-react/code-snippet/chart/series/line-cs47/app/index.jsx b/ej2-react/code-snippet/chart/series/line-cs47/app/index.jsx
@@ -41,9 +41,10 @@ function App() {
           xName="x"
           yName="y"
           name="Product A"
+          marker={{visible: true}}
           dashArray="2,5"
           type="Area"
-          emptyPointsettings={emptyPoint}
+          emptyPointSettings={emptyPoint}
         ></SeriesDirective>
       </SeriesCollectionDirective>
     </ChartComponent>