How can I help you?
Gallery Items in React Ribbon component
13 Apr 202624 minutes to read
The Ribbon component supports a gallery feature that displays a collection of related items, such as icons, content, or images, to allow users to perform specific actions. To render a gallery in the Ribbon, use the <e-ribbon-item> tag directive with the type property set to Gallery.
The gallery can be configured through the RibbonGallerySettingsModel, which provides options to manage groups, itemCount, popupHeight, popupWidth, and more.
Groups
The gallery can be organized into logical groups using the groups property. Each group can be customized using the RibbonGalleryGroupModel, which includes options for items, cssClass, header, and more.
Adding Gallery Items
Gallery items are defined using the items property. Each item can be configured with the RibbonGalleryItemModel, which provides options like content, iconCss, and disabled.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery } from '@syncfusion/ej2-react-ribbon';
function App() {
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings = (
{
groups: [{
header: 'Styles',
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery, RibbonGallerySettingsModel } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
function App() {
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings: RibbonGallerySettingsModel = (
{
groups: [{
header: 'Styles',
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));Defining Item Content
The content property specifies the text to be displayed for a gallery item.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery } from '@syncfusion/ej2-react-ribbon';
function App() {
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings = (
{
groups: [{
header: 'Styles',
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery, RibbonGallerySettingsModel } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
function App() {
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings: RibbonGallerySettingsModel = (
{
groups: [{
header: 'Styles',
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));Defining Item Icons
To associate an icon with a gallery item, use the iconCss property.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery } from '@syncfusion/ej2-react-ribbon';
function App() {
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings = (
{
groups: [{
header: 'Transitions',
items: [
{
content: 'None',
iconCss: 'e-icons e-rectangle'
}, {
content: 'Fade',
iconCss: 'e-icons e-send-backward'
}, {
content: 'Reveal',
iconCss: 'e-icons e-bring-forward'
}, {
content: 'Zoom',
iconCss: 'e-icons e-zoom-to-fit'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery, RibbonGallerySettingsModel } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
function App() {
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings: RibbonGallerySettingsModel = (
{
groups: [{
header: 'Transitions',
items: [
{
content: 'None',
iconCss: 'e-icons e-rectangle'
}, {
content: 'Fade',
iconCss: 'e-icons e-send-backward'
}, {
content: 'Reveal',
iconCss: 'e-icons e-bring-forward'
}, {
content: 'Zoom',
iconCss: 'e-icons e-zoom-to-fit'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));Adding HTML Attributes to Items
The htmlAttributes property allows you to add custom HTML attributes to a gallery item’s element.
The following sample shows how to add a title attribute to a gallery item.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery } from '@syncfusion/ej2-react-ribbon';
function App() {
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings = (
{
groups: [{
header: 'Styles',
items: [
{
content: 'Normal',
htmlAttributes: { title: "Normal" }
}, {
content: 'No Spacing',
htmlAttributes: { title: "No Spacing" }
}, {
content: 'Heading 1',
htmlAttributes: { title: "Heading 1" }
}, {
content: 'Heading 2',
htmlAttributes: { title: "Heading 2" }
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery, RibbonGallerySettingsModel } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
function App() {
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings: RibbonGallerySettingsModel = (
{
groups: [{
header: 'Styles',
items: [
{
content: 'Normal',
htmlAttributes: { title: "Normal" }
}, {
content: 'No Spacing',
htmlAttributes: { title: "No Spacing" }
}, {
content: 'Heading 1',
htmlAttributes: { title: "Heading 1" }
}, {
content: 'Heading 2',
htmlAttributes: { title: "Heading 2" }
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));Customizing Item Appearance
To apply a custom style to a gallery item, use the cssClass property.
The following sample demonstrates how to customize the appearance of a gallery item.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery } from '@syncfusion/ej2-react-ribbon';
function App() {
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings = (
{
groups: [{
header: 'Good, Bad and Neutral',
items: [{
content: 'Normal',
cssClass: 'normal'
}, {
content: 'Bad',
cssClass: 'bad'
}, {
content: 'Good',
cssClass: 'good'
}, {
content: 'Neutral',
cssClass: 'neutral'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery, RibbonGallerySettingsModel } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
function App() {
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings: RibbonGallerySettingsModel = (
{
groups: [{
header: 'Good, Bad and Neutral',
items: [{
content: 'Normal',
cssClass: 'normal'
}, {
content: 'Bad',
cssClass: 'bad'
}, {
content: 'Good',
cssClass: 'good'
}, {
content: 'Neutral',
cssClass: 'neutral'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-ribbon-gallery-item {
margin: 5px;
}
.e-ribbon-gallery-item.normal{
background: #f0f0f0;
color: #333;
}
.e-ribbon-gallery-item.bad {
background: #ffb6b6;
color: #800000;
}
.e-ribbon-gallery-item.good {
background: #c7ebc9;
color: #004d00;
}
.e-ribbon-gallery-item.neutral {
background: #eedd9d;
color: #6c5429;
}Disabling a Gallery Item
To disable a gallery item and prevent user interaction, set its disabled property to true. By default, this value is false.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery } from '@syncfusion/ej2-react-ribbon';
function App() {
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings = (
{
groups: [{
header: 'Styles',
items: [
{
content: 'Normal',
disabled: true
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery, RibbonGallerySettingsModel } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
function App() {
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings: RibbonGallerySettingsModel = (
{
groups: [{
header: 'Styles',
items: [
{
content: 'Normal',
disabled: true
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));Defining a Group Header
The header property sets a title for a group of items within the gallery popup.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery } from '@syncfusion/ej2-react-ribbon';
function App() {
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings = (
{
groups: [{
header: 'Styles',
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery, RibbonGallerySettingsModel } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
function App() {
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings: RibbonGallerySettingsModel = (
{
groups: [{
header: 'Styles',
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));Setting Item Dimensions
The size of gallery items can be controlled using the itemWidth and itemHeight properties. When an itemHeight is set, items are aligned in rows according to the specified itemCount.
The following sample demonstrates how to set custom dimensions for gallery items.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery } from '@syncfusion/ej2-react-ribbon';
function App() {
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings = (
{
popupWidth: '350',
groups: [{
itemWidth: '100',
itemHeight: '30',
header: 'Styles',
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}, {
content: 'Title'
}, {
content: 'Subtitle'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery, RibbonGallerySettingsModel } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
function App() {
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings: RibbonGallerySettingsModel = (
{
popupWidth: '350',
groups: [{
itemWidth: '100',
itemHeight: '30',
header: 'Styles',
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}, {
content: 'Title'
}, {
content: 'Subtitle'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));Customizing Group Appearance
To apply custom styles to a gallery group container, use the group’s cssClass property.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery } from '@syncfusion/ej2-react-ribbon';
function App() {
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings = (
{
groups: [{
header: 'Styles',
cssClass: "custom-group",
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery, RibbonGallerySettingsModel } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
function App() {
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings: RibbonGallerySettingsModel = (
{
groups: [{
header: 'Styles',
cssClass: "custom-group",
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.custom-group {
font-style: italic;
}Setting the Displayed Item Count
To control the number of items displayed inline in the Ribbon gallery, use the itemCount property. By default, the itemCount is 3.
The following example showcases a gallery with 4 items displayed.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery } from '@syncfusion/ej2-react-ribbon';
function App() {
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings = (
{
itemCount: 4,
groups: [{
header: 'Styles',
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery, RibbonGallerySettingsModel } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
function App() {
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings: RibbonGallerySettingsModel = (
{
itemCount: 4,
groups: [{
header: 'Styles',
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));Pre-selecting an Item
The selectedItemIndex property allows you to define the initially selected item in the gallery.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery } from '@syncfusion/ej2-react-ribbon';
function App() {
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings = (
{
selectedItemIndex: 1,
groups: [{
header: 'Styles',
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery, RibbonGallerySettingsModel } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
function App() {
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings: RibbonGallerySettingsModel = (
{
selectedItemIndex: 1,
groups: [{
header: 'Styles',
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));Setting Popup Dimensions
The dimensions of the gallery popup can be explicitly set using the popupHeight and popupWidth properties.
This sample demonstrates how to configure a custom size for the gallery popup.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery } from '@syncfusion/ej2-react-ribbon';
function App() {
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings = (
{
popupHeight: '180',
popupWidth: '350',
groups: [{
header: 'Styles',
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}, {
content: 'Title'
}, {
content: 'Subtitle'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery, RibbonGallerySettingsModel } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
function App() {
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const gallerySettings: RibbonGallerySettingsModel = (
{
popupHeight: '180',
popupWidth: '350',
groups: [{
header: 'Styles',
items: [
{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}, {
content: 'Title'
}, {
content: 'Subtitle'
}
]
}]
}
);
return (
<div>
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" splitButtonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));Template
You can completely redefine the appearance and content of gallery items by using the template property.
Popup Template
To customize the gallery’s popup container, use the popupTemplate property.
The example below demonstrates how to implement both an template and a popupTemplate.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonGallery, Inject } from '@syncfusion/ej2-react-ribbon';
function App() {
function galleryTemplate(items){
return <div className={`gallery-template ${items.cssClass}`}>
<table className="table">
<tbody>
<tr className="row_one">
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
</tr>
<tr className="row_two">
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
</tr>
<tr className="row_three">
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
</tr>
</tbody>
</table>
</div>;
}
const gallerySettingsValue = ({
template: galleryTemplate,
popupTemplate: galleryTemplate,
itemCount: 7,
groups: [{
header: 'Plain Tables',
items: [
{
cssClass: "plainTables_item_1"
},
{
cssClass: "plainTables_item_2"
},
{
cssClass: "plainTables_item_3"
},
{
cssClass: "plainTables_item_4"
},
{
cssClass: "plainTables_item_5"
},
{
cssClass: "plainTables_item_6"
},
{
cssClass: "plainTables_item_7"
}
]
}, {
header: 'List Tables',
items: [
{
cssClass: "listTables_item_1"
},
{
cssClass: "listTables_item_2"
},
{
cssClass: "listTables_item_3"
},
{
cssClass: "listTables_item_4"
},
{
cssClass: "listTables_item_5"
},
{
cssClass: "listTables_item_6"
},
{
cssClass: "listTables_item_7"
}
]
}]
});
const splitbuttonModel = { iconCss: 'e-icons e-paste',items: [{ text: 'Keep Source Format' }, { text: 'Merge Format' }, { text: 'Keep Text Only' }], content: 'Paste' };
return (
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header='Clipboard' groupIconCss='e-icons e-paste'>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type='SplitButton' splitButtonSettings={splitbuttonModel}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type='Button' buttonSettings=<h1 id="funnel-in-react-accumulation-chart-component">Funnel in React Accumulation chart component</h1>
<p>To render a funnel series, use the series <a href="https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type"><code>type</code></a> as <code>Funnel</code> and inject the <code>FunnelSeries</code> module into the <code>services</code>.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vjt78bklohozleicis4fdo3di98m6o9e"></div>
<h2 id="size">Size</h2>
<p>The size of the funnel chart can be customized by using the <code>width</code> and <code>height</code> properties.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9ry5atnfapikoyw4gld40u0r5is48u6f-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9ry5atnfapikoyw4gld40u0r5is48u6f-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-3grs6ts2pj6oirs5890h52lo7ks2qxl3"></div>
<h2 id="neck-size">Neck size</h2>
<p>The funnel’s neck size can be customized by using the <code>neckWidth</code> and <code>neckHeight</code> properties.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#wpxb5bg8fimt59haq78estiu7k84sltz-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="wpxb5bg8fimt59haq78estiu7k84sltz-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-8z6gl4z9f41kleckf2s2vy41517044n4"></div>
<h2 id="gap-between-the-segments">Gap between the segments</h2>
<p>Funnel chart provides options to customize the space between the segments by using the <code>gapRatio</code> property of the series. It ranges from 0 to 1.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#41f8lbjc8nb3w87zx48i0c58impzdm44-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#zb89p2lt1nur2ir80fip52sxaowbca6p-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="41f8lbjc8nb3w87zx48i0c58impzdm44-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zb89p2lt1nur2ir80fip52sxaowbca6p-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-tx1igq7uty6pcpnzse3739jqu01q4hlt"></div>
<h2 id="explode">Explode</h2>
<p>Points can be exploded on mouse click by setting the <code>explode</code> property to true. You can also explode the point on load using <code>explodeIndex</code>. Explode distance can be set by using <code>explodeOffset</code> property.</p>
<div class="tabs" id="code-snippet-5">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#ohk19zy6bmx149z9q64druu3drwznnwj-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#d5xftv7er0216oucjdu3s5jom5dnk52m-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="ohk19zy6bmx149z9q64druu3drwznnwj-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="d5xftv7er0216oucjdu3s5jom5dnk52m-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-5n3s3x7xne9quuosnmlhqrw3scsw2sl4"></div>
<h2 id="smart-data-label">Smart data label</h2>
<p>It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.</p>
<div class="tabs" id="code-snippet-6">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#7ccl407flheiqq6flpnmy8g5gg2w95fx-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#imxv5fug0m255uak9xtgj3cshukb8ioy-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="7ccl407flheiqq6flpnmy8g5gg2w95fx-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccLoadedEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccResizeEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span>: <span class="kt">ClientRect</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span>: <span class="kt">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span><span class="p">,</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="imxv5fug0m255uak9xtgj3cshukb8ioy-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-xfr6r4820t4b0eruzti6djhh12ydt0tn"></div>
<h2 id="customization">Customization</h2>
<p>Individual points can be customized using the <code>pointRender</code> event.</p>
<div class="tabs" id="code-snippet-7">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vda50128qgc8tsmu0yhfzeopksmm7y6b-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#m4fcib63v7ypbho07f6v7alh88bri1f7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vda50128qgc8tsmu0yhfzeopksmm7y6b-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m4fcib63v7ypbho07f6v7alh88bri1f7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span><span class="p">,</span> <span class="nx">IAccPointRenderEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span>: <span class="kt">EmitType</span><span class="o"><</span><span class="nx">IAccPointRenderEventArgs</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccPointRenderEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span> <span class="kr">as</span> <span class="kt">string</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5"></div>
<h2 id="modes">Modes</h2>
<p>The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the <a href="https://helpej2.syncfusion.com/react/documentation/api/accumulation-chart/funnelModes"><code>funnelMode</code></a> is <code>Standard</code>.</p>
<h3 id="standard">Standard</h3>
<p>The <code>Standard</code> funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.</p>
<div class="tabs" id="code-snippet-8">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ob11ji04wbluzd08fs2uxnrlwd3u6met"></div>
<h3 id="trapezoidal">Trapezoidal</h3>
<p>The <code>Trapezoidal</code> mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.</p>
<div class="tabs" id="code-snippet-9">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#2insg80ddswec5ot9xvrwvhnr1bwn54z-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#brey6kdr1zje876mhekovlu40yw3xzha-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6tkamc4lvn2vnuobqcdiit10juppd0tv-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="2insg80ddswec5ot9xvrwvhnr1bwn54z-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="brey6kdr1zje876mhekovlu40yw3xzha-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6tkamc4lvn2vnuobqcdiit10juppd0tv-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vtph278uh3qzop0j4v4k125z9vsuarxu"></div>
<h2 id="see-also">See also</h2>
<ul>
<li><a href="./data-label">Data label</a></li>
<li><a href="./grouping">Grouping</a></li>
</ul>
>
</RibbonItemDirective>
<RibbonItemDirective type='Button' buttonSettings=<h1 id="funnel-in-react-accumulation-chart-component">Funnel in React Accumulation chart component</h1>
<p>To render a funnel series, use the series <a href="https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type"><code>type</code></a> as <code>Funnel</code> and inject the <code>FunnelSeries</code> module into the <code>services</code>.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vjt78bklohozleicis4fdo3di98m6o9e"></div>
<h2 id="size">Size</h2>
<p>The size of the funnel chart can be customized by using the <code>width</code> and <code>height</code> properties.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9ry5atnfapikoyw4gld40u0r5is48u6f-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9ry5atnfapikoyw4gld40u0r5is48u6f-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-3grs6ts2pj6oirs5890h52lo7ks2qxl3"></div>
<h2 id="neck-size">Neck size</h2>
<p>The funnel’s neck size can be customized by using the <code>neckWidth</code> and <code>neckHeight</code> properties.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#wpxb5bg8fimt59haq78estiu7k84sltz-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="wpxb5bg8fimt59haq78estiu7k84sltz-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-8z6gl4z9f41kleckf2s2vy41517044n4"></div>
<h2 id="gap-between-the-segments">Gap between the segments</h2>
<p>Funnel chart provides options to customize the space between the segments by using the <code>gapRatio</code> property of the series. It ranges from 0 to 1.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#41f8lbjc8nb3w87zx48i0c58impzdm44-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#zb89p2lt1nur2ir80fip52sxaowbca6p-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="41f8lbjc8nb3w87zx48i0c58impzdm44-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zb89p2lt1nur2ir80fip52sxaowbca6p-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-tx1igq7uty6pcpnzse3739jqu01q4hlt"></div>
<h2 id="explode">Explode</h2>
<p>Points can be exploded on mouse click by setting the <code>explode</code> property to true. You can also explode the point on load using <code>explodeIndex</code>. Explode distance can be set by using <code>explodeOffset</code> property.</p>
<div class="tabs" id="code-snippet-5">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#ohk19zy6bmx149z9q64druu3drwznnwj-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#d5xftv7er0216oucjdu3s5jom5dnk52m-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="ohk19zy6bmx149z9q64druu3drwznnwj-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="d5xftv7er0216oucjdu3s5jom5dnk52m-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-5n3s3x7xne9quuosnmlhqrw3scsw2sl4"></div>
<h2 id="smart-data-label">Smart data label</h2>
<p>It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.</p>
<div class="tabs" id="code-snippet-6">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#7ccl407flheiqq6flpnmy8g5gg2w95fx-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#imxv5fug0m255uak9xtgj3cshukb8ioy-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="7ccl407flheiqq6flpnmy8g5gg2w95fx-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccLoadedEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccResizeEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span>: <span class="kt">ClientRect</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span>: <span class="kt">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span><span class="p">,</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="imxv5fug0m255uak9xtgj3cshukb8ioy-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-xfr6r4820t4b0eruzti6djhh12ydt0tn"></div>
<h2 id="customization">Customization</h2>
<p>Individual points can be customized using the <code>pointRender</code> event.</p>
<div class="tabs" id="code-snippet-7">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vda50128qgc8tsmu0yhfzeopksmm7y6b-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#m4fcib63v7ypbho07f6v7alh88bri1f7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vda50128qgc8tsmu0yhfzeopksmm7y6b-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m4fcib63v7ypbho07f6v7alh88bri1f7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span><span class="p">,</span> <span class="nx">IAccPointRenderEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span>: <span class="kt">EmitType</span><span class="o"><</span><span class="nx">IAccPointRenderEventArgs</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccPointRenderEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span> <span class="kr">as</span> <span class="kt">string</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5"></div>
<h2 id="modes">Modes</h2>
<p>The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the <a href="https://helpej2.syncfusion.com/react/documentation/api/accumulation-chart/funnelModes"><code>funnelMode</code></a> is <code>Standard</code>.</p>
<h3 id="standard">Standard</h3>
<p>The <code>Standard</code> funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.</p>
<div class="tabs" id="code-snippet-8">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ob11ji04wbluzd08fs2uxnrlwd3u6met"></div>
<h3 id="trapezoidal">Trapezoidal</h3>
<p>The <code>Trapezoidal</code> mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.</p>
<div class="tabs" id="code-snippet-9">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#2insg80ddswec5ot9xvrwvhnr1bwn54z-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#brey6kdr1zje876mhekovlu40yw3xzha-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6tkamc4lvn2vnuobqcdiit10juppd0tv-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="2insg80ddswec5ot9xvrwvhnr1bwn54z-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="brey6kdr1zje876mhekovlu40yw3xzha-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6tkamc4lvn2vnuobqcdiit10juppd0tv-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vtph278uh3qzop0j4v4k125z9vsuarxu"></div>
<h2 id="see-also">See also</h2>
<ul>
<li><a href="./data-label">Data label</a></li>
<li><a href="./grouping">Grouping</a></li>
</ul>
>
</RibbonItemDirective>
<RibbonItemDirective type='Button' buttonSettings=<h1 id="funnel-in-react-accumulation-chart-component">Funnel in React Accumulation chart component</h1>
<p>To render a funnel series, use the series <a href="https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type"><code>type</code></a> as <code>Funnel</code> and inject the <code>FunnelSeries</code> module into the <code>services</code>.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vjt78bklohozleicis4fdo3di98m6o9e"></div>
<h2 id="size">Size</h2>
<p>The size of the funnel chart can be customized by using the <code>width</code> and <code>height</code> properties.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9ry5atnfapikoyw4gld40u0r5is48u6f-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9ry5atnfapikoyw4gld40u0r5is48u6f-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-3grs6ts2pj6oirs5890h52lo7ks2qxl3"></div>
<h2 id="neck-size">Neck size</h2>
<p>The funnel’s neck size can be customized by using the <code>neckWidth</code> and <code>neckHeight</code> properties.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#wpxb5bg8fimt59haq78estiu7k84sltz-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="wpxb5bg8fimt59haq78estiu7k84sltz-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-8z6gl4z9f41kleckf2s2vy41517044n4"></div>
<h2 id="gap-between-the-segments">Gap between the segments</h2>
<p>Funnel chart provides options to customize the space between the segments by using the <code>gapRatio</code> property of the series. It ranges from 0 to 1.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#41f8lbjc8nb3w87zx48i0c58impzdm44-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#zb89p2lt1nur2ir80fip52sxaowbca6p-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="41f8lbjc8nb3w87zx48i0c58impzdm44-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zb89p2lt1nur2ir80fip52sxaowbca6p-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-tx1igq7uty6pcpnzse3739jqu01q4hlt"></div>
<h2 id="explode">Explode</h2>
<p>Points can be exploded on mouse click by setting the <code>explode</code> property to true. You can also explode the point on load using <code>explodeIndex</code>. Explode distance can be set by using <code>explodeOffset</code> property.</p>
<div class="tabs" id="code-snippet-5">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#ohk19zy6bmx149z9q64druu3drwznnwj-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#d5xftv7er0216oucjdu3s5jom5dnk52m-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="ohk19zy6bmx149z9q64druu3drwznnwj-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="d5xftv7er0216oucjdu3s5jom5dnk52m-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-5n3s3x7xne9quuosnmlhqrw3scsw2sl4"></div>
<h2 id="smart-data-label">Smart data label</h2>
<p>It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.</p>
<div class="tabs" id="code-snippet-6">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#7ccl407flheiqq6flpnmy8g5gg2w95fx-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#imxv5fug0m255uak9xtgj3cshukb8ioy-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="7ccl407flheiqq6flpnmy8g5gg2w95fx-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccLoadedEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccResizeEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span>: <span class="kt">ClientRect</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span>: <span class="kt">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span><span class="p">,</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="imxv5fug0m255uak9xtgj3cshukb8ioy-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-xfr6r4820t4b0eruzti6djhh12ydt0tn"></div>
<h2 id="customization">Customization</h2>
<p>Individual points can be customized using the <code>pointRender</code> event.</p>
<div class="tabs" id="code-snippet-7">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vda50128qgc8tsmu0yhfzeopksmm7y6b-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#m4fcib63v7ypbho07f6v7alh88bri1f7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vda50128qgc8tsmu0yhfzeopksmm7y6b-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m4fcib63v7ypbho07f6v7alh88bri1f7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span><span class="p">,</span> <span class="nx">IAccPointRenderEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span>: <span class="kt">EmitType</span><span class="o"><</span><span class="nx">IAccPointRenderEventArgs</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccPointRenderEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span> <span class="kr">as</span> <span class="kt">string</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5"></div>
<h2 id="modes">Modes</h2>
<p>The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the <a href="https://helpej2.syncfusion.com/react/documentation/api/accumulation-chart/funnelModes"><code>funnelMode</code></a> is <code>Standard</code>.</p>
<h3 id="standard">Standard</h3>
<p>The <code>Standard</code> funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.</p>
<div class="tabs" id="code-snippet-8">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ob11ji04wbluzd08fs2uxnrlwd3u6met"></div>
<h3 id="trapezoidal">Trapezoidal</h3>
<p>The <code>Trapezoidal</code> mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.</p>
<div class="tabs" id="code-snippet-9">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#2insg80ddswec5ot9xvrwvhnr1bwn54z-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#brey6kdr1zje876mhekovlu40yw3xzha-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6tkamc4lvn2vnuobqcdiit10juppd0tv-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="2insg80ddswec5ot9xvrwvhnr1bwn54z-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="brey6kdr1zje876mhekovlu40yw3xzha-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6tkamc4lvn2vnuobqcdiit10juppd0tv-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vtph278uh3qzop0j4v4k125z9vsuarxu"></div>
<h2 id="see-also">See also</h2>
<ul>
<li><a href="./data-label">Data label</a></li>
<li><a href="./grouping">Grouping</a></li>
</ul>
>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header='Table Styles'>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type='Gallery' gallerySettings={ gallerySettingsValue }>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header='Insert'>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type='Button' buttonSettings=<h1 id="funnel-in-react-accumulation-chart-component">Funnel in React Accumulation chart component</h1>
<p>To render a funnel series, use the series <a href="https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type"><code>type</code></a> as <code>Funnel</code> and inject the <code>FunnelSeries</code> module into the <code>services</code>.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vjt78bklohozleicis4fdo3di98m6o9e"></div>
<h2 id="size">Size</h2>
<p>The size of the funnel chart can be customized by using the <code>width</code> and <code>height</code> properties.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9ry5atnfapikoyw4gld40u0r5is48u6f-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9ry5atnfapikoyw4gld40u0r5is48u6f-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-3grs6ts2pj6oirs5890h52lo7ks2qxl3"></div>
<h2 id="neck-size">Neck size</h2>
<p>The funnel’s neck size can be customized by using the <code>neckWidth</code> and <code>neckHeight</code> properties.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#wpxb5bg8fimt59haq78estiu7k84sltz-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="wpxb5bg8fimt59haq78estiu7k84sltz-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-8z6gl4z9f41kleckf2s2vy41517044n4"></div>
<h2 id="gap-between-the-segments">Gap between the segments</h2>
<p>Funnel chart provides options to customize the space between the segments by using the <code>gapRatio</code> property of the series. It ranges from 0 to 1.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#41f8lbjc8nb3w87zx48i0c58impzdm44-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#zb89p2lt1nur2ir80fip52sxaowbca6p-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="41f8lbjc8nb3w87zx48i0c58impzdm44-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zb89p2lt1nur2ir80fip52sxaowbca6p-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-tx1igq7uty6pcpnzse3739jqu01q4hlt"></div>
<h2 id="explode">Explode</h2>
<p>Points can be exploded on mouse click by setting the <code>explode</code> property to true. You can also explode the point on load using <code>explodeIndex</code>. Explode distance can be set by using <code>explodeOffset</code> property.</p>
<div class="tabs" id="code-snippet-5">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#ohk19zy6bmx149z9q64druu3drwznnwj-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#d5xftv7er0216oucjdu3s5jom5dnk52m-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="ohk19zy6bmx149z9q64druu3drwznnwj-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="d5xftv7er0216oucjdu3s5jom5dnk52m-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-5n3s3x7xne9quuosnmlhqrw3scsw2sl4"></div>
<h2 id="smart-data-label">Smart data label</h2>
<p>It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.</p>
<div class="tabs" id="code-snippet-6">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#7ccl407flheiqq6flpnmy8g5gg2w95fx-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#imxv5fug0m255uak9xtgj3cshukb8ioy-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="7ccl407flheiqq6flpnmy8g5gg2w95fx-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccLoadedEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccResizeEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span>: <span class="kt">ClientRect</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span>: <span class="kt">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span><span class="p">,</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="imxv5fug0m255uak9xtgj3cshukb8ioy-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-xfr6r4820t4b0eruzti6djhh12ydt0tn"></div>
<h2 id="customization">Customization</h2>
<p>Individual points can be customized using the <code>pointRender</code> event.</p>
<div class="tabs" id="code-snippet-7">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vda50128qgc8tsmu0yhfzeopksmm7y6b-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#m4fcib63v7ypbho07f6v7alh88bri1f7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vda50128qgc8tsmu0yhfzeopksmm7y6b-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m4fcib63v7ypbho07f6v7alh88bri1f7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span><span class="p">,</span> <span class="nx">IAccPointRenderEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span>: <span class="kt">EmitType</span><span class="o"><</span><span class="nx">IAccPointRenderEventArgs</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccPointRenderEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span> <span class="kr">as</span> <span class="kt">string</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5"></div>
<h2 id="modes">Modes</h2>
<p>The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the <a href="https://helpej2.syncfusion.com/react/documentation/api/accumulation-chart/funnelModes"><code>funnelMode</code></a> is <code>Standard</code>.</p>
<h3 id="standard">Standard</h3>
<p>The <code>Standard</code> funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.</p>
<div class="tabs" id="code-snippet-8">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ob11ji04wbluzd08fs2uxnrlwd3u6met"></div>
<h3 id="trapezoidal">Trapezoidal</h3>
<p>The <code>Trapezoidal</code> mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.</p>
<div class="tabs" id="code-snippet-9">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#2insg80ddswec5ot9xvrwvhnr1bwn54z-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#brey6kdr1zje876mhekovlu40yw3xzha-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6tkamc4lvn2vnuobqcdiit10juppd0tv-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="2insg80ddswec5ot9xvrwvhnr1bwn54z-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="brey6kdr1zje876mhekovlu40yw3xzha-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6tkamc4lvn2vnuobqcdiit10juppd0tv-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vtph278uh3qzop0j4v4k125z9vsuarxu"></div>
<h2 id="see-also">See also</h2>
<ul>
<li><a href="./data-label">Data label</a></li>
<li><a href="./grouping">Grouping</a></li>
</ul>
>
</RibbonItemDirective>
<RibbonItemDirective type='Button' buttonSettings=<h1 id="funnel-in-react-accumulation-chart-component">Funnel in React Accumulation chart component</h1>
<p>To render a funnel series, use the series <a href="https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type"><code>type</code></a> as <code>Funnel</code> and inject the <code>FunnelSeries</code> module into the <code>services</code>.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vjt78bklohozleicis4fdo3di98m6o9e"></div>
<h2 id="size">Size</h2>
<p>The size of the funnel chart can be customized by using the <code>width</code> and <code>height</code> properties.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9ry5atnfapikoyw4gld40u0r5is48u6f-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9ry5atnfapikoyw4gld40u0r5is48u6f-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-3grs6ts2pj6oirs5890h52lo7ks2qxl3"></div>
<h2 id="neck-size">Neck size</h2>
<p>The funnel’s neck size can be customized by using the <code>neckWidth</code> and <code>neckHeight</code> properties.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#wpxb5bg8fimt59haq78estiu7k84sltz-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="wpxb5bg8fimt59haq78estiu7k84sltz-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-8z6gl4z9f41kleckf2s2vy41517044n4"></div>
<h2 id="gap-between-the-segments">Gap between the segments</h2>
<p>Funnel chart provides options to customize the space between the segments by using the <code>gapRatio</code> property of the series. It ranges from 0 to 1.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#41f8lbjc8nb3w87zx48i0c58impzdm44-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#zb89p2lt1nur2ir80fip52sxaowbca6p-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="41f8lbjc8nb3w87zx48i0c58impzdm44-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zb89p2lt1nur2ir80fip52sxaowbca6p-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-tx1igq7uty6pcpnzse3739jqu01q4hlt"></div>
<h2 id="explode">Explode</h2>
<p>Points can be exploded on mouse click by setting the <code>explode</code> property to true. You can also explode the point on load using <code>explodeIndex</code>. Explode distance can be set by using <code>explodeOffset</code> property.</p>
<div class="tabs" id="code-snippet-5">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#ohk19zy6bmx149z9q64druu3drwznnwj-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#d5xftv7er0216oucjdu3s5jom5dnk52m-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="ohk19zy6bmx149z9q64druu3drwznnwj-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="d5xftv7er0216oucjdu3s5jom5dnk52m-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-5n3s3x7xne9quuosnmlhqrw3scsw2sl4"></div>
<h2 id="smart-data-label">Smart data label</h2>
<p>It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.</p>
<div class="tabs" id="code-snippet-6">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#7ccl407flheiqq6flpnmy8g5gg2w95fx-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#imxv5fug0m255uak9xtgj3cshukb8ioy-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="7ccl407flheiqq6flpnmy8g5gg2w95fx-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccLoadedEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccResizeEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span>: <span class="kt">ClientRect</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span>: <span class="kt">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span><span class="p">,</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="imxv5fug0m255uak9xtgj3cshukb8ioy-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-xfr6r4820t4b0eruzti6djhh12ydt0tn"></div>
<h2 id="customization">Customization</h2>
<p>Individual points can be customized using the <code>pointRender</code> event.</p>
<div class="tabs" id="code-snippet-7">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vda50128qgc8tsmu0yhfzeopksmm7y6b-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#m4fcib63v7ypbho07f6v7alh88bri1f7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vda50128qgc8tsmu0yhfzeopksmm7y6b-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m4fcib63v7ypbho07f6v7alh88bri1f7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span><span class="p">,</span> <span class="nx">IAccPointRenderEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span>: <span class="kt">EmitType</span><span class="o"><</span><span class="nx">IAccPointRenderEventArgs</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccPointRenderEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span> <span class="kr">as</span> <span class="kt">string</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5"></div>
<h2 id="modes">Modes</h2>
<p>The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the <a href="https://helpej2.syncfusion.com/react/documentation/api/accumulation-chart/funnelModes"><code>funnelMode</code></a> is <code>Standard</code>.</p>
<h3 id="standard">Standard</h3>
<p>The <code>Standard</code> funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.</p>
<div class="tabs" id="code-snippet-8">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ob11ji04wbluzd08fs2uxnrlwd3u6met"></div>
<h3 id="trapezoidal">Trapezoidal</h3>
<p>The <code>Trapezoidal</code> mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.</p>
<div class="tabs" id="code-snippet-9">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#2insg80ddswec5ot9xvrwvhnr1bwn54z-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#brey6kdr1zje876mhekovlu40yw3xzha-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6tkamc4lvn2vnuobqcdiit10juppd0tv-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="2insg80ddswec5ot9xvrwvhnr1bwn54z-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="brey6kdr1zje876mhekovlu40yw3xzha-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6tkamc4lvn2vnuobqcdiit10juppd0tv-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vtph278uh3qzop0j4v4k125z9vsuarxu"></div>
<h2 id="see-also">See also</h2>
<ul>
<li><a href="./data-label">Data label</a></li>
<li><a href="./grouping">Grouping</a></li>
</ul>
>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type='Button' buttonSettings=<h1 id="funnel-in-react-accumulation-chart-component">Funnel in React Accumulation chart component</h1>
<p>To render a funnel series, use the series <a href="https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type"><code>type</code></a> as <code>Funnel</code> and inject the <code>FunnelSeries</code> module into the <code>services</code>.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vjt78bklohozleicis4fdo3di98m6o9e"></div>
<h2 id="size">Size</h2>
<p>The size of the funnel chart can be customized by using the <code>width</code> and <code>height</code> properties.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9ry5atnfapikoyw4gld40u0r5is48u6f-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9ry5atnfapikoyw4gld40u0r5is48u6f-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-3grs6ts2pj6oirs5890h52lo7ks2qxl3"></div>
<h2 id="neck-size">Neck size</h2>
<p>The funnel’s neck size can be customized by using the <code>neckWidth</code> and <code>neckHeight</code> properties.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#wpxb5bg8fimt59haq78estiu7k84sltz-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="wpxb5bg8fimt59haq78estiu7k84sltz-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-8z6gl4z9f41kleckf2s2vy41517044n4"></div>
<h2 id="gap-between-the-segments">Gap between the segments</h2>
<p>Funnel chart provides options to customize the space between the segments by using the <code>gapRatio</code> property of the series. It ranges from 0 to 1.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#41f8lbjc8nb3w87zx48i0c58impzdm44-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#zb89p2lt1nur2ir80fip52sxaowbca6p-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="41f8lbjc8nb3w87zx48i0c58impzdm44-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zb89p2lt1nur2ir80fip52sxaowbca6p-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-tx1igq7uty6pcpnzse3739jqu01q4hlt"></div>
<h2 id="explode">Explode</h2>
<p>Points can be exploded on mouse click by setting the <code>explode</code> property to true. You can also explode the point on load using <code>explodeIndex</code>. Explode distance can be set by using <code>explodeOffset</code> property.</p>
<div class="tabs" id="code-snippet-5">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#ohk19zy6bmx149z9q64druu3drwznnwj-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#d5xftv7er0216oucjdu3s5jom5dnk52m-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="ohk19zy6bmx149z9q64druu3drwznnwj-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="d5xftv7er0216oucjdu3s5jom5dnk52m-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-5n3s3x7xne9quuosnmlhqrw3scsw2sl4"></div>
<h2 id="smart-data-label">Smart data label</h2>
<p>It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.</p>
<div class="tabs" id="code-snippet-6">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#7ccl407flheiqq6flpnmy8g5gg2w95fx-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#imxv5fug0m255uak9xtgj3cshukb8ioy-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="7ccl407flheiqq6flpnmy8g5gg2w95fx-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccLoadedEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccResizeEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span>: <span class="kt">ClientRect</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span>: <span class="kt">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span><span class="p">,</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="imxv5fug0m255uak9xtgj3cshukb8ioy-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-xfr6r4820t4b0eruzti6djhh12ydt0tn"></div>
<h2 id="customization">Customization</h2>
<p>Individual points can be customized using the <code>pointRender</code> event.</p>
<div class="tabs" id="code-snippet-7">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vda50128qgc8tsmu0yhfzeopksmm7y6b-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#m4fcib63v7ypbho07f6v7alh88bri1f7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vda50128qgc8tsmu0yhfzeopksmm7y6b-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m4fcib63v7ypbho07f6v7alh88bri1f7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span><span class="p">,</span> <span class="nx">IAccPointRenderEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span>: <span class="kt">EmitType</span><span class="o"><</span><span class="nx">IAccPointRenderEventArgs</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccPointRenderEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span> <span class="kr">as</span> <span class="kt">string</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5"></div>
<h2 id="modes">Modes</h2>
<p>The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the <a href="https://helpej2.syncfusion.com/react/documentation/api/accumulation-chart/funnelModes"><code>funnelMode</code></a> is <code>Standard</code>.</p>
<h3 id="standard">Standard</h3>
<p>The <code>Standard</code> funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.</p>
<div class="tabs" id="code-snippet-8">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ob11ji04wbluzd08fs2uxnrlwd3u6met"></div>
<h3 id="trapezoidal">Trapezoidal</h3>
<p>The <code>Trapezoidal</code> mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.</p>
<div class="tabs" id="code-snippet-9">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#2insg80ddswec5ot9xvrwvhnr1bwn54z-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#brey6kdr1zje876mhekovlu40yw3xzha-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6tkamc4lvn2vnuobqcdiit10juppd0tv-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="2insg80ddswec5ot9xvrwvhnr1bwn54z-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="brey6kdr1zje876mhekovlu40yw3xzha-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6tkamc4lvn2vnuobqcdiit10juppd0tv-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vtph278uh3qzop0j4v4k125z9vsuarxu"></div>
<h2 id="see-also">See also</h2>
<ul>
<li><a href="./data-label">Data label</a></li>
<li><a href="./grouping">Grouping</a></li>
</ul>
>
</RibbonItemDirective>
<RibbonItemDirective type='Button' buttonSettings=<h1 id="funnel-in-react-accumulation-chart-component">Funnel in React Accumulation chart component</h1>
<p>To render a funnel series, use the series <a href="https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type"><code>type</code></a> as <code>Funnel</code> and inject the <code>FunnelSeries</code> module into the <code>services</code>.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vjt78bklohozleicis4fdo3di98m6o9e"></div>
<h2 id="size">Size</h2>
<p>The size of the funnel chart can be customized by using the <code>width</code> and <code>height</code> properties.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9ry5atnfapikoyw4gld40u0r5is48u6f-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9ry5atnfapikoyw4gld40u0r5is48u6f-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-3grs6ts2pj6oirs5890h52lo7ks2qxl3"></div>
<h2 id="neck-size">Neck size</h2>
<p>The funnel’s neck size can be customized by using the <code>neckWidth</code> and <code>neckHeight</code> properties.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#wpxb5bg8fimt59haq78estiu7k84sltz-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="wpxb5bg8fimt59haq78estiu7k84sltz-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-8z6gl4z9f41kleckf2s2vy41517044n4"></div>
<h2 id="gap-between-the-segments">Gap between the segments</h2>
<p>Funnel chart provides options to customize the space between the segments by using the <code>gapRatio</code> property of the series. It ranges from 0 to 1.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#41f8lbjc8nb3w87zx48i0c58impzdm44-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#zb89p2lt1nur2ir80fip52sxaowbca6p-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="41f8lbjc8nb3w87zx48i0c58impzdm44-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zb89p2lt1nur2ir80fip52sxaowbca6p-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-tx1igq7uty6pcpnzse3739jqu01q4hlt"></div>
<h2 id="explode">Explode</h2>
<p>Points can be exploded on mouse click by setting the <code>explode</code> property to true. You can also explode the point on load using <code>explodeIndex</code>. Explode distance can be set by using <code>explodeOffset</code> property.</p>
<div class="tabs" id="code-snippet-5">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#ohk19zy6bmx149z9q64druu3drwznnwj-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#d5xftv7er0216oucjdu3s5jom5dnk52m-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="ohk19zy6bmx149z9q64druu3drwznnwj-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="d5xftv7er0216oucjdu3s5jom5dnk52m-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-5n3s3x7xne9quuosnmlhqrw3scsw2sl4"></div>
<h2 id="smart-data-label">Smart data label</h2>
<p>It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.</p>
<div class="tabs" id="code-snippet-6">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#7ccl407flheiqq6flpnmy8g5gg2w95fx-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#imxv5fug0m255uak9xtgj3cshukb8ioy-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="7ccl407flheiqq6flpnmy8g5gg2w95fx-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccLoadedEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccResizeEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span>: <span class="kt">ClientRect</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span>: <span class="kt">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span><span class="p">,</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="imxv5fug0m255uak9xtgj3cshukb8ioy-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-xfr6r4820t4b0eruzti6djhh12ydt0tn"></div>
<h2 id="customization">Customization</h2>
<p>Individual points can be customized using the <code>pointRender</code> event.</p>
<div class="tabs" id="code-snippet-7">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vda50128qgc8tsmu0yhfzeopksmm7y6b-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#m4fcib63v7ypbho07f6v7alh88bri1f7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vda50128qgc8tsmu0yhfzeopksmm7y6b-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m4fcib63v7ypbho07f6v7alh88bri1f7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span><span class="p">,</span> <span class="nx">IAccPointRenderEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span>: <span class="kt">EmitType</span><span class="o"><</span><span class="nx">IAccPointRenderEventArgs</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccPointRenderEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span> <span class="kr">as</span> <span class="kt">string</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5"></div>
<h2 id="modes">Modes</h2>
<p>The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the <a href="https://helpej2.syncfusion.com/react/documentation/api/accumulation-chart/funnelModes"><code>funnelMode</code></a> is <code>Standard</code>.</p>
<h3 id="standard">Standard</h3>
<p>The <code>Standard</code> funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.</p>
<div class="tabs" id="code-snippet-8">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ob11ji04wbluzd08fs2uxnrlwd3u6met"></div>
<h3 id="trapezoidal">Trapezoidal</h3>
<p>The <code>Trapezoidal</code> mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.</p>
<div class="tabs" id="code-snippet-9">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#2insg80ddswec5ot9xvrwvhnr1bwn54z-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#brey6kdr1zje876mhekovlu40yw3xzha-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6tkamc4lvn2vnuobqcdiit10juppd0tv-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="2insg80ddswec5ot9xvrwvhnr1bwn54z-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="brey6kdr1zje876mhekovlu40yw3xzha-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6tkamc4lvn2vnuobqcdiit10juppd0tv-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vtph278uh3qzop0j4v4k125z9vsuarxu"></div>
<h2 id="see-also">See also</h2>
<ul>
<li><a href="./data-label">Data label</a></li>
<li><a href="./grouping">Grouping</a></li>
</ul>
>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[ RibbonGallery ]} />
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonGallery, Inject } from '@syncfusion/ej2-react-ribbon';
function App() {
function galleryTemplate(items: any){
return <div className={`gallery-template ${items.cssClass}`}>
<table className="table">
<tbody>
<tr className="row_one">
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
</tr>
<tr className="row_two">
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
</tr>
<tr className="row_three">
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
<td className="tableContent">—</td>
</tr>
</tbody>
</table>
</div>;
}
const gallerySettingsValue = ({
template: galleryTemplate,
popupTemplate: galleryTemplate,
itemCount: 7,
groups: [{
header: 'Plain Tables',
items: [
{
cssClass: "plainTables_item_1"
},
{
cssClass: "plainTables_item_2"
},
{
cssClass: "plainTables_item_3"
},
{
cssClass: "plainTables_item_4"
},
{
cssClass: "plainTables_item_5"
},
{
cssClass: "plainTables_item_6"
},
{
cssClass: "plainTables_item_7"
}
]
}, {
header: 'List Tables',
items: [
{
cssClass: "listTables_item_1"
},
{
cssClass: "listTables_item_2"
},
{
cssClass: "listTables_item_3"
},
{
cssClass: "listTables_item_4"
},
{
cssClass: "listTables_item_5"
},
{
cssClass: "listTables_item_6"
},
{
cssClass: "listTables_item_7"
}
]
}]
});
const splitButtonSettingsProps = ({
iconCss: 'e-icons e-paste',
items: [
{ text: 'Keep Source Format' },
{ text: 'Merge Format' },
{ text: 'Keep Text Only' }
],
content: 'Paste'
});
return (
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header='Clipboard' groupIconCss='e-icons e-paste'>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type='SplitButton' splitButtonSettings={splitButtonSettingsProps}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type='Button' buttonSettings=<h1 id="funnel-in-react-accumulation-chart-component">Funnel in React Accumulation chart component</h1>
<p>To render a funnel series, use the series <a href="https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type"><code>type</code></a> as <code>Funnel</code> and inject the <code>FunnelSeries</code> module into the <code>services</code>.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vjt78bklohozleicis4fdo3di98m6o9e"></div>
<h2 id="size">Size</h2>
<p>The size of the funnel chart can be customized by using the <code>width</code> and <code>height</code> properties.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9ry5atnfapikoyw4gld40u0r5is48u6f-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9ry5atnfapikoyw4gld40u0r5is48u6f-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-3grs6ts2pj6oirs5890h52lo7ks2qxl3"></div>
<h2 id="neck-size">Neck size</h2>
<p>The funnel’s neck size can be customized by using the <code>neckWidth</code> and <code>neckHeight</code> properties.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#wpxb5bg8fimt59haq78estiu7k84sltz-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="wpxb5bg8fimt59haq78estiu7k84sltz-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-8z6gl4z9f41kleckf2s2vy41517044n4"></div>
<h2 id="gap-between-the-segments">Gap between the segments</h2>
<p>Funnel chart provides options to customize the space between the segments by using the <code>gapRatio</code> property of the series. It ranges from 0 to 1.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#41f8lbjc8nb3w87zx48i0c58impzdm44-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#zb89p2lt1nur2ir80fip52sxaowbca6p-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="41f8lbjc8nb3w87zx48i0c58impzdm44-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zb89p2lt1nur2ir80fip52sxaowbca6p-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-tx1igq7uty6pcpnzse3739jqu01q4hlt"></div>
<h2 id="explode">Explode</h2>
<p>Points can be exploded on mouse click by setting the <code>explode</code> property to true. You can also explode the point on load using <code>explodeIndex</code>. Explode distance can be set by using <code>explodeOffset</code> property.</p>
<div class="tabs" id="code-snippet-5">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#ohk19zy6bmx149z9q64druu3drwznnwj-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#d5xftv7er0216oucjdu3s5jom5dnk52m-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="ohk19zy6bmx149z9q64druu3drwznnwj-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="d5xftv7er0216oucjdu3s5jom5dnk52m-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-5n3s3x7xne9quuosnmlhqrw3scsw2sl4"></div>
<h2 id="smart-data-label">Smart data label</h2>
<p>It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.</p>
<div class="tabs" id="code-snippet-6">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#7ccl407flheiqq6flpnmy8g5gg2w95fx-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#imxv5fug0m255uak9xtgj3cshukb8ioy-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="7ccl407flheiqq6flpnmy8g5gg2w95fx-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccLoadedEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccResizeEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span>: <span class="kt">ClientRect</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span>: <span class="kt">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span><span class="p">,</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="imxv5fug0m255uak9xtgj3cshukb8ioy-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-xfr6r4820t4b0eruzti6djhh12ydt0tn"></div>
<h2 id="customization">Customization</h2>
<p>Individual points can be customized using the <code>pointRender</code> event.</p>
<div class="tabs" id="code-snippet-7">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vda50128qgc8tsmu0yhfzeopksmm7y6b-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#m4fcib63v7ypbho07f6v7alh88bri1f7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vda50128qgc8tsmu0yhfzeopksmm7y6b-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m4fcib63v7ypbho07f6v7alh88bri1f7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span><span class="p">,</span> <span class="nx">IAccPointRenderEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span>: <span class="kt">EmitType</span><span class="o"><</span><span class="nx">IAccPointRenderEventArgs</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccPointRenderEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span> <span class="kr">as</span> <span class="kt">string</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5"></div>
<h2 id="modes">Modes</h2>
<p>The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the <a href="https://helpej2.syncfusion.com/react/documentation/api/accumulation-chart/funnelModes"><code>funnelMode</code></a> is <code>Standard</code>.</p>
<h3 id="standard">Standard</h3>
<p>The <code>Standard</code> funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.</p>
<div class="tabs" id="code-snippet-8">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ob11ji04wbluzd08fs2uxnrlwd3u6met"></div>
<h3 id="trapezoidal">Trapezoidal</h3>
<p>The <code>Trapezoidal</code> mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.</p>
<div class="tabs" id="code-snippet-9">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#2insg80ddswec5ot9xvrwvhnr1bwn54z-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#brey6kdr1zje876mhekovlu40yw3xzha-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6tkamc4lvn2vnuobqcdiit10juppd0tv-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="2insg80ddswec5ot9xvrwvhnr1bwn54z-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="brey6kdr1zje876mhekovlu40yw3xzha-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6tkamc4lvn2vnuobqcdiit10juppd0tv-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vtph278uh3qzop0j4v4k125z9vsuarxu"></div>
<h2 id="see-also">See also</h2>
<ul>
<li><a href="./data-label">Data label</a></li>
<li><a href="./grouping">Grouping</a></li>
</ul>
>
</RibbonItemDirective>
<RibbonItemDirective type='Button' buttonSettings=<h1 id="funnel-in-react-accumulation-chart-component">Funnel in React Accumulation chart component</h1>
<p>To render a funnel series, use the series <a href="https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type"><code>type</code></a> as <code>Funnel</code> and inject the <code>FunnelSeries</code> module into the <code>services</code>.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vjt78bklohozleicis4fdo3di98m6o9e"></div>
<h2 id="size">Size</h2>
<p>The size of the funnel chart can be customized by using the <code>width</code> and <code>height</code> properties.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9ry5atnfapikoyw4gld40u0r5is48u6f-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9ry5atnfapikoyw4gld40u0r5is48u6f-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-3grs6ts2pj6oirs5890h52lo7ks2qxl3"></div>
<h2 id="neck-size">Neck size</h2>
<p>The funnel’s neck size can be customized by using the <code>neckWidth</code> and <code>neckHeight</code> properties.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#wpxb5bg8fimt59haq78estiu7k84sltz-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="wpxb5bg8fimt59haq78estiu7k84sltz-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-8z6gl4z9f41kleckf2s2vy41517044n4"></div>
<h2 id="gap-between-the-segments">Gap between the segments</h2>
<p>Funnel chart provides options to customize the space between the segments by using the <code>gapRatio</code> property of the series. It ranges from 0 to 1.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#41f8lbjc8nb3w87zx48i0c58impzdm44-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#zb89p2lt1nur2ir80fip52sxaowbca6p-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="41f8lbjc8nb3w87zx48i0c58impzdm44-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zb89p2lt1nur2ir80fip52sxaowbca6p-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-tx1igq7uty6pcpnzse3739jqu01q4hlt"></div>
<h2 id="explode">Explode</h2>
<p>Points can be exploded on mouse click by setting the <code>explode</code> property to true. You can also explode the point on load using <code>explodeIndex</code>. Explode distance can be set by using <code>explodeOffset</code> property.</p>
<div class="tabs" id="code-snippet-5">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#ohk19zy6bmx149z9q64druu3drwznnwj-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#d5xftv7er0216oucjdu3s5jom5dnk52m-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="ohk19zy6bmx149z9q64druu3drwznnwj-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="d5xftv7er0216oucjdu3s5jom5dnk52m-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-5n3s3x7xne9quuosnmlhqrw3scsw2sl4"></div>
<h2 id="smart-data-label">Smart data label</h2>
<p>It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.</p>
<div class="tabs" id="code-snippet-6">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#7ccl407flheiqq6flpnmy8g5gg2w95fx-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#imxv5fug0m255uak9xtgj3cshukb8ioy-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="7ccl407flheiqq6flpnmy8g5gg2w95fx-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccLoadedEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccResizeEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span>: <span class="kt">ClientRect</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span>: <span class="kt">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span><span class="p">,</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="imxv5fug0m255uak9xtgj3cshukb8ioy-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-xfr6r4820t4b0eruzti6djhh12ydt0tn"></div>
<h2 id="customization">Customization</h2>
<p>Individual points can be customized using the <code>pointRender</code> event.</p>
<div class="tabs" id="code-snippet-7">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vda50128qgc8tsmu0yhfzeopksmm7y6b-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#m4fcib63v7ypbho07f6v7alh88bri1f7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vda50128qgc8tsmu0yhfzeopksmm7y6b-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m4fcib63v7ypbho07f6v7alh88bri1f7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span><span class="p">,</span> <span class="nx">IAccPointRenderEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span>: <span class="kt">EmitType</span><span class="o"><</span><span class="nx">IAccPointRenderEventArgs</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccPointRenderEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span> <span class="kr">as</span> <span class="kt">string</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5"></div>
<h2 id="modes">Modes</h2>
<p>The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the <a href="https://helpej2.syncfusion.com/react/documentation/api/accumulation-chart/funnelModes"><code>funnelMode</code></a> is <code>Standard</code>.</p>
<h3 id="standard">Standard</h3>
<p>The <code>Standard</code> funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.</p>
<div class="tabs" id="code-snippet-8">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ob11ji04wbluzd08fs2uxnrlwd3u6met"></div>
<h3 id="trapezoidal">Trapezoidal</h3>
<p>The <code>Trapezoidal</code> mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.</p>
<div class="tabs" id="code-snippet-9">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#2insg80ddswec5ot9xvrwvhnr1bwn54z-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#brey6kdr1zje876mhekovlu40yw3xzha-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6tkamc4lvn2vnuobqcdiit10juppd0tv-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="2insg80ddswec5ot9xvrwvhnr1bwn54z-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="brey6kdr1zje876mhekovlu40yw3xzha-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6tkamc4lvn2vnuobqcdiit10juppd0tv-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vtph278uh3qzop0j4v4k125z9vsuarxu"></div>
<h2 id="see-also">See also</h2>
<ul>
<li><a href="./data-label">Data label</a></li>
<li><a href="./grouping">Grouping</a></li>
</ul>
>
</RibbonItemDirective>
<RibbonItemDirective type='Button' buttonSettings=<h1 id="funnel-in-react-accumulation-chart-component">Funnel in React Accumulation chart component</h1>
<p>To render a funnel series, use the series <a href="https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type"><code>type</code></a> as <code>Funnel</code> and inject the <code>FunnelSeries</code> module into the <code>services</code>.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vjt78bklohozleicis4fdo3di98m6o9e"></div>
<h2 id="size">Size</h2>
<p>The size of the funnel chart can be customized by using the <code>width</code> and <code>height</code> properties.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9ry5atnfapikoyw4gld40u0r5is48u6f-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9ry5atnfapikoyw4gld40u0r5is48u6f-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-3grs6ts2pj6oirs5890h52lo7ks2qxl3"></div>
<h2 id="neck-size">Neck size</h2>
<p>The funnel’s neck size can be customized by using the <code>neckWidth</code> and <code>neckHeight</code> properties.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#wpxb5bg8fimt59haq78estiu7k84sltz-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="wpxb5bg8fimt59haq78estiu7k84sltz-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-8z6gl4z9f41kleckf2s2vy41517044n4"></div>
<h2 id="gap-between-the-segments">Gap between the segments</h2>
<p>Funnel chart provides options to customize the space between the segments by using the <code>gapRatio</code> property of the series. It ranges from 0 to 1.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#41f8lbjc8nb3w87zx48i0c58impzdm44-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#zb89p2lt1nur2ir80fip52sxaowbca6p-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="41f8lbjc8nb3w87zx48i0c58impzdm44-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zb89p2lt1nur2ir80fip52sxaowbca6p-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-tx1igq7uty6pcpnzse3739jqu01q4hlt"></div>
<h2 id="explode">Explode</h2>
<p>Points can be exploded on mouse click by setting the <code>explode</code> property to true. You can also explode the point on load using <code>explodeIndex</code>. Explode distance can be set by using <code>explodeOffset</code> property.</p>
<div class="tabs" id="code-snippet-5">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#ohk19zy6bmx149z9q64druu3drwznnwj-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#d5xftv7er0216oucjdu3s5jom5dnk52m-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="ohk19zy6bmx149z9q64druu3drwznnwj-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="d5xftv7er0216oucjdu3s5jom5dnk52m-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-5n3s3x7xne9quuosnmlhqrw3scsw2sl4"></div>
<h2 id="smart-data-label">Smart data label</h2>
<p>It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.</p>
<div class="tabs" id="code-snippet-6">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#7ccl407flheiqq6flpnmy8g5gg2w95fx-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#imxv5fug0m255uak9xtgj3cshukb8ioy-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="7ccl407flheiqq6flpnmy8g5gg2w95fx-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccLoadedEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccResizeEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span>: <span class="kt">ClientRect</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span>: <span class="kt">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span><span class="p">,</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="imxv5fug0m255uak9xtgj3cshukb8ioy-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-xfr6r4820t4b0eruzti6djhh12ydt0tn"></div>
<h2 id="customization">Customization</h2>
<p>Individual points can be customized using the <code>pointRender</code> event.</p>
<div class="tabs" id="code-snippet-7">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vda50128qgc8tsmu0yhfzeopksmm7y6b-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#m4fcib63v7ypbho07f6v7alh88bri1f7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vda50128qgc8tsmu0yhfzeopksmm7y6b-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m4fcib63v7ypbho07f6v7alh88bri1f7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span><span class="p">,</span> <span class="nx">IAccPointRenderEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span>: <span class="kt">EmitType</span><span class="o"><</span><span class="nx">IAccPointRenderEventArgs</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccPointRenderEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span> <span class="kr">as</span> <span class="kt">string</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5"></div>
<h2 id="modes">Modes</h2>
<p>The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the <a href="https://helpej2.syncfusion.com/react/documentation/api/accumulation-chart/funnelModes"><code>funnelMode</code></a> is <code>Standard</code>.</p>
<h3 id="standard">Standard</h3>
<p>The <code>Standard</code> funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.</p>
<div class="tabs" id="code-snippet-8">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ob11ji04wbluzd08fs2uxnrlwd3u6met"></div>
<h3 id="trapezoidal">Trapezoidal</h3>
<p>The <code>Trapezoidal</code> mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.</p>
<div class="tabs" id="code-snippet-9">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#2insg80ddswec5ot9xvrwvhnr1bwn54z-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#brey6kdr1zje876mhekovlu40yw3xzha-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6tkamc4lvn2vnuobqcdiit10juppd0tv-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="2insg80ddswec5ot9xvrwvhnr1bwn54z-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="brey6kdr1zje876mhekovlu40yw3xzha-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6tkamc4lvn2vnuobqcdiit10juppd0tv-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vtph278uh3qzop0j4v4k125z9vsuarxu"></div>
<h2 id="see-also">See also</h2>
<ul>
<li><a href="./data-label">Data label</a></li>
<li><a href="./grouping">Grouping</a></li>
</ul>
>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header='Table Styles'>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type='Gallery' gallerySettings={ gallerySettingsValue }>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header='Insert'>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type='Button' buttonSettings=<h1 id="funnel-in-react-accumulation-chart-component">Funnel in React Accumulation chart component</h1>
<p>To render a funnel series, use the series <a href="https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type"><code>type</code></a> as <code>Funnel</code> and inject the <code>FunnelSeries</code> module into the <code>services</code>.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vjt78bklohozleicis4fdo3di98m6o9e"></div>
<h2 id="size">Size</h2>
<p>The size of the funnel chart can be customized by using the <code>width</code> and <code>height</code> properties.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9ry5atnfapikoyw4gld40u0r5is48u6f-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9ry5atnfapikoyw4gld40u0r5is48u6f-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-3grs6ts2pj6oirs5890h52lo7ks2qxl3"></div>
<h2 id="neck-size">Neck size</h2>
<p>The funnel’s neck size can be customized by using the <code>neckWidth</code> and <code>neckHeight</code> properties.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#wpxb5bg8fimt59haq78estiu7k84sltz-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="wpxb5bg8fimt59haq78estiu7k84sltz-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-8z6gl4z9f41kleckf2s2vy41517044n4"></div>
<h2 id="gap-between-the-segments">Gap between the segments</h2>
<p>Funnel chart provides options to customize the space between the segments by using the <code>gapRatio</code> property of the series. It ranges from 0 to 1.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#41f8lbjc8nb3w87zx48i0c58impzdm44-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#zb89p2lt1nur2ir80fip52sxaowbca6p-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="41f8lbjc8nb3w87zx48i0c58impzdm44-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zb89p2lt1nur2ir80fip52sxaowbca6p-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-tx1igq7uty6pcpnzse3739jqu01q4hlt"></div>
<h2 id="explode">Explode</h2>
<p>Points can be exploded on mouse click by setting the <code>explode</code> property to true. You can also explode the point on load using <code>explodeIndex</code>. Explode distance can be set by using <code>explodeOffset</code> property.</p>
<div class="tabs" id="code-snippet-5">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#ohk19zy6bmx149z9q64druu3drwznnwj-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#d5xftv7er0216oucjdu3s5jom5dnk52m-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="ohk19zy6bmx149z9q64druu3drwznnwj-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="d5xftv7er0216oucjdu3s5jom5dnk52m-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-5n3s3x7xne9quuosnmlhqrw3scsw2sl4"></div>
<h2 id="smart-data-label">Smart data label</h2>
<p>It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.</p>
<div class="tabs" id="code-snippet-6">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#7ccl407flheiqq6flpnmy8g5gg2w95fx-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#imxv5fug0m255uak9xtgj3cshukb8ioy-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="7ccl407flheiqq6flpnmy8g5gg2w95fx-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccLoadedEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccResizeEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span>: <span class="kt">ClientRect</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span>: <span class="kt">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span><span class="p">,</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="imxv5fug0m255uak9xtgj3cshukb8ioy-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-xfr6r4820t4b0eruzti6djhh12ydt0tn"></div>
<h2 id="customization">Customization</h2>
<p>Individual points can be customized using the <code>pointRender</code> event.</p>
<div class="tabs" id="code-snippet-7">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vda50128qgc8tsmu0yhfzeopksmm7y6b-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#m4fcib63v7ypbho07f6v7alh88bri1f7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vda50128qgc8tsmu0yhfzeopksmm7y6b-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m4fcib63v7ypbho07f6v7alh88bri1f7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span><span class="p">,</span> <span class="nx">IAccPointRenderEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span>: <span class="kt">EmitType</span><span class="o"><</span><span class="nx">IAccPointRenderEventArgs</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccPointRenderEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span> <span class="kr">as</span> <span class="kt">string</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5"></div>
<h2 id="modes">Modes</h2>
<p>The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the <a href="https://helpej2.syncfusion.com/react/documentation/api/accumulation-chart/funnelModes"><code>funnelMode</code></a> is <code>Standard</code>.</p>
<h3 id="standard">Standard</h3>
<p>The <code>Standard</code> funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.</p>
<div class="tabs" id="code-snippet-8">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ob11ji04wbluzd08fs2uxnrlwd3u6met"></div>
<h3 id="trapezoidal">Trapezoidal</h3>
<p>The <code>Trapezoidal</code> mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.</p>
<div class="tabs" id="code-snippet-9">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#2insg80ddswec5ot9xvrwvhnr1bwn54z-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#brey6kdr1zje876mhekovlu40yw3xzha-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6tkamc4lvn2vnuobqcdiit10juppd0tv-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="2insg80ddswec5ot9xvrwvhnr1bwn54z-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="brey6kdr1zje876mhekovlu40yw3xzha-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6tkamc4lvn2vnuobqcdiit10juppd0tv-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vtph278uh3qzop0j4v4k125z9vsuarxu"></div>
<h2 id="see-also">See also</h2>
<ul>
<li><a href="./data-label">Data label</a></li>
<li><a href="./grouping">Grouping</a></li>
</ul>
>
</RibbonItemDirective>
<RibbonItemDirective type='Button' buttonSettings=<h1 id="funnel-in-react-accumulation-chart-component">Funnel in React Accumulation chart component</h1>
<p>To render a funnel series, use the series <a href="https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type"><code>type</code></a> as <code>Funnel</code> and inject the <code>FunnelSeries</code> module into the <code>services</code>.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vjt78bklohozleicis4fdo3di98m6o9e"></div>
<h2 id="size">Size</h2>
<p>The size of the funnel chart can be customized by using the <code>width</code> and <code>height</code> properties.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9ry5atnfapikoyw4gld40u0r5is48u6f-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9ry5atnfapikoyw4gld40u0r5is48u6f-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-3grs6ts2pj6oirs5890h52lo7ks2qxl3"></div>
<h2 id="neck-size">Neck size</h2>
<p>The funnel’s neck size can be customized by using the <code>neckWidth</code> and <code>neckHeight</code> properties.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#wpxb5bg8fimt59haq78estiu7k84sltz-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="wpxb5bg8fimt59haq78estiu7k84sltz-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-8z6gl4z9f41kleckf2s2vy41517044n4"></div>
<h2 id="gap-between-the-segments">Gap between the segments</h2>
<p>Funnel chart provides options to customize the space between the segments by using the <code>gapRatio</code> property of the series. It ranges from 0 to 1.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#41f8lbjc8nb3w87zx48i0c58impzdm44-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#zb89p2lt1nur2ir80fip52sxaowbca6p-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="41f8lbjc8nb3w87zx48i0c58impzdm44-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zb89p2lt1nur2ir80fip52sxaowbca6p-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-tx1igq7uty6pcpnzse3739jqu01q4hlt"></div>
<h2 id="explode">Explode</h2>
<p>Points can be exploded on mouse click by setting the <code>explode</code> property to true. You can also explode the point on load using <code>explodeIndex</code>. Explode distance can be set by using <code>explodeOffset</code> property.</p>
<div class="tabs" id="code-snippet-5">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#ohk19zy6bmx149z9q64druu3drwznnwj-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#d5xftv7er0216oucjdu3s5jom5dnk52m-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="ohk19zy6bmx149z9q64druu3drwznnwj-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="d5xftv7er0216oucjdu3s5jom5dnk52m-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-5n3s3x7xne9quuosnmlhqrw3scsw2sl4"></div>
<h2 id="smart-data-label">Smart data label</h2>
<p>It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.</p>
<div class="tabs" id="code-snippet-6">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#7ccl407flheiqq6flpnmy8g5gg2w95fx-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#imxv5fug0m255uak9xtgj3cshukb8ioy-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="7ccl407flheiqq6flpnmy8g5gg2w95fx-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccLoadedEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccResizeEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span>: <span class="kt">ClientRect</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span>: <span class="kt">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span><span class="p">,</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="imxv5fug0m255uak9xtgj3cshukb8ioy-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-xfr6r4820t4b0eruzti6djhh12ydt0tn"></div>
<h2 id="customization">Customization</h2>
<p>Individual points can be customized using the <code>pointRender</code> event.</p>
<div class="tabs" id="code-snippet-7">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vda50128qgc8tsmu0yhfzeopksmm7y6b-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#m4fcib63v7ypbho07f6v7alh88bri1f7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vda50128qgc8tsmu0yhfzeopksmm7y6b-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m4fcib63v7ypbho07f6v7alh88bri1f7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span><span class="p">,</span> <span class="nx">IAccPointRenderEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span>: <span class="kt">EmitType</span><span class="o"><</span><span class="nx">IAccPointRenderEventArgs</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccPointRenderEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span> <span class="kr">as</span> <span class="kt">string</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5"></div>
<h2 id="modes">Modes</h2>
<p>The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the <a href="https://helpej2.syncfusion.com/react/documentation/api/accumulation-chart/funnelModes"><code>funnelMode</code></a> is <code>Standard</code>.</p>
<h3 id="standard">Standard</h3>
<p>The <code>Standard</code> funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.</p>
<div class="tabs" id="code-snippet-8">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ob11ji04wbluzd08fs2uxnrlwd3u6met"></div>
<h3 id="trapezoidal">Trapezoidal</h3>
<p>The <code>Trapezoidal</code> mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.</p>
<div class="tabs" id="code-snippet-9">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#2insg80ddswec5ot9xvrwvhnr1bwn54z-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#brey6kdr1zje876mhekovlu40yw3xzha-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6tkamc4lvn2vnuobqcdiit10juppd0tv-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="2insg80ddswec5ot9xvrwvhnr1bwn54z-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="brey6kdr1zje876mhekovlu40yw3xzha-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6tkamc4lvn2vnuobqcdiit10juppd0tv-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vtph278uh3qzop0j4v4k125z9vsuarxu"></div>
<h2 id="see-also">See also</h2>
<ul>
<li><a href="./data-label">Data label</a></li>
<li><a href="./grouping">Grouping</a></li>
</ul>
>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type='Button' buttonSettings=<h1 id="funnel-in-react-accumulation-chart-component">Funnel in React Accumulation chart component</h1>
<p>To render a funnel series, use the series <a href="https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type"><code>type</code></a> as <code>Funnel</code> and inject the <code>FunnelSeries</code> module into the <code>services</code>.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vjt78bklohozleicis4fdo3di98m6o9e"></div>
<h2 id="size">Size</h2>
<p>The size of the funnel chart can be customized by using the <code>width</code> and <code>height</code> properties.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9ry5atnfapikoyw4gld40u0r5is48u6f-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9ry5atnfapikoyw4gld40u0r5is48u6f-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-3grs6ts2pj6oirs5890h52lo7ks2qxl3"></div>
<h2 id="neck-size">Neck size</h2>
<p>The funnel’s neck size can be customized by using the <code>neckWidth</code> and <code>neckHeight</code> properties.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#wpxb5bg8fimt59haq78estiu7k84sltz-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="wpxb5bg8fimt59haq78estiu7k84sltz-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-8z6gl4z9f41kleckf2s2vy41517044n4"></div>
<h2 id="gap-between-the-segments">Gap between the segments</h2>
<p>Funnel chart provides options to customize the space between the segments by using the <code>gapRatio</code> property of the series. It ranges from 0 to 1.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#41f8lbjc8nb3w87zx48i0c58impzdm44-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#zb89p2lt1nur2ir80fip52sxaowbca6p-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="41f8lbjc8nb3w87zx48i0c58impzdm44-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zb89p2lt1nur2ir80fip52sxaowbca6p-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-tx1igq7uty6pcpnzse3739jqu01q4hlt"></div>
<h2 id="explode">Explode</h2>
<p>Points can be exploded on mouse click by setting the <code>explode</code> property to true. You can also explode the point on load using <code>explodeIndex</code>. Explode distance can be set by using <code>explodeOffset</code> property.</p>
<div class="tabs" id="code-snippet-5">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#ohk19zy6bmx149z9q64druu3drwznnwj-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#d5xftv7er0216oucjdu3s5jom5dnk52m-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="ohk19zy6bmx149z9q64druu3drwznnwj-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="d5xftv7er0216oucjdu3s5jom5dnk52m-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-5n3s3x7xne9quuosnmlhqrw3scsw2sl4"></div>
<h2 id="smart-data-label">Smart data label</h2>
<p>It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.</p>
<div class="tabs" id="code-snippet-6">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#7ccl407flheiqq6flpnmy8g5gg2w95fx-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#imxv5fug0m255uak9xtgj3cshukb8ioy-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="7ccl407flheiqq6flpnmy8g5gg2w95fx-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccLoadedEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccResizeEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span>: <span class="kt">ClientRect</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span>: <span class="kt">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span><span class="p">,</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="imxv5fug0m255uak9xtgj3cshukb8ioy-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-xfr6r4820t4b0eruzti6djhh12ydt0tn"></div>
<h2 id="customization">Customization</h2>
<p>Individual points can be customized using the <code>pointRender</code> event.</p>
<div class="tabs" id="code-snippet-7">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vda50128qgc8tsmu0yhfzeopksmm7y6b-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#m4fcib63v7ypbho07f6v7alh88bri1f7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vda50128qgc8tsmu0yhfzeopksmm7y6b-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m4fcib63v7ypbho07f6v7alh88bri1f7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span><span class="p">,</span> <span class="nx">IAccPointRenderEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span>: <span class="kt">EmitType</span><span class="o"><</span><span class="nx">IAccPointRenderEventArgs</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccPointRenderEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span> <span class="kr">as</span> <span class="kt">string</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5"></div>
<h2 id="modes">Modes</h2>
<p>The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the <a href="https://helpej2.syncfusion.com/react/documentation/api/accumulation-chart/funnelModes"><code>funnelMode</code></a> is <code>Standard</code>.</p>
<h3 id="standard">Standard</h3>
<p>The <code>Standard</code> funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.</p>
<div class="tabs" id="code-snippet-8">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ob11ji04wbluzd08fs2uxnrlwd3u6met"></div>
<h3 id="trapezoidal">Trapezoidal</h3>
<p>The <code>Trapezoidal</code> mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.</p>
<div class="tabs" id="code-snippet-9">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#2insg80ddswec5ot9xvrwvhnr1bwn54z-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#brey6kdr1zje876mhekovlu40yw3xzha-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6tkamc4lvn2vnuobqcdiit10juppd0tv-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="2insg80ddswec5ot9xvrwvhnr1bwn54z-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="brey6kdr1zje876mhekovlu40yw3xzha-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6tkamc4lvn2vnuobqcdiit10juppd0tv-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vtph278uh3qzop0j4v4k125z9vsuarxu"></div>
<h2 id="see-also">See also</h2>
<ul>
<li><a href="./data-label">Data label</a></li>
<li><a href="./grouping">Grouping</a></li>
</ul>
>
</RibbonItemDirective>
<RibbonItemDirective type='Button' buttonSettings=<h1 id="funnel-in-react-accumulation-chart-component">Funnel in React Accumulation chart component</h1>
<p>To render a funnel series, use the series <a href="https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#type"><code>type</code></a> as <code>Funnel</code> and inject the <code>FunnelSeries</code> module into the <code>services</code>.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="9lxflsxmtkx9zmmorruaak6xhk7u0ozt-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="s9enxw6s0hgw499ftioueu3wcxkhl6j8-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vjt78bklohozleicis4fdo3di98m6o9e" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vjt78bklohozleicis4fdo3di98m6o9e"></div>
<h2 id="size">Size</h2>
<p>The size of the funnel chart can be customized by using the <code>width</code> and <code>height</code> properties.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9ry5atnfapikoyw4gld40u0r5is48u6f-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="o2geb2jhgdl52lmvzz4rlplhdt9gkgy0-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9ry5atnfapikoyw4gld40u0r5is48u6f-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="r7tujc1tpwu8bt4ozfkmk7kesyn8x412-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-3grs6ts2pj6oirs5890h52lo7ks2qxl3" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs2');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-3grs6ts2pj6oirs5890h52lo7ks2qxl3"></div>
<h2 id="neck-size">Neck size</h2>
<p>The funnel’s neck size can be customized by using the <code>neckWidth</code> and <code>neckHeight</code> properties.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#wpxb5bg8fimt59haq78estiu7k84sltz-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="cdkvdbtfkm64kf4dcw0tvbgixay6ensl-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="wpxb5bg8fimt59haq78estiu7k84sltz-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">neckWidth</span><span class="o">=</span><span class="s1">'25%'</span> <span class="nx">neckHeight</span><span class="o">=</span><span class="s1">'5%'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6lloap91jrq1r4fudp8f4wvbuo9z4wq2-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-8z6gl4z9f41kleckf2s2vy41517044n4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs3');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-8z6gl4z9f41kleckf2s2vy41517044n4"></div>
<h2 id="gap-between-the-segments">Gap between the segments</h2>
<p>Funnel chart provides options to customize the space between the segments by using the <code>gapRatio</code> property of the series. It ranges from 0 to 1.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#41f8lbjc8nb3w87zx48i0c58impzdm44-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#zb89p2lt1nur2ir80fip52sxaowbca6p-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="41f8lbjc8nb3w87zx48i0c58impzdm44-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zb89p2lt1nur2ir80fip52sxaowbca6p-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="kw7q14r3h4siu8gpxgr3wl9nsfmme2mz-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-tx1igq7uty6pcpnzse3739jqu01q4hlt" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs4');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-tx1igq7uty6pcpnzse3739jqu01q4hlt"></div>
<h2 id="explode">Explode</h2>
<p>Points can be exploded on mouse click by setting the <code>explode</code> property to true. You can also explode the point on load using <code>explodeIndex</code>. Explode distance can be set by using <code>explodeOffset</code> property.</p>
<div class="tabs" id="code-snippet-5">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#ohk19zy6bmx149z9q64druu3drwznnwj-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#d5xftv7er0216oucjdu3s5jom5dnk52m-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="ohk19zy6bmx149z9q64druu3drwznnwj-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="d5xftv7er0216oucjdu3s5jom5dnk52m-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">explodeOffset</span><span class="o">=</span><span class="s1">'10'</span> <span class="nx">explodeAll</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="nx">explodeIndex</span><span class="o">=</span><span class="p">{</span><span class="mf">3</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="y87jrtl2wzpet2tu9v1j4ec4u947iwf8-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-5n3s3x7xne9quuosnmlhqrw3scsw2sl4" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs5');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-5n3s3x7xne9quuosnmlhqrw3scsw2sl4"></div>
<h2 id="smart-data-label">Smart data label</h2>
<p>It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.</p>
<div class="tabs" id="code-snippet-6">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#7ccl407flheiqq6flpnmy8g5gg2w95fx-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#imxv5fug0m255uak9xtgj3cshukb8ioy-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="7ccl407flheiqq6flpnmy8g5gg2w95fx-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ucjrc74o1dyenbzqau9hq36xx2yc1jbo-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">funnelData</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'../datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">onLoad</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccLoadedEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">availableSize</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">onChartResized</span><span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccResizeEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">bounds</span>: <span class="kt">ClientRect</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'charts'</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">width</span> <span class="o"><</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'70%'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="s1">'60%'</span><span class="p">;</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">accumulation</span><span class="p">.</span><span class="nx">series</span><span class="p">[</span><span class="mf">0</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="s1">'80%'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">legendSettings</span><span class="o">=</span><span class="p">{{</span> <span class="nx">visible</span>: <span class="kt">false</span> <span class="p">}}</span> <span class="nx">tooltip</span><span class="o">=</span><span class="p">{{</span> <span class="nx">enable</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">format</span><span class="o">:</span> <span class="s1">'${point.x} : <b>${point.y}</b>'</span> <span class="p">}}</span> <span class="nx">title</span><span class="o">=</span><span class="s1">'Top population countries in the world 2017'</span> <span class="nx">resized</span><span class="o">=</span><span class="p">{</span><span class="nx">onChartResized</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="nx">load</span><span class="o">=</span><span class="p">{</span><span class="nx">onLoad</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">funnelData</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">name</span><span class="o">=</span><span class="s1">'2017 Population'</span> <span class="nx">dataLabel</span><span class="o">=</span><span class="p">{{</span>
<span class="nx">visible</span>: <span class="kt">true</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'Outside'</span><span class="p">,</span>
<span class="nx">connectorStyle</span><span class="o">:</span> <span class="p">{</span> <span class="nx">length</span><span class="o">:</span> <span class="s1">'6%'</span> <span class="p">},</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'text'</span><span class="p">,</span>
<span class="p">}}</span> <span class="nx">explode</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="imxv5fug0m255uak9xtgj3cshukb8ioy-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-xfr6r4820t4b0eruzti6djhh12ydt0tn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs6');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-xfr6r4820t4b0eruzti6djhh12ydt0tn"></div>
<h2 id="customization">Customization</h2>
<p>Individual points can be customized using the <code>pointRender</code> event.</p>
<div class="tabs" id="code-snippet-7">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vda50128qgc8tsmu0yhfzeopksmm7y6b-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#m4fcib63v7ypbho07f6v7alh88bri1f7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vda50128qgc8tsmu0yhfzeopksmm7y6b-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m4fcib63v7ypbho07f6v7alh88bri1f7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span><span class="p">,</span> <span class="nx">IAccPointRenderEventArgs</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">onPointRender</span>: <span class="kt">EmitType</span><span class="o"><</span><span class="nx">IAccPointRenderEventArgs</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">args</span>: <span class="kt">IAccPointRenderEventArgs</span><span class="p">)</span><span class="o">:</span> <span class="ow">void</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">args</span><span class="p">.</span><span class="nx">point</span><span class="p">.</span><span class="nx">x</span> <span class="kr">as</span> <span class="kt">string</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Downloaded'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#f4bc42'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s1">'#597cf9'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span> <span class="nx">pointRender</span><span class="o">=</span><span class="p">{</span><span class="nx">onPointRender</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span>
<span class="nx">gapRatio</span><span class="o">=</span><span class="p">{</span><span class="mf">0.08</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="uzhzcirut83cupvgzwvd1gavk9nzxa6m-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs7');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-mk5kkwj9wo5o5c6rb6ulmie2u5s8dgd5"></div>
<h2 id="modes">Modes</h2>
<p>The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the <a href="https://helpej2.syncfusion.com/react/documentation/api/accumulation-chart/funnelModes"><code>funnelMode</code></a> is <code>Standard</code>.</p>
<h3 id="standard">Standard</h3>
<p>The <code>Standard</code> funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom.</p>
<div class="tabs" id="code-snippet-8">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="n5k7yoy0oqm40s6cxwby8rofg9uxhz5v-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="a1shlkyr1jdiv45jmpyysvv2x1vui216-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Standard'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="vuwfek3z7aj8sqjlwzx88alf0pajy62l-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ob11ji04wbluzd08fs2uxnrlwd3u6met" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs8');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ob11ji04wbluzd08fs2uxnrlwd3u6met"></div>
<h3 id="trapezoidal">Trapezoidal</h3>
<p>The <code>Trapezoidal</code> mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure.</p>
<div class="tabs" id="code-snippet-9">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#2insg80ddswec5ot9xvrwvhnr1bwn54z-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#brey6kdr1zje876mhekovlu40yw3xzha-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6tkamc4lvn2vnuobqcdiit10juppd0tv-html" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.html" data-original-lang="html">index.html</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="2insg80ddswec5ot9xvrwvhnr1bwn54z-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span> <span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span><span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="nx">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent>;</span>
<span class="p">}</span>
<span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="brey6kdr1zje876mhekovlu40yw3xzha-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDOM</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">AccumulationChartComponent</span><span class="p">,</span> <span class="nx">AccumulationSeriesCollectionDirective</span><span class="p">,</span> <span class="nx">AccumulationSeriesDirective</span><span class="p">,</span>
<span class="nx">Inject</span><span class="p">,</span> <span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">IAccLoadedEventArgs</span><span class="p">,</span>
<span class="nx">AccumulationDataLabel</span><span class="p">,</span> <span class="nx">IAccResizeEventArgs</span><span class="p">,</span> <span class="nx">AccumulationTheme</span>
<span class="p">}</span> <span class="kr">from</span> <span class="s1">'@syncfusion/ej2-react-charts'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">data1</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'datasource.ts'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o"><</span><span class="nx">AccumulationChartComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s1">'charts'</span><span class="o">></span>
<span class="o"><</span><span class="nx">Inject</span> <span class="nx">services</span><span class="o">=</span><span class="p">{[</span><span class="nx">AccumulationLegend</span><span class="p">,</span> <span class="nx">FunnelSeries</span><span class="p">,</span> <span class="nx">AccumulationTooltip</span><span class="p">,</span> <span class="nx">AccumulationDataLabel</span><span class="p">]}</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">AccumulationSeriesCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">AccumulationSeriesDirective</span> <span class="nx">dataSource</span><span class="o">=</span><span class="p">{</span><span class="nx">data1</span><span class="p">}</span> <span class="nx">xName</span><span class="o">=</span><span class="s1">'x'</span> <span class="nx">yName</span><span class="o">=</span><span class="s1">'y'</span> <span class="kr">type</span><span class="o">=</span><span class="s1">'Funnel'</span> <span class="nx">width</span><span class="o">=</span><span class="s1">'60%'</span> <span class="nx">height</span><span class="o">=</span><span class="s1">'80%'</span> <span class="nx">funnelMode</span> <span class="o">=</span> <span class="s1">'Trapezoidal'</span><span class="o">></span>
<span class="o"><</span><span class="err">/AccumulationSeriesDirective></span>
<span class="o"><</span><span class="err">/AccumulationSeriesCollectionDirective></span>
<span class="o"><</span><span class="err">/AccumulationChartComponent></span>
<span class="p">};</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"charts"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6tkamc4lvn2vnuobqcdiit10juppd0tv-html" data-original-lang="html">
<div class="highlight"><pre><code class="prettyprint language-html" data-lang="html"><span></span><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Syncfusion React Accumulation Series<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"description"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Essential JS 2 for React Components"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"author"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Syncfusion"</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"systemjs.config.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">#</span><span class="nn">loader</span> <span class="p">{</span>
<span class="k">color</span><span class="p">:</span> <span class="mh">#008cff</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
<span class="k">left</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="p">:</span> <span class="mi">45</span><span class="kt">%</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">charts</span> <span class="p">{</span>
<span class="k">height</span> <span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'charts'</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">'loader'</span><span class="p">></span>Loading....<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-vtph278uh3qzop0j4v4k125z9vsuarxu" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/chart/preview-sample/series/funnel-cs9');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-vtph278uh3qzop0j4v4k125z9vsuarxu"></div>
<h2 id="see-also">See also</h2>
<ul>
<li><a href="./data-label">Data label</a></li>
<li><a href="./grouping">Grouping</a></li>
</ul>
>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[ RibbonGallery ]} />
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.table {
border-collapse: collapse;
}
/* plain table styles */
.plainTables_item_1 .tableContent {
border: 1px solid black;
}
.plainTables_item_2 .tableContent,
.plainTables_item_3 .tableContent {
border: 1px solid #c1c1c1;
}
.plainTables_item_4 .row_one .tableContent {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.plainTables_item_4 .row_three .tableContent {
border-bottom: 1px solid black;
}
.plainTables_item_5 .row_one .tableContent {
border-bottom: 1px solid black;
}
.plainTables_item_5 .row_one .tableContent,
.plainTables_item_7 .row_one .tableContent {
border-bottom: 1px solid black;
}
.plainTables_item_5 .row_two .tableContent:first-child,
.plainTables_item_5 .row_three .tableContent:first-child,
.plainTables_item_7 .row_two .tableContent:first-child,
.plainTables_item_7 .row_three .tableContent:first-child{
border-right: 1px solid black;
}
/* list table styles */
.listTables_item_1 .row_one .tableContent {
border-bottom: 1px solid #83caeb;
}
.listTables_item_2 .row_one .tableContent,
.listTables_item_2 .row_two .tableContent ,
.listTables_item_2 .row_three .tableContent {
border-bottom: 1px solid #83caeb;
border-top: 1px solid #83caeb;
}
.listTables_item_3 .row_one .tableContent {
border-top: 1px solid #156082;
border-bottom: 1px solid #156082;
background-color: #156082;
color: white;
}
.listTables_item_3 .row_three .tableContent {
border-bottom: 1px solid #156082;
}
.listTables_item_5 .row_one .tableContent,
.listTables_item_7 .row_one .tableContent {
border-bottom: 1px solid white;
}
.listTables_item_5 .row_two .tableContent:first-child,
.listTables_item_5 .row_three .tableContent:first-child,
.listTables_item_7 .row_two .tableContent:first-child,
.listTables_item_7 .row_three .tableContent:first-child{
border-right: 1px solid white;
}
.listTables_item_5 .tableContent {
background-color: #156082;
color: white;
}
.listTables_item_7 .row_one .tableContent {
border-bottom: 1px solid black;
}
.listTables_item_7 .row_two .tableContent:first-child,
.listTables_item_7 .row_three .tableContent:first-child{
border-right: 1px solid black;
}
.listTables_item_4 .row_one .tableContent {
border-top: 1px solid #156082;
border-bottom: 1px solid #156082;
}
.listTables_item_4 .row_three .tableContent {
border-bottom: 1px solid #156082;
}To learn more about other built-in Ribbon item types, refer to the Ribbon Items documentation.