syncfusion
/
ej2-react-samples
зеркало из https://github.com/syncfusion/ej2-react-samples.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

v23.1.36 is released

This commit is contained in:
pipeline 2023-09-19 05:01:10 +00:00
Родитель 4625904b10
Коммит be5bae3cf6
804 изменённых файлов: 58347 добавлений и 35847 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

215
README.md
Просмотреть файл

@ -1,26 +1,217 @@
# Syncfusion React Component Demo Samples
# React Sample Configuration
Welcome to the demo samples repository for Syncfusion React components! This repository contains a collection of sample applications showcasing the usage of various Syncfusion components in a React environment.
## Adding your sample folder
Create new folder in 'src' location and name the folder as control name for example "grid” it is control name.
## Prerequisites
_Note: Do not use whitespace at any cause in folder’s name. Use “-” instead of space._
- [Node.js](https://nodejs.org/en) - `v10.24.1`
## Adding the sample
## Run the samples
Add the sample component tsx file in the sample folder.Below steps are need to be considered on sample creation
To run the sample applications locally, follow these steps
* Sample component must extend the "SampleBase" component class from the path "src/common/sample-base" file.
* Sample tag must be enclosed between the "control-section" div.
* In all samples description is need to be added. Add sample description within the div tag with id as **description**.
1. Install the required dependencies using npm
```javascript
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SampleBase } from '../common/sample-base';
export class Default extends SampleBase<{}, {}> {
render() {
return (
<div className = 'control-pane'>
<div className='control-section'>
//sample component tags
</div>
<div id="description">
// sample description
</div>
</div>
)
}
}
```bash
```
Refer the [sample](https://github.com/syncfusion/ej2-react-samples/blob/master/src/grid/default.tsx) for example sample component.
Note: Do not use whitespace at any cause in file’s name. Use “-” instead of space.
## Adding property section
To add the "propertypane” in the sample use tag `PropertyPane` from "common/property-pane" .Configure your sample properties as like below code snippet.
```
<PropertyPane title='Properties'>
<table id="property" title="Properties" className='property-panel-table' style={{ width: '100%' }}>
<tr>
<td style={{ width: '30%' }}>
<div className="col-md-4" style={{ paddingTop: "8px" }}>
GridLines
</div>
</td>
<td style={{ width: '70%', paddingRight: '10px' }}>
<div>
<select id="ddl" name="ddl" onChange={this.change.bind(this)} className="form-control" style={{ padding: "6px" }} ref={d => this.dropElement = d}>
<option value="default">Default</option>
<option value="both">Both</option>
<option value="none">None</option>
<option value="horizontal">Horizontal</option>
<option value="vertical">Vertical</option>
</select>
</div>
</td>
</tr>
</table>
</PropertyPane>
```
Refer the [PropertyPanesample](https://github.com/syncfusion/ej2-react-samples/blob/master/src/grid/adaptive.tsx) for propertyPane example.
## Add Routing for your sample
Create the "config.tsx” file inside of your control folder.Configure your "config.tsx file" file as like below code snippet.
```
export const GridSampleOrder:Object = [
{ 'path': 'grid/default', 'component':'Default', 'name': 'Default Functionalities', 'order': '01', 'category': 'Grid' },
{ 'path': 'grid/gridlines', 'component':'GridLines', 'name': 'GridLines', 'order': '01', 'category': 'Grid', hideOnDevice: true }
]
```
**Fields Description:**
* _path :_ Specifies the sample router path. Path must be same as "sampleFolderName/sampleFileName".
* _component :_ Specifies the name of the sample component.
* _name :_ Specifies the sample name to be displayed.
* _order :_ Specifies the order in which sample to be displayed.
* _category :_ Specifies the sample category.
*Note: set **hideOnDevice** as true if you want to hide a sample in devices.*
## Configure Sample List
Add your samples in “samplelist.tsx” located in “/src/common” folder
1. Import your sampleOrder array from the component config file.
2. Add your samples in samplesList as Like below
```
import * as React from 'react';
import { GridSampleOrder } from '../grid/config';
export let samplesList: any = [
{
'name': 'Grid', 'category': 'Grids', 'order': '02', 'path': 'grid', 'samples': GridSampleOrder
}
];
```
## Adding your control dependency
Add your dependency in “package.json” file inside the dependencies.
Note: Here, '\*' Specifies that install the latest published package form the online. '\*' is recommended for Syncfusion packages.
```
"dependencies": {
"@syncfusion/ej2-react-grids": "*"
},
```
# Using the samples
## Installing
Before installation check `@syncfusion:registry=http://nexus.syncfusion.com/repository/ej2-production/` is available in npmrc file. Then use the below command to install all dependent packages.
```
npm install
```
2. Start the development server using gulp
## Build
```bash
gulp serve
Use `npm run build` command to compile the source files. It calls the following tasks synchronously,
1. SEO changes
2. Build
3. Styles ship
4. Site-map generate.
### SEO changes
It will set meta data and description for the h1 tag to show our components first in search engine. Use the below command to run it individual.
```
gulp SEO-changes
```
3. Open your web browser and navigate to the specified localhost address to view the samples.
### Build
Use the below command to generate scripts, styles, locale and sample lists.
```
gulp build
```
It runs the following tasks synchronously,
1. Scripts
2. Styles
#### **Scripts**
It compiles the Typescript files and use the below command to run this task.
```
gulp scripts
```
#### **Styles**
`gulp styles` command is used to compile default themes. It calls the following two tasks synchronously.
1. Default theme
2. Compile styles
#### Default theme
Use the below command to generate default theme files.
```
gulp default-theme
```
#### Compile Styles
It compiles the scss file to css file. To run this task use the below command,
```
gulp compile-styles
```
### Styles Shipping
It copies css files for themes from node_modules. Use the below command to run it individual.
```
gulp styles-ship
```
### Site map generation
The below command combines sample of all components and store it in sitemap-demos.xml file to index our components, samples, documents in search engine.
```
gulp sitemap-generate
```
## Running the Sample Browser
To run your sample browser you can use any of the following command.
```
gulp serve
```

2
gulpfile.js
Просмотреть файл

@ -159,7 +159,7 @@ gulp.task('build', gulp.series(function (done) {
}));
gulp.task('react-build', gulp.series(function (done) {
runSequence('create-locale','generate-router','styles','scripts','bundle','cssfile', done);
runSequence('create-locale','generate-router','styles','scripts','bundle','plnkr-json','cssfile', done);
}));
gulp.task('bundle', gulp.series(function () {

4
index.html
Просмотреть файл

@ -13,7 +13,7 @@
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WLQL39J');</script>
})(window,document,'script','dataLayer','GTM-W8WD8WN');</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -56,7 +56,7 @@
<body class='e-view'>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLQL39J"height="0"width="0"style="display:none;visibility:hidden"></iframe></noscript>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W8WD8WN" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div hidden id="sync-analytics" data-queue="EJ2 - React - Demos"></div>
<aside id='left-sidebar'>

32
package.json
Просмотреть файл

@ -1,6 +1,6 @@
{
"name": "@syncfusion/ej2-react-samples",
"version": "22.1.34",
"version": "23.1.36",
"description": "Examples of React UI Components",
"author": "Syncfusion Inc.",
"license": "SEE LICENSE IN license",
@ -42,28 +42,32 @@
"@syncfusion/ej2-react-spreadsheet": "*",
"@syncfusion/ej2-react-progressbar": "*",
"@syncfusion/ej2-react-image-editor": "*",
"@types/react": "^18.0.8",
"@types/react-dom": "^18.0.3",
"@types/react": "18.0.8",
"@types/react-dom": "18.0.3",
"@types/history": "4.7.7",
"@types/react-router": "4.0.19",
"@types/moment-timezone": "0.5.7",
"fuse.js": "3.2.0",
"gulp-typescript": "^5.0.1",
"typescript": "^4.5.5",
"moment-timezone": "0.5.13",
"gulp-typescript": "5.0.1",
"typescript": "4.5.5",
"moment-timezone": "0.5.35",
"@microsoft/signalr": "5.0.9",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-redux": "^5.0.5",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-redux": "5.0.5",
"react-router": "4.3.1",
"react-router-dom": "4.3.0",
"@types/marked": "^0.3.0",
"@types/marked": "0.3.0",
"@types/codemirror": "0.0.56",
"marked": "^0.3.19",
"codemirror": "^5.65.12",
"tributejs": "^3.7.3"
"marked": "4.0.10",
"codemirror": "5.65.12",
"tributejs": "3.7.3"
},
"devDependencies": {
"@types/react": "^15.0.24",
"@types/react-dom": "^15.5.1",
"@types/react-router": "^4.0.12",
"@types/react-router-dom": "^4.0.5",
"awesome-typescript-loader": "^3.1.3",
"browser-sync": "^2.18.13",
"css-loader": "^0.28.4",
@ -73,6 +77,7 @@
"graceful-fs": "^4.2.4",
"gulp": "^4.0.2",
"gulp-sass": "^3.1.0",
"gulp-typescript": "3.1.6",
"gulp-webpack": "^1.5.0",
"gulp4-run-sequence": "^1.0.1",
"postcss-loader": "2.0.8",
@ -82,6 +87,7 @@
"shelljs": "*",
"source-map-loader": "^0.2.1",
"style-loader": "^0.18.2",
"typescript": "2.3.4",
"webpack": "^4.41.5"
},
"scripts": {

3
sampleName.json
Просмотреть файл

@ -871,7 +871,8 @@
"Samples": {
"default":"Default Functionalities",
"simplified": "Simplified Mode",
"resize": "Ribbon Resizing"
"resize": "Ribbon Resizing",
"backstage": "Ribbon Backstage"
}
},
"rich-text-editor": {

18
src/appbar/config.tsx
Просмотреть файл

@ -1,4 +1,18 @@
export const AppBarSampleOrder: Object = [
{ 'path': 'appbar/default', 'component': 'Default', 'name': 'Default Functionalities', 'description': 'This sample demonstrates the default functionalities of the Syncfusion React AppBar component platform.', 'order': '01', 'category': 'AppBar', 'api': '{ "AppBar":["mode", "colorMode"] }' },
{ 'path': 'appbar/color', 'component': 'Color', 'name': 'Color', 'description': 'This sample demonstrates the available bar color modes in the Syncfusion React AppBar component platform.', 'order': '01', 'category': 'AppBar', 'api': '{ "AppBar":["colorMode"] }' }
{
'path': 'appbar/default', 'component': 'Default', 'name': 'Default Functionalities', 'description': 'This sample demonstrates the default functionalities of the Syncfusion React AppBar component platform.', 'order': '01', 'category': 'AppBar', 'api': '{ "AppBar":["mode", "colorMode"] }',
'sourceFiles': [
{ 'displayName': 'default.tsx', 'path': 'src/appbar/default.tsx' },
{ 'displayName': 'default.jsx', 'path': 'src/appbar/default.jsx' },
{ 'displayName': 'default.css', 'path': 'src/appbar/default.css' }
]
},
{
'path': 'appbar/color', 'component': 'Color', 'name': 'Color', 'description': 'This sample demonstrates the available bar color modes in the Syncfusion React AppBar component platform.', 'order': '01', 'category': 'AppBar', 'api': '{ "AppBar":["colorMode"] }',
'sourceFiles': [
{ 'displayName': 'color.tsx', 'path': 'src/appbar/color.tsx' },
{ 'displayName': 'color.jsx', 'path': 'src/appbar/color.jsx' },
{ 'displayName': 'color.css', 'path': 'src/appbar/color.css' }
]
}
]

39
src/arc-gauge/customer-satisfaction-score-functional.tsx
Просмотреть файл

@ -3,51 +3,42 @@
*/
import * as React from "react";
import {
CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, GaugeTheme, ILoadedEventArgs,
RangesDirective, RangeDirective, AnnotationsDirective, AnnotationDirective, Annotations, GaugeTooltip, Legend, Inject
} from '@syncfusion/ej2-react-circulargauge';
import { useEffect } from "react";
import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, GaugeTheme, ILoadedEventArgs, RangesDirective, RangeDirective, AnnotationsDirective, AnnotationDirective, Annotations, GaugeTooltip, Legend, Inject } from '@syncfusion/ej2-react-circulargauge';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
.control-fluid {
padding: 0px !important;
}`;
function CustomerSatisfactionScore() {
React.useEffect(() => {
const CustomerSatisfactionScore = () => {
useEffect(() => {
updateSampleSection();
}, [])
function load(args: ILoadedEventArgs): void {
const load = (args: ILoadedEventArgs): void => {
// custom code start
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() +
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
// custom code end
}
return (
<div className='control-pane'>
<style>
{SAMPLE_CSS}
</style>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<CircularGaugeComponent load={load.bind(this)} id="gauge" background="transparent" height="400px" allowMargin={false} title="Customer Satisfaction Score" titleStyle={{ size: '18px', fontFamily: 'inherit' }}
tooltip={{ enable: true, template: '<div style="font-size:18px;background:white;width:150px;color:#595959;border:1px solid #e8e8e8">Current Score: 7.5 </div>' }}
legendSettings={{ visible: true, position: 'Bottom', width: "70%", textStyle: { fontFamily: 'inherit', size: '12px' }, }} >
<CircularGaugeComponent load={load.bind(this)} id="gauge" background="transparent" height="400px" allowMargin={false} title="Customer Satisfaction Score" titleStyle={{ size: '18px', fontFamily: 'inherit' }} tooltip={{ enable: true, template: '<div style="font-size:18px;background:white;width:150px;color:#595959;border:1px solid #e8e8e8">Current Score: 7.5 </div>' }} legendSettings={{ visible: true, position: 'Bottom', width: "70%", textStyle: { fontFamily: 'inherit', size: '12px' }, }} >
<Inject services={[Annotations, GaugeTooltip, Legend]} />
<AxesDirective>
<AxisDirective startAngle={270} endAngle={90} radius="100%" minimum={0} maximum={10} majorTicks={{ width: 1.5, height: 12, interval: 2, offset: 35 }}
lineStyle={{ width: 0 }} minorTicks={{ width: 0 }} labelStyle={{ font: { size: '14px', fontFamily: 'inherit' }, position: 'Outside', offset: -40, }} >
<AxisDirective startAngle={270} endAngle={90} radius="100%" minimum={0} maximum={10} majorTicks={{ width: 1.5, height: 12, interval: 2, offset: 35 }} lineStyle={{ width: 0 }} minorTicks={{ width: 0 }} labelStyle={{ font: { size: '14px', fontFamily: 'inherit' }, position: 'Outside', offset: -40, }} >
<AnnotationsDirective>
<AnnotationDirective content='<div style="font-size:16px;margin-top: 5px;font-family: inherit;">7.5</div>' angle={0} radius="-10%" zIndex="1" ></AnnotationDirective>
</AnnotationsDirective>
<PointersDirective>
<PointerDirective value={7.5} radius="70%" pointerWidth={5} needleEndWidth={2} cap={{ radius: 8, border: { width: 2 }, }} />
<PointerDirective value={6.5} radius="68%" type="Marker" markerShape="Rectangle" markerWidth={40} markerHeight={0.5} needleEndWidth={2} color="#0477c2"
animation={{ enable: false }} cap={{ radius: 0, border: { width: 0 }, }} />
<PointerDirective value={6.5} radius="68%" type="Marker" markerShape="Rectangle" markerWidth={40} markerHeight={0.5} needleEndWidth={2} color="#0477c2" animation={{ enable: false }} cap={{ radius: 0, border: { width: 0 }, }} />
<PointerDirective value={9.5} radius="68%" type="Marker" markerShape="Rectangle" markerWidth={40} markerHeight={0.5} needleEndWidth={2} color="#0477c2" animation={{ enable: false }} cap={{ radius: 0, border: { width: 0 }, }} />
</PointersDirective>
<RangesDirective>
@ -62,9 +53,7 @@ function CustomerSatisfactionScore() {
</CircularGaugeComponent>
</div>
<div id="action-description">
<p>
This sample shows an arc gauge with a real-time scenario of a customer satisfaction score ranging from 0 to 10.
</p>
<p>This sample shows an arc gauge with a real-time scenario of a customer satisfaction score ranging from 0 to 10.</p>
</div>
<div id="description">
<p>

23
src/arc-gauge/default-functionalities-functional.tsx
Просмотреть файл

@ -3,10 +3,8 @@
*/
import * as React from "react";
import {
CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective,
GaugeTheme, ILoadedEventArgs, RangesDirective, RangeDirective, AnnotationsDirective, AnnotationDirective, Annotations, Inject
} from '@syncfusion/ej2-react-circulargauge';
import { useEffect } from "react";
import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, GaugeTheme, ILoadedEventArgs, RangesDirective, RangeDirective, AnnotationsDirective, AnnotationDirective, Annotations, Inject } from '@syncfusion/ej2-react-circulargauge';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
@ -18,15 +16,14 @@ const SAMPLE_CSS = `
.titleText {font-size: 15px; }
.annotation { font-size: 13px; }
.e-view.tailwind div.titleText, .e-view.tailwind-dark div.titleText { font-size: 15px; margin-top: 0px; }
}
`;
}`;
function Default() {
React.useEffect(() => {
const Default = () => {
useEffect(() => {
updateSampleSection();
}, [])
function load(args: ILoadedEventArgs): void {
const load = (args: ILoadedEventArgs): void => {
// custom code start
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
@ -53,9 +50,7 @@ function Default() {
return (
<div className='control-pane'>
<style>
{SAMPLE_CSS}
</style>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<CircularGaugeComponent load={load.bind(this)} id="gauge" background="transparent" height="500px" title="Female (% usage) on popular social network" titleStyle={{ size: '18px', fontFamily: 'inherit' }} >
<Inject services={[Annotations]} />
@ -93,9 +88,7 @@ function Default() {
</CircularGaugeComponent>
</div>
<div id="action-description">
<p>
This sample shows the arc gauge's default rendering. It also shows the most popular social media platforms and the percentage of female users.
</p>
<p>This sample shows the arc gauge's default rendering. It also shows the most popular social media platforms and the percentage of female users.</p>
</div>
<div id="description">
<p>

26
src/arc-gauge/key-performance-indicator-functional.tsx
Просмотреть файл

@ -3,10 +3,8 @@
*/
import * as React from "react";
import {
CircularGaugeComponent, AxesDirective, AxisDirective,
PointersDirective, PointerDirective, GaugeTheme, ILoadedEventArgs, RangesDirective, RangeDirective, AnnotationsDirective, AnnotationDirective,
Annotations, Gradient, Inject } from '@syncfusion/ej2-react-circulargauge';
import { useEffect } from "react";
import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, GaugeTheme, ILoadedEventArgs, RangesDirective, RangeDirective, AnnotationsDirective, AnnotationDirective, Annotations, Gradient, Inject } from '@syncfusion/ej2-react-circulargauge';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
@ -26,20 +24,18 @@ const SAMPLE_CSS = `
.e-view.material div.triangle-up, .e-view.material-dark div.triangle-up, .e-view.bootstrap-dark div.triangle-up,
.e-view.bootstrap div.triangle-up, .e-view.bootstrap4 div.triangle-up {
width: 20; height: 20; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid #84cbb5; margin-top: 10px; }
}
`;
} `;
function KeyPerformanceIndicator() {
React.useEffect(() => {
const KeyPerformanceIndicator = () => {
useEffect(() => {
updateSampleSection();
}, [])
function load(args: ILoadedEventArgs): void {
const load = (args: ILoadedEventArgs): void => {
// custom code start
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() +
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
// custom code end
}
@ -54,9 +50,7 @@ function KeyPerformanceIndicator() {
return (
<div className='control-pane'>
<style>
{SAMPLE_CSS}
</style>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<CircularGaugeComponent load={load.bind(this)} id="gauge" background="transparent" >
<Inject services={[Annotations, Gradient]} />
@ -83,9 +77,7 @@ function KeyPerformanceIndicator() {
</CircularGaugeComponent>
</div>
<div id="action-description">
<p>
This sample shows an arc gauge with a key performance indicator (KPI), which is a measurable value that shows how an organization meets key business objectives.
</p>
<p>This sample shows an arc gauge with a key performance indicator (KPI), which is a measurable value that shows how an organization meets key business objectives.</p>
</div>
<div id="description">
<p>

65
src/arc-gauge/patterns-functional.tsx
Просмотреть файл

@ -3,10 +3,8 @@
*/
import * as React from "react";
import {
CircularGaugeComponent, AxesDirective, AxisDirective, Inject, ILoadedEventArgs,
PointersDirective, PointerDirective, Annotations, AnnotationDirective, AnnotationsDirective, GaugeTheme, Gradient, RangesDirective,
RangeDirective } from '@syncfusion/ej2-react-circulargauge';
import { useEffect } from "react";
import { CircularGaugeComponent, AxesDirective, AxisDirective, Inject, ILoadedEventArgs, PointersDirective, PointerDirective, Annotations, AnnotationDirective, AnnotationsDirective, GaugeTheme, Gradient, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
@ -25,20 +23,18 @@ const SAMPLE_CSS = `
.titleText { margin-top: 0px; margin-left: 0px; }
.e-view.tailwind div.titleText, .e-view.tailwind-dark div.titleText { margin-top: 7px; margin-left: -3px; }
}
.gaugeAlign { width: 50%; }
`;
.gaugeAlign { width: 50%; }`;
function Patterns() {
React.useEffect(() => {
const Patterns = () => {
useEffect(() => {
updateSampleSection();
}, [])
function loadOne(args: ILoadedEventArgs): void {
const loadOne = (args: ILoadedEventArgs): void => {
// custom code start
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() +
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
if (selectedTheme.indexOf("tailwind") != -1 && args.gauge.axes[0].annotations != null) {
args.gauge.axes[0].annotations[0].angle = 188;
args.gauge.axes[0].annotations[0].radius = "15%";
@ -46,12 +42,11 @@ function Patterns() {
// custom code end
}
function loadTwo(args: ILoadedEventArgs): void {
const loadTwo = (args: ILoadedEventArgs): void => {
// custom code start
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() +
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
if (selectedTheme.indexOf("tailwind") != -1 && args.gauge.axes[0].annotations != null) {
args.gauge.axes[0].annotations[0].angle = 12;
args.gauge.axes[0].annotations[0].radius = "18%";
@ -63,12 +58,11 @@ function Patterns() {
// custom code end
}
function loadThree(args: ILoadedEventArgs): void {
const loadThree = (args: ILoadedEventArgs): void => {
// custom code start
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() +
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
if (selectedTheme.indexOf("tailwind") != -1 && args.gauge.axes[0].annotations != null) {
args.gauge.axes[0].annotations[0].angle = 194;
args.gauge.axes[0].annotations[0].radius = "8%";
@ -76,12 +70,11 @@ function Patterns() {
// custom code end
}
function loadFour(args: ILoadedEventArgs): void {
const loadFour = (args: ILoadedEventArgs): void => {
// custom code start
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() +
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
if (selectedTheme.indexOf("tailwind") != -1 && args.gauge.axes[0].annotations != null) {
args.gauge.axes[0].annotations[0].angle = 100;
args.gauge.axes[0].annotations[0].radius = "10%";
@ -89,12 +82,11 @@ function Patterns() {
// custom code end
}
function loadFive(args: ILoadedEventArgs): void {
const loadFive = (args: ILoadedEventArgs): void => {
// custom code start
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() +
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
if (selectedTheme.indexOf("tailwind") != -1 && args.gauge.axes[0].annotations != null) {
args.gauge.axes[0].annotations[0].angle = 174;
args.gauge.axes[0].annotations[0].radius = "12%";
@ -102,12 +94,11 @@ function Patterns() {
// custom code end
}
function loadSix(args: ILoadedEventArgs): void {
const loadSix = (args: ILoadedEventArgs): void => {
// custom code start
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() +
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
args.gauge.theme = ((selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')) as GaugeTheme;
if (selectedTheme.indexOf("tailwind") != -1 && args.gauge.axes[0].annotations != null) {
args.gauge.axes[0].annotations[0].angle = 180;
args.gauge.axes[0].annotations[0].radius = "6%";
@ -125,18 +116,15 @@ function Patterns() {
};
return (
<div className='control-section'>
<style>
{SAMPLE_CSS}
</style>
<div className='control-section' style={{overflow: 'auto'}}>
<style>{SAMPLE_CSS}</style>
<table>
<tr>
<td className='gaugeAlign'>
<CircularGaugeComponent load={loadOne.bind(this)} background="transparent" id="container1" width="280px" height="300px">
<Inject services={[Annotations]} />
<AxesDirective>
<AxisDirective startAngle={230} endAngle={130} radius="100%" minimum={0} maximum={100} lineStyle={{ width: 30, color: '#f6f7f9', }}
majorTicks={{ height: 0, interval: 10, }} minorTicks={{ height: 0, }} labelStyle={{ font: { fontFamily: 'inherit', size: '12px' }, position: 'Outside', offset: 20, }} >
<AxisDirective startAngle={230} endAngle={130} radius="100%" minimum={0} maximum={100} lineStyle={{ width: 30, color: '#f6f7f9', }} majorTicks={{ height: 0, interval: 10, }} minorTicks={{ height: 0, }} labelStyle={{ font: { fontFamily: 'inherit', size: '12px' }, position: 'Outside', offset: 20, }}>
<PointersDirective>
<PointerDirective type="RangeBar" color="#7edfb4" value={38} radius="120%" pointerWidth={28} />
<PointerDirective type="Marker" markerShape="Rectangle" markerWidth={28} markerHeight={3} radius="98%" color="black" value={38} />
@ -158,8 +146,7 @@ function Patterns() {
<CircularGaugeComponent load={loadTwo.bind(this)} centerY="60%" background="transparent" id="container2" width="280px" height="300px" >
<Inject services={[Annotations]} />
<AxesDirective>
<AxisDirective startAngle={270} endAngle={90} radius="80%" minimum={0} maximum={100} lineStyle={{ width: 30, color: '#f6f7f9', }}
majorTicks={{ height: 0, }} minorTicks={{ height: 0, width: 0, }} labelStyle={{ position: 'Outside', font: { size: '0px' }, }} >
<AxisDirective startAngle={270} endAngle={90} radius="80%" minimum={0} maximum={100} lineStyle={{ width: 30, color: '#f6f7f9', }} majorTicks={{ height: 0, }} minorTicks={{ height: 0, width: 0, }} labelStyle={{ position: 'Outside', font: { size: '0px' }, }}>
<PointersDirective>
<PointerDirective type="RangeBar" pointerWidth={40} color="#d6f5e8" value={80} radius="128%" />
<PointerDirective type="RangeBar" pointerWidth={30} color="#7edfb4" value={80} radius="115%" />
@ -177,8 +164,7 @@ function Patterns() {
<CircularGaugeComponent load={loadThree.bind(this)} centerY="55%" background="transparent" id="container3" width="280px" height="300px" >
<Inject services={[Annotations]} />
<AxesDirective>
<AxisDirective startAngle={220} endAngle={140} radius="80%" minimum={0} maximum={600} lineStyle={{ width: 0 }} majorTicks={{ height: 0, }} minorTicks={{ height: 0, }}
labelStyle={{ position: 'Outside', font: { size: '0px', color: '#1E7145' }, }} >
<AxisDirective startAngle={220} endAngle={140} radius="80%" minimum={0} maximum={600} lineStyle={{ width: 0 }} majorTicks={{ height: 0, }} minorTicks={{ height: 0, }} labelStyle={{ position: 'Outside', font: { size: '0px', color: '#1E7145' }, }}>
<PointersDirective>
<PointerDirective color="white" type="Marker" value={450} markerShape="Circle" radius="94%" markerWidth={17} markerHeight={17} animation={{ enable: false }} border={{ color: '#77e6b4', width: 7, }} />
</PointersDirective>
@ -204,8 +190,7 @@ function Patterns() {
<CircularGaugeComponent load={loadFour.bind(this)} background="transparent" id="container4" width="280px" height="300px" >
<Inject services={[Annotations, Gradient]} />
<AxesDirective>
<AxisDirective startAngle={220} endAngle={140} radius="80%" minimum={0} maximum={100} lineStyle={{ width: 0 }} majorTicks={{ height: 0, }} minorTicks={{ height: 0, }}
labelStyle={{ position: 'Outside', font: { size: '0px' }, }} >
<AxisDirective startAngle={220} endAngle={140} radius="80%" minimum={0} maximum={100} lineStyle={{ width: 0 }} majorTicks={{ height: 0, }} minorTicks={{ height: 0, }} labelStyle={{ position: 'Outside', font: { size: '0px' }, }}>
<PointersDirective>
<PointerDirective type="RangeBar" radius="90%" value={21} animation={{ enable: false, }} roundedCornerRadius={10} color="#a8f789" pointerWidth={25} />
<PointerDirective type="Marker" markerShape="Circle" markerWidth={30} markerHeight={30} animation={{ enable: false, }} color="white" radius="80%" value={22} />
@ -344,9 +329,7 @@ function Patterns() {
</td>
</tr>
<div id="action-description">
<p>
This sample includes a wide range of arc gauges with varying appearances based on the built-in features and customization options.
</p>
<p>This sample includes a wide range of arc gauges with varying appearances based on the built-in features and customization options.</p>
</div>
<div id="description">
<p>

2
src/arc-gauge/patterns.tsx
Просмотреть файл

@ -124,7 +124,7 @@
render() {
return (
<div className='control-section'>
<div className='control-section' style={{overflow: 'auto'}}>
<style>
{SAMPLE_CSS}
</style>

1
src/auto-complete/config.tsx
Просмотреть файл

@ -3,6 +3,7 @@ export const AutoCompleteSampleOrder:Object = [
{ 'path': 'auto-complete/grouping-icon', 'component':'Grouping', 'name': 'Grouping and Icons', 'description': 'This example demonstrates how to group based on the different categories with individual header and icon support using the React autocomplete component.', 'order': '01', 'category': 'AutoComplete', 'api': '{"AutoComplete": ["fields", "placeholder"]}','sourceFiles' : [{ 'displayName': 'grouping-icon.tsx', 'path':'src/auto-complete/grouping-icon.tsx' },{ 'displayName': 'grouping-icon.jsx', 'path':'src/auto-complete/grouping-icon.jsx' },{ 'displayName': 'dataSource.json', 'path':'src/auto-complete/dataSource.json'}] },
{ 'path': 'auto-complete/data-binding', 'component':'Data', 'name': 'Data Binding', 'description': 'This example demonstrates how to bind with local data source and fetch data from remote data service in the React autocomplete component.', 'order': '01', 'category': 'AutoComplete', 'api': '{"AutoComplete": ["dataSource", "suggestionCount", "query", "sortOrder", "autofill", "filterType", "change"]}','sourceFiles' : [{ 'displayName': 'data-binding.tsx', 'path':'src/auto-complete/data-binding.tsx' },{ 'displayName': 'data-binding.jsx', 'path':'src/auto-complete/data-binding.jsx' },{ 'displayName': 'dataSource.json', 'path':'src/auto-complete/dataSource.json'}] },
{ 'path': 'auto-complete/template', 'component':'Templates', 'name': 'Templates', 'description': 'This example demonstrates how to customize the appearance of each item in the React autocomplete component pop-up list using template.', 'order': '01', 'category': 'AutoComplete', 'api': '{"AutoComplete": ["dataSource", "fields", "headerTemplate", "itemTemplate", "placeholder", "popupHeight"]}' ,'sourceFiles' : [{ 'displayName': 'template.tsx', 'path':'src/auto-complete/template.tsx' },{ 'displayName': 'template.jsx', 'path':'src/auto-complete/template.jsx' },{ 'displayName': 'dataSource.json', 'path':'src/auto-complete/dataSource.json'}]},
{ 'path': 'auto-complete/virtual-scroll', 'component':'Virtualization', 'name': 'Virtualization','type': 'new', 'description': 'This example demonstrates how to utilize the virtual scrolling support of React autocomplete component.', 'order': '01', 'category': 'AutoComplete', 'api': '{"AutoComplete": ["dataSource", "fields", "enableVirtualization", "placeholder"]}' ,'sourceFiles' : [{ 'displayName': 'virtual-scroll.tsx', 'path':'src/auto-complete/virtual-scroll.tsx' },{ 'displayName': 'virtual-scroll.jsx', 'path':'src/auto-complete/virtual-scroll.jsx' },{ 'displayName': 'dataSource.json', 'path':'src/auto-complete/dataSource.json'}]},
{ 'path': 'auto-complete/highlight', 'component':'Highlight', 'name': 'Highlight', 'description': 'This example demonstrates how to highlight the searched characters in the suggested list items of the React autocomplete component.', 'order': '01', 'category': 'AutoComplete', 'api': '{"AutoComplete": ["dataSource", "fields", "highlight", "placeholder"]}','sourceFiles' : [{ 'displayName': 'highlight.tsx', 'path':'src/auto-complete/highlight.tsx' },{ 'displayName': 'highlight.jsx', 'path':'src/auto-complete/highlight.jsx' },{ 'displayName': 'dataSource.json', 'path':'src/auto-complete/dataSource.json'}] },
{ 'path': 'auto-complete/custom-filtering', 'component':'CustomFiltering', 'name': 'Custom Filtering', 'description': 'This example demonstrates how to achieve the custom filtering functionalities in the React autocomplete component.', 'order': '01', 'category': 'AutoComplete', 'api': '{"AutoComplete": ["dataSource", "filtering", "fields", "placeholder"]}','sourceFiles' : [{ 'displayName': 'custom-filtering.tsx', 'path':'src/auto-complete/custom-filtering.tsx' },{ 'displayName': 'custom-filtering.jsx', 'path':'src/auto-complete/custom-filtering.jsx' },{ 'displayName': 'dataSource.json', 'path':'src/auto-complete/dataSource.json'}] },
{ 'path': 'auto-complete/diacritics-filtering', 'component':'DiacriticsFiltering', 'name': 'Diacritics Filtering', 'description': 'This example demonstrates how to achieve the diacritics filter functionalities in the React autocomplete component.', 'order': '01', 'category': 'AutoComplete', 'api': '{"AutoComplete": ["dataSource", "ignoreAccent", "placeholder"]}' ,'sourceFiles' : [{ 'displayName': 'diacritics-filtering.tsx', 'path':'src/auto-complete/diacritics-filtering.tsx' },{ 'displayName': 'diacritics-filtering.jsx', 'path':'src/auto-complete/diacritics-filtering.jsx' },{ 'displayName': 'dataSource.json', 'path':'src/auto-complete/dataSource.json'}]}

50
src/auto-complete/virtual-scroll-functional.tsx Normal file
Просмотреть файл

@ -0,0 +1,50 @@
/**
* AutoComplete Default functionality Sample
*/
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useEffect } from 'react';
import { updateSampleSection } from '../common/sample-base';
import { AutoCompleteComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
import './default.css';
import * as data from './dataSource.json';
const Default = () => {
useEffect(() => {
updateSampleSection();
}, [])
// define the array of string
let records: { [key: string]: Object }[] = [];
for (let i = 1; i <= 150; i++) {
const item: { [key: string]: Object } = {
id: 'id' + i,
text: `Item ${i}`,
};
records.push(item);
}
const fields: { [key: string]: string } = { text: 'text', value: 'text' };
return (
<div id='combodefault' className='control-pane'>
<div className='control-section'>
<div className='col-lg-12 control-wrappers'>
<div id='default'>
<AutoCompleteComponent id="datas" dataSource={records} placeholder="e.g. Item 1" enableVirtualization={true} fields={fields} popupHeight="200px">
<Inject services={[VirtualScroll]}/>
</AutoCompleteComponent>
</div>
</div>
</div>
<div id="action-description">
<p>This example demonstrates the virtualization support of the AutoComplete. The component has 150 items bound to it; however, when you open the suggestion list, only few items are loaded based on the popup height, and the remaining items are loaded while scrolling.</p>
</div>
<div id="description">
<p>The <code>AutoComplete</code> component supports virtualization, which improves UI performance for large amounts of data. To enable virtualization, set the <code>enableVirtualization</code> property to true. When virtualization is enabled, AutoComplete doesn't render the entire suggestion data source on initial component rendering. It loads the N number of items in the popup on initial rendering and the remaining set number of items will load while scrolling.
Virtualization works with both local and remote data.</p>
<p>To perform the virtualization feature in the AutoComplete, the <code>VirtualScroll</code> module has to be injected at the application level.</p>
</div>
</div>
);
}
export default Default;

11
src/auto-complete/virtual-scroll.css Normal file
Просмотреть файл

@ -0,0 +1,11 @@
#combodefault .col-lg-9 {
min-height: 250px;
}
#default {
margin: 0 auto;
width: 250px !important;
padding-top: 15px;
}
#filter-property .property-panel-content{
padding: 10px;
}

56
src/auto-complete/virtual-scroll.tsx Normal file
Просмотреть файл

@ -0,0 +1,56 @@
/**
* AutoComplete Default functionality Sample
*/
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { AutoCompleteComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
import { SampleBase } from '../common/sample-base';
import { PropertyPane } from '../common/property-pane';
import './default.css';
import * as data from './dataSource.json';
export class Default extends SampleBase<{}, {}> {
private listObj: AutoCompleteComponent;
// define the array of string
private records: { [key: string]: Object }[] = [];
constructor(props: {}) {
super(props);
for (let i: number = 1; i <= 150; i++) {
const item: { [key: string]: Object } = {
id: 'id' + i,
text: `Item ${i}`,
};
this.records.push(item);
}
}
private fields: object = { text: 'text', value: 'text' };
render() {
return (
<div id='combodefault' className='control-pane'>
<div className='control-section'>
<div className='col-lg-12 control-wrappers'>
<div id='default'>
<AutoCompleteComponent id="datas" dataSource={this.records} ref={(AutoComplete) => { this.listObj = AutoComplete }} placeholder="e.g. Item 1" enableVirtualization={true} fields={this.fields} popupHeight="200px">
<Inject services={[VirtualScroll]}/>
</AutoCompleteComponent>
</div>
</div>
</div>
<div id="action-description">
<p>This example demonstrates the virtualization support of the AutoComplete. The component has 150 items bound to it; however, when you open the suggestion list, only few items are loaded based on the popup height, and the remaining items are loaded while scrolling.</p>
</div>
<div id="description">
<p>The <code>AutoComplete</code> component supports virtualization, which improves UI performance for large amounts of data. To enable virtualization, set the <code>enableVirtualization</code> property to true. When virtualization is enabled, AutoComplete doesn't render the entire suggestion data source on initial component rendering. It loads the N number of items in the popup on initial rendering and the remaining set number of items will load while scrolling.
Virtualization works with both local and remote data.</p>
<p>To perform the virtualization feature in the AutoComplete, the <code>VirtualScroll</code> module has to be injected at the application level.</p>
</div>
</div>
);
}
}

2
src/avatar/badge-stack.json
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

2
src/avatar/card-stack.json
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

2
src/avatar/default-stack.json
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

2
src/avatar/listview-stack.json
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

2
src/avatar/types-stack.json
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

3
src/breadcrumb/bind-to-location-functional.tsx
Просмотреть файл

@ -11,6 +11,7 @@ const BindToLocation = () => {
useEffect(() => {
updateSampleSection();
}, [])
const btnClick= (): void => {
let breadcrumb, breadcrumbInst, breadcrumbs = document.querySelector('.content-wrapper').getElementsByClassName("e-breadcrumb");
for (let i = 0; i < breadcrumbs.length; i++) {
@ -19,6 +20,7 @@ const BindToLocation = () => {
breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;
}
}
const beforeItemRenderHandler = (args: BreadcrumbBeforeItemRenderEventArgs): void => {
var url = 'https://ej2.syncfusion.com/react/demos/#/bootstrap5/breadcrumb/bind-to-location', themeName = url.split('/')[6];
if (args.item.text == 'demos') {
@ -31,6 +33,7 @@ const BindToLocation = () => {
args.cancel = true;
}
}
return (
<div className='control-pane'>
<div className="col-lg-12 control-section">

1
src/bullet-chart/bar-customization-functional.tsx
Просмотреть файл

@ -146,6 +146,7 @@ function BulletChartBarCustomization() {
</div>
</ div>
)
function bulletLoad(args: IBulletLoadedEventArgs): void {
let chart: Element = document.getElementById('bar-customization');
chart.setAttribute('title', '');

4
src/button/progress-button-functional.tsx
Просмотреть файл

@ -57,7 +57,7 @@ const ProgressButton = () => {
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
<ProgressButtonComponent id="roundbtn" spinSettings={spinCenter} animationSettings={zoomOut} cssClass="e-round e-small e-success"
iconCss="e-btn-sb-icons e-progress-play-icon"></ProgressButtonComponent>
iconCss="e-btn-sb-icons e-play-icon"></ProgressButtonComponent>
</div>
<div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
@ -140,4 +140,4 @@ const ProgressButton = () => {
)
}
export default ProgressButton;
export default ProgressButton;

18
src/button/progress-button.css
Просмотреть файл

@ -24,14 +24,14 @@
display: none;
}
.material3 #roundbtn .e-progress-play-icon,
.material3-dark #roundbtn .e-progress-play-icon {
.material3 #roundbtn .e-play-icon,
.material3-dark #roundbtn .e-play-icon {
margin-top: -4px;
margin-left: 2px;
}
.e-bigger .material3 #roundbtn .e-progress-play-icon,
.e-bigger .material3-dark #roundbtn .e-progress-play-icon {
.e-bigger .material3 #roundbtn .e-play-icon,
.e-bigger .material3-dark #roundbtn .e-play-icon {
margin-top: -4px;
margin-left: 2px;
}
@ -40,9 +40,9 @@
transition: all .3s cubic-bezier(.175, .885, .32, 1) 100ms;
}
.fabric #roundbtn .e-progress-play-icon,
.bootstrap #roundbtn .e-progress-play-icon,
.highcontrast #roundbtn .e-progress-play-icon {
.fabric #roundbtn .e-play-icon,
.bootstrap #roundbtn .e-play-icon,
.highcontrast #roundbtn .e-play-icon {
margin-top: -2px;
}
@ -65,12 +65,12 @@
-moz-osx-font-smoothing: grayscale;
}
.e-btn-sb-icons.e-progress-play-icon::before {
.e-btn-sb-icons.e-play-icon::before {
content: '\e701';
font-size: 12px;
}
.e-bigger .e-btn-sb-icons.e-progress-play-icon::before {
.e-bigger .e-btn-sb-icons.e-play-icon::before {
font-size: 14px;
}

4
src/button/progress-button.tsx
Просмотреть файл

@ -56,7 +56,7 @@ export class ProgressButton extends SampleBase<{}, {}> {
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
<ProgressButtonComponent id="roundbtn" spinSettings={this.spinCenter} animationSettings={this.zoomOut} cssClass="e-round e-small e-success"
iconCss="e-btn-sb-icons e-progress-play-icon"></ProgressButtonComponent>
iconCss="e-btn-sb-icons e-play-icon"></ProgressButtonComponent>
</div>
<div className="col-xs-12 col-sm-12 col-lg-6 col-md-6">
@ -138,4 +138,4 @@ export class ProgressButton extends SampleBase<{}, {}> {
</div>
)
}
}
}

2
src/card/basic-stack.json
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

2
src/card/flip-stack.json
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

2
src/card/horizontal-stack.json
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

2
src/card/reveal-stack.json
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

2
src/card/swipeable-stack.json
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

2
src/card/tile-stack.json
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

2
src/card/vertical-stack.json
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

16
src/carousel/config.tsx
Просмотреть файл

@ -1,9 +1,19 @@
export const CarouselSampleOrder: Object = [
{ 'path': 'carousel/default', 'component': 'Default', 'name': 'Default Functionalities', 'description': 'This example demonstrates the simple slide show of images using Syncfusion React Carousel component.', 'order': '01', 'category': 'Carousel', 'api': '{ "Carousel":["items"], "CarouselItem": ["template"] }' },
{ 'path': 'carousel/data-binding', 'component': 'DataBinding', 'name': 'Data Binding', 'description': 'This example demonstrates how to bind data and customize them by using dataSource and templates to the Syncfusion React Carousel component.', 'order': '01', 'category': 'Carousel', 'api': '{ "Carousel":["dataSource", "itemTemplate", "buttonsVisibility", "animationEffect"] }' },
{ 'path': 'carousel/templates', 'component': 'Templates', 'name': 'Templates', 'description': 'This example demonstrates the specification details of iPhone 13 using template options available in Carousel component.', 'order': '01', 'category': 'Carousel', 'api': '{"Carousel":["arrowsTemplate", "playButtonTemplate", "indicatorsTemplate", "showPlayButton", "buttonsVisibility", "animationEffect"], "CarouselItem": ["template"] }' },
{ 'path': 'carousel/templates', 'component': 'Templates', 'name': 'Templates', 'description': 'This example demonstrates the specification details of iPhone 13 using template options available in Carousel component.', 'order': '01', 'category': 'Carousel', 'api': '{"Carousel":["arrowsTemplate", "playButtonTemplate", "indicatorsTemplate", "showPlayButton", "buttonsVisibility", "animationEffect"], "CarouselItem": ["template"] }',
'sourceFiles': [
{ 'displayName': 'templates.tsx', 'path': 'src/carousel/templates.tsx' },
{ 'displayName': 'templates.jsx', 'path': 'src/carousel/templates.jsx' },
{ 'displayName': 'templates.css', 'path': 'src/carousel/templates.css' }
] },
{ 'path': 'carousel/partial-visible', 'component': 'PartialVisible', 'name': 'Partial Visible', 'description': 'This example demonstrates the simple slide show of images using Syncfusion React Carousel component.', 'order': '01', 'category': 'Carousel', 'api': '{ "Carousel":["items","partialVisible"], "CarouselItem": ["template"] }' },
{ 'path': 'carousel/indicator-type', 'component': 'IndicatorType', 'name': 'Indicator Type','type':'new', 'description': 'This example showcases the available indicator types and its functionalities in Syncfusion React Carousel component.', 'order': '01', 'category': 'Carousel', 'api': '{ "Carousel":["items","indicatorsType"] }' },
{ 'path': 'carousel/indicator-type', 'component': 'IndicatorType', 'name': 'Indicator Type', 'description': 'This example showcases the available indicator types and its functionalities in Syncfusion React Carousel component.', 'order': '01', 'category': 'Carousel', 'api': '{ "Carousel":["items","indicatorsType"] }',
'sourceFiles': [
{ 'displayName': 'indicator-type.tsx', 'path': 'src/carousel/indicator-type.tsx' },
{ 'displayName': 'indicator-type.jsx', 'path': 'src/carousel/indicator-type.jsx' },
{ 'displayName': 'indicator-type.css', 'path': 'src/carousel/indicator-type.css' }
] },
{ 'path': 'carousel/keyboard-navigation', 'component': 'KeyboardNavigation', 'name': 'Keyboard Navigation', 'description': 'This example explains the key combinations used to perform various actions in Syncfusion React Carousel component.', 'order': '01', 'category': 'Carousel', 'api': '{ "Carousel":["showPlayButton"]}' },
{ 'path': 'carousel/api', 'component': 'API', 'name': 'API', 'description': 'This example showcase the available APIs and its functionalities in Syncfusion React Carousel component.', 'order': '01', 'category': 'Carousel', 'api': '{ "Carousel":["showIndicators", "showIndicators", "interval", "autoPlay", "showPlayButton", "buttonsVisibility", "loop"] }' }
]
]

22
src/carousel/keyboard-navigation-functional.tsx
Просмотреть файл

@ -6,19 +6,15 @@ import { updateSampleSection } from '../common/sample-base';
import './keyboard-navigation.css';
const KeyboardNavigation = () => {
useEffect(() => {
updateSampleSection();
}, [])
const renderComplete = (): void => {
document.body.addEventListener('keydown', function (e) {
var carouselElement: HTMLElement = document.querySelector('.e-carousel');
if (e.altKey && e.keyCode === 74 && carouselElement) {
console.log('rer');
carouselElement.focus();
}
});
}
useEffect(() => {
updateSampleSection();
document.body.addEventListener("keydown", function (e) {
var carouselElement: HTMLElement = document.querySelector(".e-carousel");
if (e.altKey && e.keyCode === 74 && carouselElement) {
carouselElement.focus();
}
});
}, []);
const itemTemplate1 = () => {
return (

3
src/carousel/keyboard-navigation.tsx
Просмотреть файл

@ -6,11 +6,10 @@ import './keyboard-navigation.css';
export class KeyboardNavigation extends SampleBase<{}, {}> {
public renderComplete(): void {
public componentDidMount(): void {
document.body.addEventListener('keydown', function (e) {
var carouselElement: HTMLElement = document.querySelector('.e-carousel');
if (e.altKey && e.keyCode === 74 && carouselElement) {
console.log('rer');
carouselElement.focus();
}
});

170
src/chart/adindicator-functional.tsx
Просмотреть файл

@ -1,86 +1,86 @@
/**
* Sample for ADI Indicator
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, StripLineDirective, Crosshair, LineSeries, AccumulationDistributionIndicator, IAxisLabelRenderEventArgs, StripLine, ChartTheme, IndicatorsDirective, IndicatorDirective, StripLinesDirective, Legend } from '@syncfusion/ej2-react-charts';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
.charts {
align :center
}`;
/**
* AccumulationDistribution sample
*/
const AccumulationDistribution = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
const axisLableRender = (args: IAxisLabelRenderEventArgs): void => {
if (args.axis.name === 'secondary') {
let value: number = Number(args.text) / 1000000000;
args.text = String(value) + 'B';
}
}
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', majorGridLines: { width: 0 }, zoomFactor: 0.2, zoomPosition: 0.6, crosshairTooltip: { enable: true } }} primaryYAxis={{ title: 'Price', labelFormat: '${value}', minimum: 50, maximum: 170, plotOffset: 25, interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 } }} tooltip={{ enable: true, shared: true }} crosshair={{ enable: true, lineType: 'Vertical' }} axisLabelRender={axisLableRender.bind(this)} chartArea={{ border: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} zoomSettings={{ enableSelectionZooming: true, mode: 'X', enablePan: true }} title='AAPL Stock Price 2012-2017'legendSettings={{visible: false}} loaded={onChartLoad.bind(this)}>
<Inject services={[CandleSeries, Category, Tooltip,Legend, StripLine, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, AccumulationDistributionIndicator]} />
<RowsDirective>
<RowDirective height={'40%'} />
<RowDirective height={'60%'} />
</RowsDirective>
<AxesDirective>
<AxisDirective rowIndex={0} name='secondary' opposedPosition={true} majorGridLines={{ width: 0 }} majorTickLines={{ width: 0 }} minimum={-7000000000} maximum={5000000000} interval={6000000000} title='Accumulation Distribution' lineStyle={{ width: 0 }}>
<StripLinesDirective>
<StripLineDirective start={-7000000000} end={6000000000} text='' color='#6063ff' visible={true} opacity={0.1} zIndex={'Behind'} />
</StripLinesDirective>
</AxisDirective>
</AxesDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartValues} width={2} xName='period' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={{ enable: true }} />
</SeriesCollectionDirective>
<IndicatorsDirective>
<IndicatorDirective type='AccumulationDistribution' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff' period={3} animation={{ enable: true }} />
</IndicatorsDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates a chart with candle series and an accumulation distribution indicator. The trackball shows information about the stock rates and signal values each day.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure an accumulation distribution indicator. This uses volume and price to identify whether stock is accumulated or distributed. It also identifies divergences between the stock price and volume flow.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Accumulation Distribution Indicator, we need to inject
<code>AccumulationDistributionIndicator</code> module into <code>services</code>.
</p>
<p>
More information on the Accumulation Distribution Indicator can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/technical-indicators/#accumulation-distribution">documentation section</a>.
</p>
</div>
</div >
)
}
/**
* Sample for ADI Indicator
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, StripLineDirective, Crosshair, LineSeries, AccumulationDistributionIndicator, IAxisLabelRenderEventArgs, StripLine, ChartTheme, IndicatorsDirective, IndicatorDirective, StripLinesDirective, Legend } from '@syncfusion/ej2-react-charts';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
.charts {
align :center
}`;
/**
* AccumulationDistribution sample
*/
const AccumulationDistribution = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
const axisLableRender = (args: IAxisLabelRenderEventArgs): void => {
if (args.axis.name === 'secondary') {
let value: number = Number(args.text) / 1000000000;
args.text = String(value) + 'B';
}
}
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', majorGridLines: { width: 0 }, zoomFactor: 0.2, zoomPosition: 0.6, crosshairTooltip: { enable: true } }} primaryYAxis={{ title: 'Price', labelFormat: '${value}', minimum: 50, maximum: 170, plotOffset: 25, interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 } }} tooltip={{ enable: true, shared: true }} crosshair={{ enable: true, lineType: 'Vertical' }} axisLabelRender={axisLableRender.bind(this)} chartArea={{ border: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} zoomSettings={{ enableSelectionZooming: true, mode: 'X', enablePan: true }} title='AAPL Stock Price 2012-2017'legendSettings={{visible: false}} loaded={onChartLoad.bind(this)}>
<Inject services={[CandleSeries, Category, Tooltip,Legend, StripLine, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, AccumulationDistributionIndicator]} />
<RowsDirective>
<RowDirective height={'40%'} />
<RowDirective height={'60%'} />
</RowsDirective>
<AxesDirective>
<AxisDirective rowIndex={0} name='secondary' opposedPosition={true} majorGridLines={{ width: 0 }} majorTickLines={{ width: 0 }} minimum={-7000000000} maximum={5000000000} interval={6000000000} title='Accumulation Distribution' lineStyle={{ width: 0 }}>
<StripLinesDirective>
<StripLineDirective start={-7000000000} end={6000000000} text='' color='#6063ff' visible={true} opacity={0.1} zIndex={'Behind'} />
</StripLinesDirective>
</AxisDirective>
</AxesDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartValues} width={2} xName='period' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={{ enable: true }} />
</SeriesCollectionDirective>
<IndicatorsDirective>
<IndicatorDirective type='AccumulationDistribution' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff' period={3} animation={{ enable: true }} />
</IndicatorsDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates a chart with candle series and an accumulation distribution indicator. The trackball shows information about the stock rates and signal values each day.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure an accumulation distribution indicator. This uses volume and price to identify whether stock is accumulated or distributed. It also identifies divergences between the stock price and volume flow.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Accumulation Distribution Indicator, we need to inject
<code>AccumulationDistributionIndicator</code> module into <code>services</code>.
</p>
<p>
More information on the Accumulation Distribution Indicator can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/technical-indicators/#accumulation-distribution">documentation section</a>.
</p>
</div>
</div >
)
}
export default AccumulationDistribution;

6
src/chart/adindicator.tsx
Просмотреть файл

@ -102,13 +102,13 @@ export class AccumulationDistribution extends SampleBase<{}, {}> {
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Accumulation Distribution Indicator, we need to inject
Chart component features are segregated into individual feature-wise modules. To use Accumulation Distribution Indicator, we need to inject
<code>AccumulationDistributionIndicator</code> module into <code>services</code>.
</p>
<p>
More information on the Accumulation Distribution Indicator can be found in this &nbsp;
<a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
</p>
</p>
</div>
</div >
)
@ -122,7 +122,7 @@ export class AccumulationDistribution extends SampleBase<{}, {}> {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};

740
src/chart/annotation-functional.tsx
Просмотреть файл

@ -1,371 +1,371 @@
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { chartDatas } from './financial-data';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StackingColumnSeries, Category, Legend, ILoadedEventArgs, Selection, IMouseEventArgs, IAccLoadedEventArgs, ChartAnnotation, AccumulationChart, AccumulationDataLabel, IAnimationCompleteEventArgs, AccumulationTheme, ChartTheme, AnnotationsDirective, AnnotationDirective, Series, AreaSeries, IAxisLabelRenderEventArgs, Tooltip } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
AccumulationChart.Inject(AccumulationDataLabel);
const SAMPLE_CSS = `
#dark-gradient-chart stop {
stop-color: rgb(247, 206, 105);
}
#gradient-chart stop {
stop-color: rgb(247, 206, 105, 0.5);
}
.chart-gradient stop[offset="0"] {
stop-opacity: 0.9;
}
.chart-gradient stop[offset="1"] {
stop-opacity: 0.3;
}
div[id*=_Annotation_3] {
transform: translate(0%, -50%) !important;
}
ellipse[id*=_Trackball_0] {
fill: rgb(247, 206, 105) !important;
stroke: rgb(247, 206, 105,0.5) !important;
}
ellipse[id*=_Trackball_1] {
fill: rgb(247, 206, 105) !important;
stroke-width: 1 !important;
stroke: white !important;
}
.e-view.highcontrast .box-bottom,.e-view.tailwind .box-bottom, .e-view.fluent .box-bottom,.e-view.material .box-bottom, .e-view.bootstrap .box-bottom,.e-view.bootstrap5 .box-bottom,.e-view.bootstrap4 .box-bottom, .e-view.fabric .box-bottom,.e-view.highcontrast .first-box-bottom,
.e-view.tailwind .first-box-bottom, .e-view.fluent .first-box-bottom,.e-view.material .first-box-bottom,.e-view.bootstrap .first-box-bottom, .e-view.bootstrap5 .first-box-bottom, .e-view.bootstrap4 .first-box-bottom ,.e-view.fabric .first-box-bottom, .e-view.highcontrast .first-box-bottom,
.e-view.tailwind .first-box-bottom, .e-view.fluent .second-box-bottom,.e-view.material .second-box-bottom,.e-view.bootstrap .second-box-bottom, .e-view.bootstrap5 .second-box-bottom,.e-view.bootstrap4 .second-box-bottom, .e-view.fabric .second-box-bottom, .e-view.highcontrast .third-box-bottom,
.e-view.tailwind .first-box-bottom, .e-view.fluent .third-box-bottom,.e-view.material .third-box-bottom,.e-view.bootstrap .third-box-bottom,.e-view.bootstrap5 .third-box-bottom,.e-view.bootstrap4 .third-box-bottom,.e-view.fabric .third-box-bottom,.e-view.highcontrast .box-left,
.e-view.material .first-box-bottom,.e-view.tailwind .first-box-bottom, .e-view.fluent .box-left,.e-view.bootstrap .box-left, .e-view.bootstrap5 .box-left, .e-view.bootstrap4 .box-left,.e-view.fabric .box-left,.e-view.material3 .box-bottom, .e-view.material3 .first-box-bottom , .e-view.material3 .second-box-bottom,.e-view.material3 .third-box-bottom, .e-view.material3 .box-left {
position: relative;
background: #fdf7e7;
border: 1.5px solid black;
padding: 2px 3px 2px 3px;
border-radius: 0.2em;
font-size: 12px;
color: 'black'
}
.e-view.highcontrast .box-bottom,.e-view.material-dark .box-bottom,.e-view.tailwind-dark .box-bottom, .e-view.fluent-dark .box-bottom, .e-view.bootstrap-dark .box-bottom,.e-view.bootstrap5-dark .box-bottom,.e-view.fabric-dark .box-bottom,.e-view.highcontrast .first-box-bottom,
.e-view.material-dark .first-box-bottom,.e-view.tailwind-dark .first-box-bottom, .e-view.fluent-dark .first-box-bottom,.e-view.bootstrap-dark .first-box-bottom, .e-view.bootstrap5-dark .first-box-bottom ,.e-view.fabric-dark .first-box-bottom, .e-view.highcontrast .second-box-bottom,
.e-view.material-dark .second-box-bottom, .e-view.fluent-dark .second-box-bottom,.e-view.bootstrap-dark .second-box-bottom, .e-view.bootstrap5-dark .second-box-bottom, .e-view.fabric-dark .second-box-bottom, .e-view.highcontrast .third-box-bottom,
.e-view.material-dark .third-box-bottom, .e-view.fluent-dark .third-box-bottom,.e-view.bootstrap-dark .third-box-bottom,.e-view.bootstrap5-dark .third-box-bottom,.e-view.fabric-dark .third-box-bottom,.e-view.highcontrast .box-left,
.e-view.material-dark .box-left, .e-view.fluent-dark .box-left,.e-view.bootstrap-dark .box-left, .e-view.bootstrap5-dark .box-left, .e-view.fabric-dark .box-left,.e-view.material3-dark .box-bottom, .e-view.material3-dark .first-box-bottom , .e-view.material3-dark .second-box-bottom,.e-view.material3-dark .third-box-bottom, .e-view.material3-dark .box-left{
position: relative;
background: black;
border: 1.5px solid black;
padding: 2px 3px 2px 3px;
border-radius: 0.2em;
font-size: 12px;
color: 'white'
}
.box-bottom:after, .box-bottom:before, .first-box-bottom:after, .first-box-bottom:before,
.second-box-bottom:after, .second-box-bottom:before, .third-box-bottom:after, .third-box-bottom:before {
bottom: 100%;
border: solid transparent;
content: "";
position: absolute;
}
.e-view.highcontrast .box-bottom:after, .e-view.tailwind .box-bottom:after,.e-view.fluent .box-bottom:after,.e-view.material .box-bottom:after,.e-view.bootstrap .box-bottom:after,.e-view.bootstrap5 .box-bottom:after, .e-view.bootstrap4 .box-bottom:after, .e-view.fabric .box-bottom:after, .e-view.material3 .box-bottom:after {
border-color: transparent;
border-width: 6.2px;
left: 50%;
margin-left: -6.1px;
margin-bottom: -1px;
border-bottom-color: #fdf7e7;
}
.e-view.highcontrast .box-bottom:after,.e-view.tailwind-dark .box-bottom:after,.e-view.fluent-dark .box-bottom:after,.e-view.material-dark .box-bottom:after,.e-view.bootstrap-dark .box-bottom:after,.e-view.bootstrap5-dark .box-bottom:after, .e-view.bootstrap4-dark .box-bottom:after, .e-view.fabric-dark .box-bottom:after, .e-view.material3-dark .box-bottom:after {
border-color: transparent;
border-width: 6.2px;
left: 50%;
margin-left: -6.1px;
margin-bottom: -1px;
border-bottom-color: black;
}
.box-bottom:before {
border-color: transparent;
border-bottom-color: black;
border-width: 7px;
left: 50%;
margin-left: -7px;
margin-bottom: 0.5px;
}
.e-view.highcontrast .first-box-bottom:after,.e-view.tailwind .first-box-bottom:after,.e-view.fluent .first-box-bottom:after,.e-view.material .first-box-bottom:after,.e-view.bootstrap .first-box-bottom:after,.e-view.bootstrap5 .first-box-bottom:after,.e-view.bootstrap4 .first-box-bottom:after, .e-view.fabric .first-box-bottom:after, .e-view.material3 .first-box-bottom:after {
border-color: transparent;
border-width: 6.2px;
left: 50%;
margin-left: -6.1px;
margin-bottom: -1px;
border-bottom-color: #fdf7e7;
}
.e-view.highcontrast .first-box-bottom:after,.e-view.tailwind-dark .first-box-bottom:after,.e-view.fluent-dark .first-box-bottom:after,.e-view.material-dark .first-box-bottom:after,.e-view.bootstrap-dark .first-box-bottom:after,.e-view.bootstrap5-dark .first-box-bottom:after,.e-view.bootstrap4-dark .first-box-bottom:after, .e-view.fabric-dark .first-box-bottom:after, .e-view.material3-dark .first-box-bottom:after {
border-color: transparent;
border-width: 6.2px;
left: 50%;
margin-left: -6.1px;
margin-bottom: -1px;
border-bottom-color: black;
}
.first-box-bottom:before {
border-color: transparent;
border-bottom-color: black;
border-width: 7px;
left: 50%;
margin-left: -7px;
margin-bottom: 0.5px;
}
.e-view.highcontrast .second-box-bottom:after,.e-view.tailwind .second-box-bottom:after,.e-view.fluent .second-box-bottom:after,.e-view.material .second-box-bottom:after, .e-view.bootstrap .second-box-bottom:after, .e-view.bootstrap5 .second-box-bottom:after,.e-view.bootstrap4 .second-box-bottom:after, .e-view.fabric .second-box-bottom:after, .e-view.material3 .second-box-bottom:after {
border-color: transparent;
border-width: 6.2px;
left: 50%;
margin-left: -6.3px;
margin-bottom: -1px;
border-bottom-color: #fdf7e7;
}
.e-view.highcontrast .second-box-bottom:after,.e-view.tailwind-dark .second-box-bottom:after,.e-view.fluent-dark .second-box-bottom:after,.e-view.material-dark .second-box-bottom:after, .e-view.bootstrap-dark .second-box-bottom:after, .e-view.bootstrap5-dark .second-box-bottom:after,.e-view.bootstrap4-dark .second-box-bottom:after, .e-view.fabric-dark .second-box-bottom:after, .e-view.material3-dark .second-box-bottom:after {
border-color: transparent;
border-width: 6.2px;
left: 50%;
margin-left: -6.3px;
margin-bottom: -1px;
border-bottom-color: black;
}
.second-box-bottom:before {
border-color: transparent;
border-bottom-color: black;
border-width: 7px;
left: 50%;
margin-left: -7px;
margin-bottom: 0.5px;
}
.e-view.highcontrast .third-box-bottom:after,.e-view.tailwind .third-box-bottom:after ,.e-view.fluent .third-box-bottom:after ,.e-view.material .third-box-bottom:after ,.e-view.bootstrap .third-box-bottom:after ,.e-view.bootstrap5 .third-box-bottom:after , .e-view.bootstrap4 .third-box-bottom:after , .e-view.fabric .third-box-bottom:after,.e-view.material3 .third-box-bottom:after {
border-color: transparent;
border-width: 6px;
left: 50%;
margin-left: -6px;
margin-bottom: -1px;
border-bottom-color: #fdf7e7;
}
.e-view.highcontrast .third-box-bottom:after ,.e-view.tailwind-dark .third-box-bottom:after ,.e-view.fluent-dark .third-box-bottom:after ,.e-view.material-dark .third-box-bottom:after ,.e-view.bootstrap-dark .third-box-bottom:after ,.e-view.bootstrap5-dark .third-box-bottom:after , .e-view.bootstrap4-dark .third-box-bottom:after , .e-view.fabric-dark .third-box-bottom:after, .e-view.material3-dark .third-box-bottom:after {
border-color: transparent;
border-width: 6px;
left: 50%;
margin-left: -6px;
margin-bottom: -1px;
border-bottom-color: black;
}
.third-box-bottom:before {
border-color: transparent;
border-bottom-color: black;
border-width: 6px;
left: 50%;
margin-left: -6px;
margin-bottom: 1px;
}
.box-left:after, .box-left:before {
right: 100%;
top: 18%;
border: solid transparent;
content: "";
position: absolute;
}
.e-view.highcontrast .box-left:after,.e-view.tailwind .box-left:after,.e-view.fluent .box-left:after,.e-view.material .box-left:after,.e-view.bootstrap .box-left:after,.e-view.bootstrap5 .box-left:after, .e-view.bootstrap4 .box-left:after, .e-view.fabric .box-left:after, .e-view.material3 .box-left:after {
border-color: transparent;
border-width: 6.5px;
margin-right: -1px;
border-right-color: #fdf7e7;
}
.e-view.highcontrast .box-left:after,.e-view.tailwind-dark .box-left:after,.e-view.fluent-dark .box-left:after,.e-view.material-dark .box-left:after,.e-view.bootstrap-dark .box-left:after,.e-view.bootstrap5-dark .box-left:after, .e-view.bootstrap4-dark .box-left:after, .e-view.fabric-dark .box-left:after, .e-view.material3-dark .box-left:after {
border-color: transparent;
border-width: 6.5px;
margin-right: -1px;
border-right-color: black;
}
.box-left:before {
border-color: transparent;
border-right-color: black;
border-width: 6.2px;
margin-right: 1px;
}
.e-view.highcontrast .box-top,.e-view.tailwind .box-top,.e-view.fluent .box-top,.e-view.material .box-top,.e-view.bootstrap .box-top,.e-view.bootstrap5 .box-top ,.e-view.bootstrap4 .box-top , .e-view.fabric .box-top,
.e-view.highcontrast .box-top-left,.e-view.tailwind .box-top,.e-view.fluent .box-top-left,.e-view.material .box-top-left,.e-view.bootstrap .box-top-left,.e-view.bootstrap5 .box-top-left, .e-view.bootstrap4 .box-top-left, .e-view.fabric .box-top-left,.e-view.material3 .box-top, .e-view.material3 .box-top-left {
position: relative;
color: white;
background: black;
border: 1.5px solid black;
padding: 2px 3px 2px 3px;
border-radius: 0.2em;
font-size: 12px;
color: white;
}
.e-view.highcontrast .box-top,.e-view.tailwind-dark .box-top,.e-view.fluent-dark .box-top,.e-view.material-dark .box-top,.e-view.bootstrap-dark .box-top,.e-view.bootstrap5-dark .box-top ,.e-view.bootstrap4-dark .box-top , .e-view.fabric-dark .box-top,
.e-view.highcontrast .box-top-left,.e-view.tailwind-dark .box-top,.e-view.fluent-dark .box-top-left,.e-view.material-dark .box-top-left,.e-view.bootstrap-dark .box-top-left,.e-view.bootstrap5-dark .box-top-left, .e-view.bootstrap4-dark .box-top-left, .e-view.fabric-dark .box-top-left, .e-view.material3-dark .box-top, .e-view.material3-dark .box-top-left {
position: relative;
color: white;
background: #fdf7e7;
border: 1.5px solid black;
padding: 2px 3px 2px 3px;
border-radius: 0.2em;
font-size: 12px;
color: black;
}
.box-top:after, .box-top:before, .box-top-left:after, .box-top-left:before {
top: 100%;
border: solid transparent;
content: "";
position: absolute;
}
.e-view.highcontrast .box-top:after,.e-view.tailwind .box-top:after,.e-view.fluent .box-top:after,.e-view.material .box-top:after, .e-view.bootstrap .box-top:after, .e-view.bootstrap5 .box-top:after, .e-view.bootstrap4 .box-top:after, .e-view.fabric .box-top:after,.e-view.material3 .box-top:after {
border-color: transparent;
border-width: 7.5px;
border-top-color:black;
right: 50%;
margin-right: -7.5px;
margin-top: -1.5px;
}
.e-view.highcontrast .box-top:after,.e-view.tailwind-dark .box-top:after,.e-view.fluent-dark .box-top:after,.e-view.material-dark .box-top:after, .e-view.bootstrap-dark .box-top:after, .e-view.bootstrap5-dark .box-top:after, .e-view.bootstrap4-dark .box-top:after, .e-view.fabric-dark .box-top:after,.e-view.material3-dark .box-top:after {
border-color: transparent;
border-width: 7.5px;
border-top-color: #fdf7e7;
right: 50%;
margin-right: -7.5px;
margin-top: -1.5px;
}
.e-view.highcontrast .box-top:before, .e-view.tailwind .box-top:before,.e-view.fluent .box-top:before,.e-view.material .box-top:before,.e-view.bootstrap .box-top:before,.e-view.bootstrap5 .box-top:before,.e-view.bootstrap4 .box-top:before , .e-view.fabric .box-top:before, .e-view.material3 .box-top:before {
border-color: transparent;
border-top-color:black;
border-width: 8px;
right: 50%;
margin-right: -8px;
}
.e-view.highcontrast .box-top:before,.e-view.tailwind-dark .box-top:before,.e-view.fluent-dark .box-top:before,.e-view.material-dark .box-top:before,.e-view.bootstrap-dark .box-top:before,.e-view.bootstrap5-dark .box-top:before,.e-view.bootstrap4-dark .box-top:before , .e-view.fabric-dark .box-top:before ,.e-view.material3-dark .box-top:before{
border-color: transparent;
border-top-color:#fdf7e7;
border-width: 8px;
right: 50%;
margin-right: -8px;
}
.e-view.highcontrast .box-top-left:after,.e-view.tailwind .box-top-left:after,.e-view.fluent .box-top-left:after,.e-view.material .box-top-left:after,.e-view.bootstrap .box-top-left:after,.e-view.bootstrap5 .box-top-left:after,.e-view.bootstrap4 .box-top-left:after, .e-view.fabric .box-top-left:after, .e-view.material3 .box-top-left:after{
border-color: transparent;
border-width: 7.5px;
border-top-color: black;
right: 20%;
margin-right: -7.5px;
margin-bottom: -1.5px;
}
.e-view.highcontrast .box-top-left:after,.e-view.tailwind-dark .box-top-left:after,.e-view.fluent-dark .box-top-left:after,.e-view.material-dark .box-top-left:after,.e-view.bootstrap-dark .box-top-left:after,.e-view.bootstrap5-dark .box-top-left:after,.e-view.bootstrap4-dark .box-top-left:after, .e-view.fabric-dark .box-top-left:after,.e-view.material3-dark .box-top-left:after{
border-color: transparent;
border-width: 7.5px;
border-top-color: #fdf7e7;
right: 20%;
margin-right: -7.5px;
margin-bottom: -1.5px;
}
.e-view.highcontrast .box-top-left:before,.e-view.tailwind .box-top-left:before,.e-view.fluent .box-top-left:before,.e-view.material .box-top-left:before,.e-view.bootstrap .box-top-left:before,.e-view.bootstrap5 .box-top-left:before, .e-view.bootstrap4 .box-top-left:before , .e-view.fabric .box-top-left:before, .e-view.material3 .box-top-left:before {
border-color: transparent;
border-top-color: black;
border-width: 8px;
right: 20%;
margin-right: -8px;
}
.e-view.highcontrast .box-top-left:before,.e-view.tailwind-dark .box-top-left:before,.e-view.fluent-dark .box-top-left:before,.e-view.material-dark .box-top-left:before,.e-view.bootstrap-dark .box-top-left:before,.e-view.bootstrap5-dark .box-top-left:before, .e-view.bootstrap4-dark .box-top-left:before , .e-view.fabric-dark .box-top-left:before,.e-view.material3-dark .box-top-left:before {
border-color: transparent;
border-top-color: #fdf7e7;
border-width: 8px;
right: 20%;
margin-right: -8px;
}`;
/**
* Sample for annotation
*/
const Annotation = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
if ( args.chart.theme.includes('Dark') || args.chart.theme.includes('highcontrast')) {
args.chart.series[0].fill = "url(#dark-gradient-chart)";
}
else {
args.chart.series[0].fill = "url(#gradient-chart)";
}
};
const axisLabelRender = (args: IAxisLabelRenderEventArgs): void => {
if (args.axis.name === 'primaryXAxis') {
args.text = args.text + 'KM';
}
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ title: 'Distance', labelFormat: 'N2', majorGridLines: {width : 0}, minimum: 0.00, maximum: 4.00 }} chartArea={{ border: { width: 0 } }} primaryYAxis={{ title: 'Speed (KM/H)', lineStyle: { width: 0 }, minimum: 50, maximum: 400, majorTickLines: { width: 0 } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} animationComplete={onChartLoad.bind(this)} axisLabelRender={axisLabelRender.bind(this)} selectionMode='Cluster' tooltip={{ enable : true, shared: true, header: " ", enableMarker: false, format: "Distance: ${point.x} KM <br> ${point.y} KM/H", fill: "white", border:{color:"rgb(247, 206, 105)", width: 2},textStyle:{color:"black"} }} selectedDataIndexes={[{ series: 0, point: 0 }]} legendSettings={{ visible: true, toggleVisibility: false }} title="Speed Data Plot for Interlagos Circuit">
<Inject services={[StackingColumnSeries, Category, Legend,Tooltip, Selection, ChartAnnotation, AreaSeries]} />
<AnnotationsDirective>
<AnnotationDirective content= '<div class="first-box-bottom" > Senna S </div>' x='0.360' y='80' coordinateUnits='Point' />
<AnnotationDirective content='<div class="second-box-bottom" > Descida do Lego </div>' x='1.400' y='130' coordinateUnits='Point' />
<AnnotationDirective content='<div class="third-box-bottom" > Ferradura </div>' x='2.100' y='200' coordinateUnits='Point' />
<AnnotationDirective content='<div class="box-left" > Curva do Sol </div>' x='0.85' y='155' coordinateUnits='Point' />
<AnnotationDirective content='<div class="box-top-left" > Reta Oposta </div>' x='0.700' y='292' coordinateUnits='Point' />
<AnnotationDirective content='<div class="box-bottom" > Bico de Pato </div>' x='2.750' y='80' coordinateUnits='Point' />
<AnnotationDirective content='<div class="box-top" > Mergulho </div>' x='3.136' y='284' coordinateUnits='Point' />
<AnnotationDirective content= { Browser.isDevice ? '' : '<div class="third-box-bottom" > Junção </div>'} x='3.270' y='98' coordinateUnits='Point' />
<AnnotationDirective content= { Browser.isDevice ? '' : '<div class="box-top" > Subida dos <br /> Boxes </div>'} x='3.800' y='312' coordinateUnits='Point' />
<AnnotationDirective content= { Browser.isDevice ? '' :'<div style="font-family: sans-serif" > Max, accelertion <br /> 5.00 g at 5th gear </div>'} x='1.65' y='300' coordinateUnits='Point' />
<AnnotationDirective content= { Browser.isDevice ? '' :'<div style="font-family: sans-serif" > Max, accelertion <br /> 4.58 g at 5th gear </div>'} x='2.60' y='250' coordinateUnits='Point' />
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartDatas} type= 'Area' xName='Distance' yName='Speed' border = {{ width: 2.5, color: '#000000' }} animation = {{ enable: true }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<svg style={{height: '0'}}>
<defs>
<linearGradient id="gradient-chart" style={{opacity:' 0.75'}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="gradient-chart" style={{opacity: '0.75'}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="dark-gradient-chart" style={{opacity: '0.75'}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="dark-gradient-chart" style={{opacity: '0.75'}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
</defs>
</svg>
<div id="action-description">
<p>This sample illustrates speed data for the Interlagos circuit. In area-based series, data points can be annotated using symbols.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure annotation feature in chart. We have used a pie chart to depict the sales for each year using annotation support,
while selecting a particular year from the StackedColumn series, the respective data's are showed in pie. An annotation can hold any html element as its content, here we have added the Pie chart as its content.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use annotation feature in chart, we need to inject
<code>ChartAnnotation</code> module into <code>services</code>.
</p>
<p>
More information on the chart annotation can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/chart-annotations/">documentation section</a>.
</p>
</div>
</div>
)
}
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { chartDatas } from './financial-data';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StackingColumnSeries, Category, Legend, ILoadedEventArgs, Selection, IMouseEventArgs, IAccLoadedEventArgs, ChartAnnotation, AccumulationChart, AccumulationDataLabel, IAnimationCompleteEventArgs, AccumulationTheme, ChartTheme, AnnotationsDirective, AnnotationDirective, Series, AreaSeries, IAxisLabelRenderEventArgs, Tooltip } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
AccumulationChart.Inject(AccumulationDataLabel);
const SAMPLE_CSS = `
#dark-gradient-chart stop {
stop-color: rgb(247, 206, 105);
}
#gradient-chart stop {
stop-color: rgb(247, 206, 105, 0.5);
}
.chart-gradient stop[offset="0"] {
stop-opacity: 0.9;
}
.chart-gradient stop[offset="1"] {
stop-opacity: 0.3;
}
div[id*=_Annotation_3] {
transform: translate(0%, -50%) !important;
}
ellipse[id*=_Trackball_0] {
fill: rgb(247, 206, 105) !important;
stroke: rgb(247, 206, 105,0.5) !important;
}
ellipse[id*=_Trackball_1] {
fill: rgb(247, 206, 105) !important;
stroke-width: 1 !important;
stroke: white !important;
}
.e-view.highcontrast .box-bottom,.e-view.tailwind .box-bottom, .e-view.fluent .box-bottom,.e-view.material .box-bottom, .e-view.bootstrap .box-bottom,.e-view.bootstrap5 .box-bottom,.e-view.bootstrap4 .box-bottom, .e-view.fabric .box-bottom,.e-view.highcontrast .first-box-bottom,
.e-view.tailwind .first-box-bottom, .e-view.fluent .first-box-bottom,.e-view.material .first-box-bottom,.e-view.bootstrap .first-box-bottom, .e-view.bootstrap5 .first-box-bottom, .e-view.bootstrap4 .first-box-bottom ,.e-view.fabric .first-box-bottom, .e-view.highcontrast .first-box-bottom,
.e-view.tailwind .first-box-bottom, .e-view.fluent .second-box-bottom,.e-view.material .second-box-bottom,.e-view.bootstrap .second-box-bottom, .e-view.bootstrap5 .second-box-bottom,.e-view.bootstrap4 .second-box-bottom, .e-view.fabric .second-box-bottom, .e-view.highcontrast .third-box-bottom,
.e-view.tailwind .first-box-bottom, .e-view.fluent .third-box-bottom,.e-view.material .third-box-bottom,.e-view.bootstrap .third-box-bottom,.e-view.bootstrap5 .third-box-bottom,.e-view.bootstrap4 .third-box-bottom,.e-view.fabric .third-box-bottom,.e-view.highcontrast .box-left,
.e-view.material .first-box-bottom,.e-view.tailwind .first-box-bottom, .e-view.fluent .box-left,.e-view.bootstrap .box-left, .e-view.bootstrap5 .box-left, .e-view.bootstrap4 .box-left,.e-view.fabric .box-left,.e-view.material3 .box-bottom, .e-view.material3 .first-box-bottom , .e-view.material3 .second-box-bottom,.e-view.material3 .third-box-bottom, .e-view.material3 .box-left {
position: relative;
background: #fdf7e7;
border: 1.5px solid black;
padding: 2px 3px 2px 3px;
border-radius: 0.2em;
font-size: 12px;
color: 'black'
}
.e-view.highcontrast .box-bottom,.e-view.material-dark .box-bottom,.e-view.tailwind-dark .box-bottom, .e-view.fluent-dark .box-bottom, .e-view.bootstrap-dark .box-bottom,.e-view.bootstrap5-dark .box-bottom,.e-view.fabric-dark .box-bottom,.e-view.highcontrast .first-box-bottom,
.e-view.material-dark .first-box-bottom,.e-view.tailwind-dark .first-box-bottom, .e-view.fluent-dark .first-box-bottom,.e-view.bootstrap-dark .first-box-bottom, .e-view.bootstrap5-dark .first-box-bottom ,.e-view.fabric-dark .first-box-bottom, .e-view.highcontrast .second-box-bottom,
.e-view.material-dark .second-box-bottom, .e-view.fluent-dark .second-box-bottom,.e-view.bootstrap-dark .second-box-bottom, .e-view.bootstrap5-dark .second-box-bottom, .e-view.fabric-dark .second-box-bottom, .e-view.highcontrast .third-box-bottom,
.e-view.material-dark .third-box-bottom, .e-view.fluent-dark .third-box-bottom,.e-view.bootstrap-dark .third-box-bottom,.e-view.bootstrap5-dark .third-box-bottom,.e-view.fabric-dark .third-box-bottom,.e-view.highcontrast .box-left,
.e-view.material-dark .box-left, .e-view.fluent-dark .box-left,.e-view.bootstrap-dark .box-left, .e-view.bootstrap5-dark .box-left, .e-view.fabric-dark .box-left,.e-view.material3-dark .box-bottom, .e-view.material3-dark .first-box-bottom , .e-view.material3-dark .second-box-bottom,.e-view.material3-dark .third-box-bottom, .e-view.material3-dark .box-left{
position: relative;
background: black;
border: 1.5px solid black;
padding: 2px 3px 2px 3px;
border-radius: 0.2em;
font-size: 12px;
color: 'white'
}
.box-bottom:after, .box-bottom:before, .first-box-bottom:after, .first-box-bottom:before,
.second-box-bottom:after, .second-box-bottom:before, .third-box-bottom:after, .third-box-bottom:before {
bottom: 100%;
border: solid transparent;
content: "";
position: absolute;
}
.e-view.highcontrast .box-bottom:after, .e-view.tailwind .box-bottom:after,.e-view.fluent .box-bottom:after,.e-view.material .box-bottom:after,.e-view.bootstrap .box-bottom:after,.e-view.bootstrap5 .box-bottom:after, .e-view.bootstrap4 .box-bottom:after, .e-view.fabric .box-bottom:after, .e-view.material3 .box-bottom:after {
border-color: transparent;
border-width: 6.2px;
left: 50%;
margin-left: -6.1px;
margin-bottom: -1px;
border-bottom-color: #fdf7e7;
}
.e-view.highcontrast .box-bottom:after,.e-view.tailwind-dark .box-bottom:after,.e-view.fluent-dark .box-bottom:after,.e-view.material-dark .box-bottom:after,.e-view.bootstrap-dark .box-bottom:after,.e-view.bootstrap5-dark .box-bottom:after, .e-view.bootstrap4-dark .box-bottom:after, .e-view.fabric-dark .box-bottom:after, .e-view.material3-dark .box-bottom:after {
border-color: transparent;
border-width: 6.2px;
left: 50%;
margin-left: -6.1px;
margin-bottom: -1px;
border-bottom-color: black;
}
.box-bottom:before {
border-color: transparent;
border-bottom-color: black;
border-width: 7px;
left: 50%;
margin-left: -7px;
margin-bottom: 0.5px;
}
.e-view.highcontrast .first-box-bottom:after,.e-view.tailwind .first-box-bottom:after,.e-view.fluent .first-box-bottom:after,.e-view.material .first-box-bottom:after,.e-view.bootstrap .first-box-bottom:after,.e-view.bootstrap5 .first-box-bottom:after,.e-view.bootstrap4 .first-box-bottom:after, .e-view.fabric .first-box-bottom:after, .e-view.material3 .first-box-bottom:after {
border-color: transparent;
border-width: 6.2px;
left: 50%;
margin-left: -6.1px;
margin-bottom: -1px;
border-bottom-color: #fdf7e7;
}
.e-view.highcontrast .first-box-bottom:after,.e-view.tailwind-dark .first-box-bottom:after,.e-view.fluent-dark .first-box-bottom:after,.e-view.material-dark .first-box-bottom:after,.e-view.bootstrap-dark .first-box-bottom:after,.e-view.bootstrap5-dark .first-box-bottom:after,.e-view.bootstrap4-dark .first-box-bottom:after, .e-view.fabric-dark .first-box-bottom:after, .e-view.material3-dark .first-box-bottom:after {
border-color: transparent;
border-width: 6.2px;
left: 50%;
margin-left: -6.1px;
margin-bottom: -1px;
border-bottom-color: black;
}
.first-box-bottom:before {
border-color: transparent;
border-bottom-color: black;
border-width: 7px;
left: 50%;
margin-left: -7px;
margin-bottom: 0.5px;
}
.e-view.highcontrast .second-box-bottom:after,.e-view.tailwind .second-box-bottom:after,.e-view.fluent .second-box-bottom:after,.e-view.material .second-box-bottom:after, .e-view.bootstrap .second-box-bottom:after, .e-view.bootstrap5 .second-box-bottom:after,.e-view.bootstrap4 .second-box-bottom:after, .e-view.fabric .second-box-bottom:after, .e-view.material3 .second-box-bottom:after {
border-color: transparent;
border-width: 6.2px;
left: 50%;
margin-left: -6.3px;
margin-bottom: -1px;
border-bottom-color: #fdf7e7;
}
.e-view.highcontrast .second-box-bottom:after,.e-view.tailwind-dark .second-box-bottom:after,.e-view.fluent-dark .second-box-bottom:after,.e-view.material-dark .second-box-bottom:after, .e-view.bootstrap-dark .second-box-bottom:after, .e-view.bootstrap5-dark .second-box-bottom:after,.e-view.bootstrap4-dark .second-box-bottom:after, .e-view.fabric-dark .second-box-bottom:after, .e-view.material3-dark .second-box-bottom:after {
border-color: transparent;
border-width: 6.2px;
left: 50%;
margin-left: -6.3px;
margin-bottom: -1px;
border-bottom-color: black;
}
.second-box-bottom:before {
border-color: transparent;
border-bottom-color: black;
border-width: 7px;
left: 50%;
margin-left: -7px;
margin-bottom: 0.5px;
}
.e-view.highcontrast .third-box-bottom:after,.e-view.tailwind .third-box-bottom:after ,.e-view.fluent .third-box-bottom:after ,.e-view.material .third-box-bottom:after ,.e-view.bootstrap .third-box-bottom:after ,.e-view.bootstrap5 .third-box-bottom:after , .e-view.bootstrap4 .third-box-bottom:after , .e-view.fabric .third-box-bottom:after,.e-view.material3 .third-box-bottom:after {
border-color: transparent;
border-width: 6px;
left: 50%;
margin-left: -6px;
margin-bottom: -1px;
border-bottom-color: #fdf7e7;
}
.e-view.highcontrast .third-box-bottom:after ,.e-view.tailwind-dark .third-box-bottom:after ,.e-view.fluent-dark .third-box-bottom:after ,.e-view.material-dark .third-box-bottom:after ,.e-view.bootstrap-dark .third-box-bottom:after ,.e-view.bootstrap5-dark .third-box-bottom:after , .e-view.bootstrap4-dark .third-box-bottom:after , .e-view.fabric-dark .third-box-bottom:after, .e-view.material3-dark .third-box-bottom:after {
border-color: transparent;
border-width: 6px;
left: 50%;
margin-left: -6px;
margin-bottom: -1px;
border-bottom-color: black;
}
.third-box-bottom:before {
border-color: transparent;
border-bottom-color: black;
border-width: 6px;
left: 50%;
margin-left: -6px;
margin-bottom: 1px;
}
.box-left:after, .box-left:before {
right: 100%;
top: 18%;
border: solid transparent;
content: "";
position: absolute;
}
.e-view.highcontrast .box-left:after,.e-view.tailwind .box-left:after,.e-view.fluent .box-left:after,.e-view.material .box-left:after,.e-view.bootstrap .box-left:after,.e-view.bootstrap5 .box-left:after, .e-view.bootstrap4 .box-left:after, .e-view.fabric .box-left:after, .e-view.material3 .box-left:after {
border-color: transparent;
border-width: 6.5px;
margin-right: -1px;
border-right-color: #fdf7e7;
}
.e-view.highcontrast .box-left:after,.e-view.tailwind-dark .box-left:after,.e-view.fluent-dark .box-left:after,.e-view.material-dark .box-left:after,.e-view.bootstrap-dark .box-left:after,.e-view.bootstrap5-dark .box-left:after, .e-view.bootstrap4-dark .box-left:after, .e-view.fabric-dark .box-left:after, .e-view.material3-dark .box-left:after {
border-color: transparent;
border-width: 6.5px;
margin-right: -1px;
border-right-color: black;
}
.box-left:before {
border-color: transparent;
border-right-color: black;
border-width: 6.2px;
margin-right: 1px;
}
.e-view.highcontrast .box-top,.e-view.tailwind .box-top,.e-view.fluent .box-top,.e-view.material .box-top,.e-view.bootstrap .box-top,.e-view.bootstrap5 .box-top ,.e-view.bootstrap4 .box-top , .e-view.fabric .box-top,
.e-view.highcontrast .box-top-left,.e-view.tailwind .box-top,.e-view.fluent .box-top-left,.e-view.material .box-top-left,.e-view.bootstrap .box-top-left,.e-view.bootstrap5 .box-top-left, .e-view.bootstrap4 .box-top-left, .e-view.fabric .box-top-left,.e-view.material3 .box-top, .e-view.material3 .box-top-left {
position: relative;
color: white;
background: black;
border: 1.5px solid black;
padding: 2px 3px 2px 3px;
border-radius: 0.2em;
font-size: 12px;
color: white;
}
.e-view.highcontrast .box-top,.e-view.tailwind-dark .box-top,.e-view.fluent-dark .box-top,.e-view.material-dark .box-top,.e-view.bootstrap-dark .box-top,.e-view.bootstrap5-dark .box-top ,.e-view.bootstrap4-dark .box-top , .e-view.fabric-dark .box-top,
.e-view.highcontrast .box-top-left,.e-view.tailwind-dark .box-top,.e-view.fluent-dark .box-top-left,.e-view.material-dark .box-top-left,.e-view.bootstrap-dark .box-top-left,.e-view.bootstrap5-dark .box-top-left, .e-view.bootstrap4-dark .box-top-left, .e-view.fabric-dark .box-top-left, .e-view.material3-dark .box-top, .e-view.material3-dark .box-top-left {
position: relative;
color: white;
background: #fdf7e7;
border: 1.5px solid black;
padding: 2px 3px 2px 3px;
border-radius: 0.2em;
font-size: 12px;
color: black;
}
.box-top:after, .box-top:before, .box-top-left:after, .box-top-left:before {
top: 100%;
border: solid transparent;
content: "";
position: absolute;
}
.e-view.highcontrast .box-top:after,.e-view.tailwind .box-top:after,.e-view.fluent .box-top:after,.e-view.material .box-top:after, .e-view.bootstrap .box-top:after, .e-view.bootstrap5 .box-top:after, .e-view.bootstrap4 .box-top:after, .e-view.fabric .box-top:after,.e-view.material3 .box-top:after {
border-color: transparent;
border-width: 7.5px;
border-top-color:black;
right: 50%;
margin-right: -7.5px;
margin-top: -1.5px;
}
.e-view.highcontrast .box-top:after,.e-view.tailwind-dark .box-top:after,.e-view.fluent-dark .box-top:after,.e-view.material-dark .box-top:after, .e-view.bootstrap-dark .box-top:after, .e-view.bootstrap5-dark .box-top:after, .e-view.bootstrap4-dark .box-top:after, .e-view.fabric-dark .box-top:after,.e-view.material3-dark .box-top:after {
border-color: transparent;
border-width: 7.5px;
border-top-color: #fdf7e7;
right: 50%;
margin-right: -7.5px;
margin-top: -1.5px;
}
.e-view.highcontrast .box-top:before, .e-view.tailwind .box-top:before,.e-view.fluent .box-top:before,.e-view.material .box-top:before,.e-view.bootstrap .box-top:before,.e-view.bootstrap5 .box-top:before,.e-view.bootstrap4 .box-top:before , .e-view.fabric .box-top:before, .e-view.material3 .box-top:before {
border-color: transparent;
border-top-color:black;
border-width: 8px;
right: 50%;
margin-right: -8px;
}
.e-view.highcontrast .box-top:before,.e-view.tailwind-dark .box-top:before,.e-view.fluent-dark .box-top:before,.e-view.material-dark .box-top:before,.e-view.bootstrap-dark .box-top:before,.e-view.bootstrap5-dark .box-top:before,.e-view.bootstrap4-dark .box-top:before , .e-view.fabric-dark .box-top:before ,.e-view.material3-dark .box-top:before{
border-color: transparent;
border-top-color:#fdf7e7;
border-width: 8px;
right: 50%;
margin-right: -8px;
}
.e-view.highcontrast .box-top-left:after,.e-view.tailwind .box-top-left:after,.e-view.fluent .box-top-left:after,.e-view.material .box-top-left:after,.e-view.bootstrap .box-top-left:after,.e-view.bootstrap5 .box-top-left:after,.e-view.bootstrap4 .box-top-left:after, .e-view.fabric .box-top-left:after, .e-view.material3 .box-top-left:after{
border-color: transparent;
border-width: 7.5px;
border-top-color: black;
right: 20%;
margin-right: -7.5px;
margin-bottom: -1.5px;
}
.e-view.highcontrast .box-top-left:after,.e-view.tailwind-dark .box-top-left:after,.e-view.fluent-dark .box-top-left:after,.e-view.material-dark .box-top-left:after,.e-view.bootstrap-dark .box-top-left:after,.e-view.bootstrap5-dark .box-top-left:after,.e-view.bootstrap4-dark .box-top-left:after, .e-view.fabric-dark .box-top-left:after,.e-view.material3-dark .box-top-left:after{
border-color: transparent;
border-width: 7.5px;
border-top-color: #fdf7e7;
right: 20%;
margin-right: -7.5px;
margin-bottom: -1.5px;
}
.e-view.highcontrast .box-top-left:before,.e-view.tailwind .box-top-left:before,.e-view.fluent .box-top-left:before,.e-view.material .box-top-left:before,.e-view.bootstrap .box-top-left:before,.e-view.bootstrap5 .box-top-left:before, .e-view.bootstrap4 .box-top-left:before , .e-view.fabric .box-top-left:before, .e-view.material3 .box-top-left:before {
border-color: transparent;
border-top-color: black;
border-width: 8px;
right: 20%;
margin-right: -8px;
}
.e-view.highcontrast .box-top-left:before,.e-view.tailwind-dark .box-top-left:before,.e-view.fluent-dark .box-top-left:before,.e-view.material-dark .box-top-left:before,.e-view.bootstrap-dark .box-top-left:before,.e-view.bootstrap5-dark .box-top-left:before, .e-view.bootstrap4-dark .box-top-left:before , .e-view.fabric-dark .box-top-left:before,.e-view.material3-dark .box-top-left:before {
border-color: transparent;
border-top-color: #fdf7e7;
border-width: 8px;
right: 20%;
margin-right: -8px;
}`;
/**
* Sample for annotation
*/
const Annotation = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
if ( args.chart.theme.includes('Dark') || args.chart.theme.includes('highcontrast')) {
args.chart.series[0].fill = "url(#dark-gradient-chart)";
}
else {
args.chart.series[0].fill = "url(#gradient-chart)";
}
};
const axisLabelRender = (args: IAxisLabelRenderEventArgs): void => {
if (args.axis.name === 'primaryXAxis') {
args.text = args.text + 'KM';
}
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ title: 'Distance', labelFormat: 'N2', majorGridLines: {width : 0}, minimum: 0.00, maximum: 4.00 }} chartArea={{ border: { width: 0 } }} primaryYAxis={{ title: 'Speed (KM/H)', lineStyle: { width: 0 }, minimum: 50, maximum: 400, majorTickLines: { width: 0 } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} animationComplete={onChartLoad.bind(this)} axisLabelRender={axisLabelRender.bind(this)} selectionMode='Cluster' tooltip={{ enable : true, shared: true, header: " ", enableMarker: false, format: "Distance: ${point.x} KM <br> ${point.y} KM/H", fill: "white", border:{color:"rgb(247, 206, 105)", width: 2},textStyle:{color:"black"} }} selectedDataIndexes={[{ series: 0, point: 0 }]} legendSettings={{ visible: true, toggleVisibility: false }} title="Speed Data Plot for Interlagos Circuit">
<Inject services={[StackingColumnSeries, Category, Legend,Tooltip, Selection, ChartAnnotation, AreaSeries]} />
<AnnotationsDirective>
<AnnotationDirective content= '<div class="first-box-bottom" > Senna S </div>' x='0.360' y='80' coordinateUnits='Point' />
<AnnotationDirective content='<div class="second-box-bottom" > Descida do Lego </div>' x='1.400' y='130' coordinateUnits='Point' />
<AnnotationDirective content='<div class="third-box-bottom" > Ferradura </div>' x='2.100' y='200' coordinateUnits='Point' />
<AnnotationDirective content='<div class="box-left" > Curva do Sol </div>' x='0.85' y='155' coordinateUnits='Point' />
<AnnotationDirective content='<div class="box-top-left" > Reta Oposta </div>' x='0.700' y='292' coordinateUnits='Point' />
<AnnotationDirective content='<div class="box-bottom" > Bico de Pato </div>' x='2.750' y='80' coordinateUnits='Point' />
<AnnotationDirective content='<div class="box-top" > Mergulho </div>' x='3.136' y='284' coordinateUnits='Point' />
<AnnotationDirective content= { Browser.isDevice ? '' : '<div class="third-box-bottom" > Junção </div>'} x='3.270' y='98' coordinateUnits='Point' />
<AnnotationDirective content= { Browser.isDevice ? '' : '<div class="box-top" > Subida dos <br /> Boxes </div>'} x='3.800' y='312' coordinateUnits='Point' />
<AnnotationDirective content= { Browser.isDevice ? '' :'<div style="font-family: sans-serif" > Max, accelertion <br /> 5.00 g at 5th gear </div>'} x='1.65' y='300' coordinateUnits='Point' />
<AnnotationDirective content= { Browser.isDevice ? '' :'<div style="font-family: sans-serif" > Max, accelertion <br /> 4.58 g at 5th gear </div>'} x='2.60' y='250' coordinateUnits='Point' />
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartDatas} type= 'Area' xName='Distance' yName='Speed' border = {{ width: 2.5, color: '#000000' }} animation = {{ enable: true }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<svg style={{height: '0'}}>
<defs>
<linearGradient id="gradient-chart" style={{opacity:' 0.75'}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="gradient-chart" style={{opacity: '0.75'}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="dark-gradient-chart" style={{opacity: '0.75'}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="dark-gradient-chart" style={{opacity: '0.75'}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
</defs>
</svg>
<div id="action-description">
<p>This sample illustrates speed data for the Interlagos circuit. In area-based series, data points can be annotated using symbols.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure annotation feature in chart. We have used a pie chart to depict the sales for each year using annotation support,
while selecting a particular year from the StackedColumn series, the respective data's are showed in pie. An annotation can hold any html element as its content, here we have added the Pie chart as its content.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use annotation feature in chart, we need to inject
<code>ChartAnnotation</code> module into <code>services</code>.
</p>
<p>
More information on the chart annotation can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/chart-annotations/">documentation section</a>.
</p>
</div>
</div>
)
}
export default Annotation;

130
src/chart/area-empty-functional.tsx
Просмотреть файл

@ -1,66 +1,66 @@
/**
* Sample for Area series with empty points
*/
import * as React from 'react';
import { useEffect } from 'react';
import { ChartComponent, SeriesCollectionDirective, Highlight, SeriesDirective, ILoadedEventArgs, ChartTheme, Inject, Tooltip, DateTime, AreaSeries, Legend } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1 = [
{ Period: new Date(2021, 10, 14), US_InflationRate: 2.2, IN_InflationRate: 0.8 }, { Period: new Date(2021, 10, 15), US_InflationRate: 2.0, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 16), US_InflationRate: 2.8, IN_InflationRate: 1.8 },
{ Period: new Date(2021, 10, 17), US_InflationRate: 1.6, IN_InflationRate: 2.1 }, { Period: new Date(2021, 10, 18), US_InflationRate: 2.3, IN_InflationRate: null }, { Period: new Date(2021, 10, 19), US_InflationRate: 2.5, IN_InflationRate: 2.3 },
{ Period: new Date(2021, 10, 20), US_InflationRate: 2.9, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 21), US_InflationRate: 1.1, IN_InflationRate: 1.5 }, { Period: new Date(2021, 10, 22), US_InflationRate: 1.4, IN_InflationRate: 0.5 },
{ Period: new Date(2021, 10, 23), US_InflationRate: 1.1, IN_InflationRate: 1.3 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Area empty sample
*/
const AreaEmpty = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'DateTime', labelFormat: 'dd MMM', minimum: new Date(2021, 10, 14), maximum: new Date(2021, 10, 23), majorGridLines: { width: 0 }, edgeLabelPlacement: 'Shift' }} primaryYAxis={{ labelFormat: '{value}MB', lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, minimum: 0, maximum: 5, interval: 1 }} tooltip={{ enable: true, format: '${point.x} : <b>${point.y}</b>' }} legendSettings={{ enableHighlight: true }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} title="Data Consumption" loaded={onChartLoad.bind(this)}>
<Inject services={[AreaSeries, DateTime, Legend, Tooltip, Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName="Period" yName="US_InflationRate" name="Andrew" opacity={0.5} marker={{ visible: true, height: 7, width: 7, shape: 'Circle', isFilled: true }} type="Area" width={2} border={{ width: 2 }}></SeriesDirective>
<SeriesDirective dataSource={data1} xName="Period" yName="IN_InflationRate" name="Thomas" marker={{ visible: true, height: 7, width: 7, shape: 'Circle', isFilled: true }} opacity={0.5} type="Area" width={2} border={{ width: 2 }}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates an area series with empty points. Data points with null points are shown here.</p>
</div>
<div id="description">
<p>In this example, you can see how to render an area series with empty points. Also, a legend is enabled in the shape of the series.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use area series, we need to inject
<code>AreaSeries</code> module into <code>services</code>.
</p>
<p>
More information on the area series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#area-charts">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Area series with empty points
*/
import * as React from 'react';
import { useEffect } from 'react';
import { ChartComponent, SeriesCollectionDirective, Highlight, SeriesDirective, ILoadedEventArgs, ChartTheme, Inject, Tooltip, DateTime, AreaSeries, Legend } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1 = [
{ Period: new Date(2021, 10, 14), US_InflationRate: 2.2, IN_InflationRate: 0.8 }, { Period: new Date(2021, 10, 15), US_InflationRate: 2.0, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 16), US_InflationRate: 2.8, IN_InflationRate: 1.8 },
{ Period: new Date(2021, 10, 17), US_InflationRate: 1.6, IN_InflationRate: 2.1 }, { Period: new Date(2021, 10, 18), US_InflationRate: 2.3, IN_InflationRate: null }, { Period: new Date(2021, 10, 19), US_InflationRate: 2.5, IN_InflationRate: 2.3 },
{ Period: new Date(2021, 10, 20), US_InflationRate: 2.9, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 21), US_InflationRate: 1.1, IN_InflationRate: 1.5 }, { Period: new Date(2021, 10, 22), US_InflationRate: 1.4, IN_InflationRate: 0.5 },
{ Period: new Date(2021, 10, 23), US_InflationRate: 1.1, IN_InflationRate: 1.3 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Area empty sample
*/
const AreaEmpty = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'DateTime', labelFormat: 'dd MMM', minimum: new Date(2021, 10, 14), maximum: new Date(2021, 10, 23), majorGridLines: { width: 0 }, edgeLabelPlacement: 'Shift' }} primaryYAxis={{ labelFormat: '{value}MB', lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, minimum: 0, maximum: 5, interval: 1 }} tooltip={{ enable: true, format: '${point.x} : <b>${point.y}</b>' }} legendSettings={{ enableHighlight: true }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} title="Data Consumption" loaded={onChartLoad.bind(this)}>
<Inject services={[AreaSeries, DateTime, Legend, Tooltip, Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName="Period" yName="US_InflationRate" name="Andrew" opacity={0.5} marker={{ visible: true, height: 7, width: 7, shape: 'Circle', isFilled: true }} type="Area" width={2} border={{ width: 2 }}></SeriesDirective>
<SeriesDirective dataSource={data1} xName="Period" yName="IN_InflationRate" name="Thomas" marker={{ visible: true, height: 7, width: 7, shape: 'Circle', isFilled: true }} opacity={0.5} type="Area" width={2} border={{ width: 2 }}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates an area series with empty points. Data points with null points are shown here.</p>
</div>
<div id="description">
<p>In this example, you can see how to render an area series with empty points. Also, a legend is enabled in the shape of the series.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use area series, we need to inject
<code>AreaSeries</code> module into <code>services</code>.
</p>
<p>
More information on the area series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#area-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default AreaEmpty;

248
src/chart/area-functional.tsx
Просмотреть файл

@ -1,125 +1,125 @@
/**
* Sample for Area series
*/
import * as React from 'react';
import { useEffect } from 'react';
import { ChartComponent, SeriesCollectionDirective, Highlight, ILoadedEventArgs, ChartTheme, SeriesDirective, ChartAnnotation, AnnotationsDirective, AnnotationDirective, Inject, DateTime, AreaSeries, Legend } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let OTHERS = [
{ x: new Date(1988, 0, 1), y: -0.16 }, { x: new Date(1989, 0, 1), y: -0.17 }, { x: new Date(1990, 0, 1), y: -0.08 },
{ x: new Date(1992, 0, 1), y: 0.08 }, { x: new Date(1996, 0, 1), y: 0.161 }, { x: new Date(1998, 0, 1), y: 0.48 },
{ x: new Date(1999, 0, 1), y: 0.16 }, { x: new Date(2001, 0, 1), y: 0.4 }, { x: new Date(2002, 0, 1), y: 0.32 },
{ x: new Date(2003, 0, 1), y: 0.807 }, { x: new Date(2005, 0, 1), y: 1.12 }, { x: new Date(2006, 0, 1), y: 1.614 },
{ x: new Date(2008, 0, 1), y: 1.21 }, { x: new Date(2009, 0, 1), y: 1.12 }, { x: new Date(2011, 0, 1), y: 0.64 },
{ x: new Date(2013, 0, 1), y: 0.161 }, { x: new Date(2018, 0, 1), y: -0.08 }
];
export let TRACK = [
{ x: new Date(1973, 0, 1), y: 2.58 }, { x: new Date(1975, 0, 1), y: 2.25 }, { x: new Date(1977, 0, 1), y: 3.55 },
{ x: new Date(1978, 0, 1), y: 2.42 }, { x: new Date(1981, 0, 1), y: -0.24 }, { x: new Date(1982, 0, 1), y: -0 }
];
export let STREAMING = [
{ x: new Date(2011, 0, 1), y: 0.48 }, { x: new Date(2013, 0, 1), y: 1.61 }, { x: new Date(2015, 0, 1), y: 2.12 },
{ x: new Date(2017, 0, 1), y: 7.18 }
];
export let DOWNLOADS = [
{ x: new Date(2004, 0, 1), y: 0.48 }, { x: new Date(2007, 0, 1), y: 1.45 }, { x: new Date(2012, 0, 1), y: 2.82 },
{ x: new Date(2013, 0, 1), y: 2.58 }, { x: new Date(2015, 0, 1), y: 2.01 }, { x: new Date(2016, 0, 1), y: 1.61 },
{ x: new Date(2017, 0, 1), y: 0.8 }
];
export let COMPACT = [
{ x: new Date(1990, 0, 1), y: 0.69 }, { x: new Date(1992, 0, 1), y: 2.86 }, { x: new Date(1995, 0, 1), y: 10.2 },
{ x: new Date(1996, 0, 1), y: 13.0 }, { x: new Date(1997, 0, 1), y: 14.35 }, { x: new Date(1998, 0, 1), y: 15.17 },
{ x: new Date(1999, 0, 1), y: 14.89 }, { x: new Date(2000, 0, 1), y: 18.96 }, { x: new Date(2001, 0, 1), y: 18.78 },
{ x: new Date(2004, 0, 1), y: 14.25 }, { x: new Date(2005, 0, 1), y: 14.24 }, { x: new Date(2006, 0, 1), y: 12.34 },
{ x: new Date(2007, 0, 1), y: 9.34 }, { x: new Date(2008, 0, 1), y: 4.45 }, { x: new Date(2010, 0, 1), y: 1.46 },
{ x: new Date(2011, 1, 1), y: 0.64 }
];
export let CASSETTE = [
{ x: new Date(1976, 0, 1), y: 0.08 }, { x: new Date(1979, 0, 1), y: 1.85 }, { x: new Date(1980, 0, 1), y: 2.0 },
{ x: new Date(1982, 0, 1), y: 3.55 }, { x: new Date(1984, 0, 1), y: 5.4 }, { x: new Date(1985, 0, 1), y: 5.24 },
{ x: new Date(1988, 0, 1), y: 6.94 }, { x: new Date(1989, 0, 1), y: 6.85 }, { x: new Date(1990, 0, 1), y: 7.02 },
{ x: new Date(1992, 0, 1), y: 5.81 }, { x: new Date(1993, 0, 1), y: 5.32 }, { x: new Date(1994, 0, 1), y: 4.03 },
{ x: new Date(1997, 0, 1), y: 2.25 }, { x: new Date(1998, 0, 1), y: 2.01 }, { x: new Date(1999, 0, 1), y: 0.8 },
{ x: new Date(2001, 0, 1), y: 0.4 }
];
export let VINYL = [
{ x: new Date(1973, 0, 1), y: 7.74 }, { x: new Date(1974, 0, 1), y: 7.58 }, { x: new Date(1976, 0, 1), y: 8.23 },
{ x: new Date(1977, 0, 1), y: 9.68 }, { x: new Date(1978, 0, 1), y: 10.16 }, { x: new Date(1979, 0, 1), y: 8.15 },
{ x: new Date(1981, 0, 1), y: 6.77 }, { x: new Date(1982, 0, 1), y: 5.64 }, { x: new Date(1984, 0, 1), y: 4.35 },
{ x: new Date(1985, 0, 1), y: 2.5 }, { x: new Date(1989, 0, 1), y: 0.64 }, { x: new Date(1990, 0, 1), y: 0 }
];
let content = Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 8px;">8-TRACK</div>' : '<div style="font-weight: bold; color: white; font-size: 11px;">8-TRACK</div>';
let content1 = Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 8px;">VINYL</div>' : '<div style="font-weight: bold; color: white;font-size: 11px;">VINYL</div>';
let content2 = Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 8px;">CASSETTE</div>': '<div style="font-weight: bold; color: white;font-size: 11px;">CASSETTE</div>';
let content3 = Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 8px;">COMPACT DISC</div>':'<div style="font-weight: bold; color: white;font-size: 11px;">COMPACT DISC</div>';
let content4 = Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 8px;">OTHERS</div>':'<div style="font-weight: bold; color: white;font-size: 11px;">OTHERS</div>';
let content5 = Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 8px;">DOWNLOAD</div>':'<div style="font-weight: bold; color: white; font-size: 11px;">DOWNLOAD</div>';
let content6 = Browser.isDevice ? '':'<div style="font-weight: bold; color: white;font-size: 11px;">STREAMING</div>';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Area sampleuiz
*/
const Area = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'DateTime', minimum: new Date(1973, 1, 1), maximum: new Date(2018, 1, 1), labelFormat: 'y', majorGridLines: { width: 0 }, edgeLabelPlacement: 'Shift' }} primaryYAxis={{ title: 'In Billions (USD)', labelFormat: '{value}', interval: 5, minimum: 0, maximum: 25, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} chartArea={{ border: { width: 0 } }} title="US Music Sales By Format" loaded={onChartLoad.bind(this)}>
<Inject services={[AreaSeries, DateTime, ChartAnnotation, Legend, Highlight]} />
<AnnotationsDirective>
<AnnotationDirective content={content} region="Series" x="8%" y="95%"></AnnotationDirective>
<AnnotationDirective content={content1} region="Series" x="12%" y="80%"></AnnotationDirective>
<AnnotationDirective content={content2} region="Series" x="35%" y="87%"></AnnotationDirective>
<AnnotationDirective content={content3} region="Series" x="63%" y="70%"></AnnotationDirective>
<AnnotationDirective content={content4} region="Series" x="75%" y="98%"></AnnotationDirective>
<AnnotationDirective content={content5} region="Series" x="85%" y="93%"></AnnotationDirective>
<AnnotationDirective content={content6} region="Series" x="93%" y="96%"></AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={COMPACT} xName="x" yName="y" opacity={1} type="Area" width={2} border={{ width: 1.5, color: 'white' }}></SeriesDirective>
<SeriesDirective dataSource={DOWNLOADS} xName="x" yName="y" opacity={1} type="Area" width={2} border={{ width: 1.5, color: 'white' }}></SeriesDirective>
<SeriesDirective dataSource={STREAMING} xName="x" yName="y" opacity={1} type="Area" width={2} border={{ width: 1.5, color: 'white' }}></SeriesDirective>
<SeriesDirective dataSource={CASSETTE} xName="x" yName="y" opacity={1} type="Area" width={2} border={{ width: 1.5, color: 'white' }}></SeriesDirective>
<SeriesDirective dataSource={VINYL} xName="x" yName="y" opacity={1} type="Area" width={2} border={{ width: 1.5, color: 'white' }}></SeriesDirective>
<SeriesDirective dataSource={TRACK} xName="x" yName="y" opacity={1} type="Area" width={2} border={{ width: 1.5, color: 'white' }}></SeriesDirective>
<SeriesDirective dataSource={OTHERS} xName="x" yName="y" opacity={1} type="Area" width={2} border={{ width: 1.5, color: 'white' }}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This React Area Chart example visualizes music sales data by format in US by using a default area series in the chart.</p>
</div>
<div id="description">
<p>In this example, you can see how the area type chart can be rendered and configured. It is like the line chart, which represents time-dependent data and shows trends at equal intervals, but the area is closed and filled with the color of the series.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use area series, we need to inject
<code>AreaSeries</code> module into <code>services</code>.
</p>
<p>
More information on the area series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#area-charts">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Area series
*/
import * as React from 'react';
import { useEffect } from 'react';
import { ChartComponent, SeriesCollectionDirective, Highlight, ILoadedEventArgs, ChartTheme, SeriesDirective, ChartAnnotation, AnnotationsDirective, AnnotationDirective, Inject, DateTime, AreaSeries, Legend } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let OTHERS = [
{ x: new Date(1988, 0, 1), y: -0.16 }, { x: new Date(1989, 0, 1), y: -0.17 }, { x: new Date(1990, 0, 1), y: -0.08 },
{ x: new Date(1992, 0, 1), y: 0.08 }, { x: new Date(1996, 0, 1), y: 0.161 }, { x: new Date(1998, 0, 1), y: 0.48 },
{ x: new Date(1999, 0, 1), y: 0.16 }, { x: new Date(2001, 0, 1), y: 0.4 }, { x: new Date(2002, 0, 1), y: 0.32 },
{ x: new Date(2003, 0, 1), y: 0.807 }, { x: new Date(2005, 0, 1), y: 1.12 }, { x: new Date(2006, 0, 1), y: 1.614 },
{ x: new Date(2008, 0, 1), y: 1.21 }, { x: new Date(2009, 0, 1), y: 1.12 }, { x: new Date(2011, 0, 1), y: 0.64 },
{ x: new Date(2013, 0, 1), y: 0.161 }, { x: new Date(2018, 0, 1), y: -0.08 }
];
export let TRACK = [
{ x: new Date(1973, 0, 1), y: 2.58 }, { x: new Date(1975, 0, 1), y: 2.25 }, { x: new Date(1977, 0, 1), y: 3.55 },
{ x: new Date(1978, 0, 1), y: 2.42 }, { x: new Date(1981, 0, 1), y: -0.24 }, { x: new Date(1982, 0, 1), y: -0 }
];
export let STREAMING = [
{ x: new Date(2011, 0, 1), y: 0.48 }, { x: new Date(2013, 0, 1), y: 1.61 }, { x: new Date(2015, 0, 1), y: 2.12 },
{ x: new Date(2017, 0, 1), y: 7.18 }
];
export let DOWNLOADS = [
{ x: new Date(2004, 0, 1), y: 0.48 }, { x: new Date(2007, 0, 1), y: 1.45 }, { x: new Date(2012, 0, 1), y: 2.82 },
{ x: new Date(2013, 0, 1), y: 2.58 }, { x: new Date(2015, 0, 1), y: 2.01 }, { x: new Date(2016, 0, 1), y: 1.61 },
{ x: new Date(2017, 0, 1), y: 0.8 }
];
export let COMPACT = [
{ x: new Date(1990, 0, 1), y: 0.69 }, { x: new Date(1992, 0, 1), y: 2.86 }, { x: new Date(1995, 0, 1), y: 10.2 },
{ x: new Date(1996, 0, 1), y: 13.0 }, { x: new Date(1997, 0, 1), y: 14.35 }, { x: new Date(1998, 0, 1), y: 15.17 },
{ x: new Date(1999, 0, 1), y: 14.89 }, { x: new Date(2000, 0, 1), y: 18.96 }, { x: new Date(2001, 0, 1), y: 18.78 },
{ x: new Date(2004, 0, 1), y: 14.25 }, { x: new Date(2005, 0, 1), y: 14.24 }, { x: new Date(2006, 0, 1), y: 12.34 },
{ x: new Date(2007, 0, 1), y: 9.34 }, { x: new Date(2008, 0, 1), y: 4.45 }, { x: new Date(2010, 0, 1), y: 1.46 },
{ x: new Date(2011, 1, 1), y: 0.64 }
];
export let CASSETTE = [
{ x: new Date(1976, 0, 1), y: 0.08 }, { x: new Date(1979, 0, 1), y: 1.85 }, { x: new Date(1980, 0, 1), y: 2.0 },
{ x: new Date(1982, 0, 1), y: 3.55 }, { x: new Date(1984, 0, 1), y: 5.4 }, { x: new Date(1985, 0, 1), y: 5.24 },
{ x: new Date(1988, 0, 1), y: 6.94 }, { x: new Date(1989, 0, 1), y: 6.85 }, { x: new Date(1990, 0, 1), y: 7.02 },
{ x: new Date(1992, 0, 1), y: 5.81 }, { x: new Date(1993, 0, 1), y: 5.32 }, { x: new Date(1994, 0, 1), y: 4.03 },
{ x: new Date(1997, 0, 1), y: 2.25 }, { x: new Date(1998, 0, 1), y: 2.01 }, { x: new Date(1999, 0, 1), y: 0.8 },
{ x: new Date(2001, 0, 1), y: 0.4 }
];
export let VINYL = [
{ x: new Date(1973, 0, 1), y: 7.74 }, { x: new Date(1974, 0, 1), y: 7.58 }, { x: new Date(1976, 0, 1), y: 8.23 },
{ x: new Date(1977, 0, 1), y: 9.68 }, { x: new Date(1978, 0, 1), y: 10.16 }, { x: new Date(1979, 0, 1), y: 8.15 },
{ x: new Date(1981, 0, 1), y: 6.77 }, { x: new Date(1982, 0, 1), y: 5.64 }, { x: new Date(1984, 0, 1), y: 4.35 },
{ x: new Date(1985, 0, 1), y: 2.5 }, { x: new Date(1989, 0, 1), y: 0.64 }, { x: new Date(1990, 0, 1), y: 0 }
];
let content = Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 8px;">8-TRACK</div>' : '<div style="font-weight: bold; color: white; font-size: 11px;">8-TRACK</div>';
let content1 = Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 8px;">VINYL</div>' : '<div style="font-weight: bold; color: white;font-size: 11px;">VINYL</div>';
let content2 = Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 8px;">CASSETTE</div>': '<div style="font-weight: bold; color: white;font-size: 11px;">CASSETTE</div>';
let content3 = Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 8px;">COMPACT DISC</div>':'<div style="font-weight: bold; color: white;font-size: 11px;">COMPACT DISC</div>';
let content4 = Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 8px;">OTHERS</div>':'<div style="font-weight: bold; color: white;font-size: 11px;">OTHERS</div>';
let content5 = Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 8px;">DOWNLOAD</div>':'<div style="font-weight: bold; color: white; font-size: 11px;">DOWNLOAD</div>';
let content6 = Browser.isDevice ? '':'<div style="font-weight: bold; color: white;font-size: 11px;">STREAMING</div>';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Area sampleuiz
*/
const Area = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'DateTime', minimum: new Date(1973, 1, 1), maximum: new Date(2018, 1, 1), labelFormat: 'y', majorGridLines: { width: 0 }, edgeLabelPlacement: 'Shift' }} primaryYAxis={{ title: 'In Billions (USD)', labelFormat: '{value}', interval: 5, minimum: 0, maximum: 25, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} chartArea={{ border: { width: 0 } }} title="US Music Sales By Format" loaded={onChartLoad.bind(this)}>
<Inject services={[AreaSeries, DateTime, ChartAnnotation, Legend, Highlight]} />
<AnnotationsDirective>
<AnnotationDirective content={content} region="Series" x="8%" y="95%"></AnnotationDirective>
<AnnotationDirective content={content1} region="Series" x="12%" y="80%"></AnnotationDirective>
<AnnotationDirective content={content2} region="Series" x="35%" y="87%"></AnnotationDirective>
<AnnotationDirective content={content3} region="Series" x="63%" y="70%"></AnnotationDirective>
<AnnotationDirective content={content4} region="Series" x="75%" y="98%"></AnnotationDirective>
<AnnotationDirective content={content5} region="Series" x="85%" y="93%"></AnnotationDirective>
<AnnotationDirective content={content6} region="Series" x="93%" y="96%"></AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={COMPACT} xName="x" yName="y" opacity={1} type="Area" width={2} border={{ width: 1.5, color: 'white' }}></SeriesDirective>
<SeriesDirective dataSource={DOWNLOADS} xName="x" yName="y" opacity={1} type="Area" width={2} border={{ width: 1.5, color: 'white' }}></SeriesDirective>
<SeriesDirective dataSource={STREAMING} xName="x" yName="y" opacity={1} type="Area" width={2} border={{ width: 1.5, color: 'white' }}></SeriesDirective>
<SeriesDirective dataSource={CASSETTE} xName="x" yName="y" opacity={1} type="Area" width={2} border={{ width: 1.5, color: 'white' }}></SeriesDirective>
<SeriesDirective dataSource={VINYL} xName="x" yName="y" opacity={1} type="Area" width={2} border={{ width: 1.5, color: 'white' }}></SeriesDirective>
<SeriesDirective dataSource={TRACK} xName="x" yName="y" opacity={1} type="Area" width={2} border={{ width: 1.5, color: 'white' }}></SeriesDirective>
<SeriesDirective dataSource={OTHERS} xName="x" yName="y" opacity={1} type="Area" width={2} border={{ width: 1.5, color: 'white' }}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This React Area Chart example visualizes music sales data by format in US by using a default area series in the chart.</p>
</div>
<div id="description">
<p>In this example, you can see how the area type chart can be rendered and configured. It is like the line chart, which represents time-dependent data and shows trends at equal intervals, but the area is closed and filled with the color of the series.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use area series, we need to inject
<code>AreaSeries</code> module into <code>services</code>.
</p>
<p>
More information on the area series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#area-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default Area;

148
src/chart/area-negative-points-functional.tsx
Просмотреть файл

@ -1,74 +1,74 @@
/**
* Sample for Area series with empty points
*/
import * as React from 'react';
import { useEffect } from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective,DateTime, Highlight, ILoadedEventArgs, ChartTheme, Inject, Tooltip, Category, AreaSeries, Legend } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1 = [
{ x: new Date(2017, 0, 1), y: 3000 }, { x: new Date(2018, 0, 1), y: 4000 },
{ x: new Date(2019, 0, 1), y: -4000 }, { x: new Date(2020, 0, 1), y: -2000 },
{ x: new Date(2021, 0, 1), y: 5000 }
];
export let data2 = [
{ x: new Date(2017, 0, 1), y: 2000 }, { x: new Date(2018, 0, 1), y: 3000 },
{ x: new Date(2019, 0, 1), y: 4000 }, { x: new Date(2020, 0, 1), y: 2000 },
{ x: new Date(2021, 0, 1), y: 3000 }
];
export let data3 = [
{ x: new Date(2017, 0, 1), y: 2000 }, { x: new Date(2018, 0, 1), y: -1000 },
{ x: new Date(2019, 0, 1), y: -3000 }, { x: new Date(2020, 0, 1), y: 4000 },
{ x: new Date(2021, 0, 1), y: 1000 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Area empty sample
*/
const AreaNegative = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'DateTime', labelFormat: 'y', majorGridLines: { width: 0 }, minimum:new Date(2017, 0, 1), maximum: new Date(2021, 0, 1), intervalType: 'Years', edgeLabelPlacement: 'Shift' }} primaryYAxis={{ labelFormat: '${value}', minimum: -4000, maximum: 8000, interval: 2000, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 } }} legendSettings={{ enableHighlight: true }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} title="Profit and Loss" tooltip={{ enable: true }} loaded={onChartLoad.bind(this)}>
<Inject services={[AreaSeries, Category, Tooltip, Legend, DateTime, Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName="x" yName="y" name="Company A" opacity={0.75} marker={{ visible: true, shape: 'Circle', isFilled: true, width: 7, height: 7 }} type="Area" width={2} border={{ width: 2 }}></SeriesDirective>
<SeriesDirective dataSource={data2} xName="x" yName="y" name="Company B" opacity={0.75} marker={{ visible: true, shape: 'Diamond', isFilled: true, width: 7, height: 7 }} type="Area" width={2} border={{ width: 2 }}></SeriesDirective>
<SeriesDirective dataSource={data3} xName="x" yName="y" name="Company C" opacity={0.75} marker={{ visible: true, shape: 'Rectangle', isFilled: true, width: 5, height: 5 }} type="Area" width={2} border={{ width: 2 }}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates an area series with negative values. Data points with negative values are shown here.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render an area series with negative values. Similar to line type series, but the area gets closed and filled with series color. You can use <a target="_blank" href=" https://ej2.syncfusion.com/react/documentation/api/chart/series/#border">border</a> and <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/api/chart/series/#fill">fill </a> properties to customize the area. Also, the legend is enabled with the shape of the series type.
</p>
<br></br>
<p>
More information on the area series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#area-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default AreaNegative;
/**
* Sample for Area series with empty points
*/
import * as React from 'react';
import { useEffect } from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective,DateTime, Highlight, ILoadedEventArgs, ChartTheme, Inject, Tooltip, Category, AreaSeries, Legend } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1 = [
{ x: new Date(2017, 0, 1), y: 3000 }, { x: new Date(2018, 0, 1), y: 4000 },
{ x: new Date(2019, 0, 1), y: -4000 }, { x: new Date(2020, 0, 1), y: -2000 },
{ x: new Date(2021, 0, 1), y: 5000 }
];
export let data2 = [
{ x: new Date(2017, 0, 1), y: 2000 }, { x: new Date(2018, 0, 1), y: 3000 },
{ x: new Date(2019, 0, 1), y: 4000 }, { x: new Date(2020, 0, 1), y: 2000 },
{ x: new Date(2021, 0, 1), y: 3000 }
];
export let data3 = [
{ x: new Date(2017, 0, 1), y: 2000 }, { x: new Date(2018, 0, 1), y: -1000 },
{ x: new Date(2019, 0, 1), y: -3000 }, { x: new Date(2020, 0, 1), y: 4000 },
{ x: new Date(2021, 0, 1), y: 1000 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Area empty sample
*/
const AreaNegative = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'DateTime', labelFormat: 'y', majorGridLines: { width: 0 }, minimum:new Date(2017, 0, 1), maximum: new Date(2021, 0, 1), intervalType: 'Years', edgeLabelPlacement: 'Shift' }} primaryYAxis={{ labelFormat: '${value}', minimum: -4000, maximum: 8000, interval: 2000, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 } }} legendSettings={{ enableHighlight: true }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} title="Profit and Loss" tooltip={{ enable: true }} loaded={onChartLoad.bind(this)}>
<Inject services={[AreaSeries, Category, Tooltip, Legend, DateTime, Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName="x" yName="y" name="Company A" opacity={0.75} marker={{ visible: true, shape: 'Circle', isFilled: true, width: 7, height: 7 }} type="Area" width={2} border={{ width: 2 }}></SeriesDirective>
<SeriesDirective dataSource={data2} xName="x" yName="y" name="Company B" opacity={0.75} marker={{ visible: true, shape: 'Diamond', isFilled: true, width: 7, height: 7 }} type="Area" width={2} border={{ width: 2 }}></SeriesDirective>
<SeriesDirective dataSource={data3} xName="x" yName="y" name="Company C" opacity={0.75} marker={{ visible: true, shape: 'Rectangle', isFilled: true, width: 5, height: 5 }} type="Area" width={2} border={{ width: 2 }}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates an area series with negative values. Data points with negative values are shown here.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render an area series with negative values. Similar to line type series, but the area gets closed and filled with series color. You can use <a target="_blank" href=" https://ej2.syncfusion.com/react/documentation/api/chart/series/#border">border</a> and <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/api/chart/series/#fill">fill </a> properties to customize the area. Also, the legend is enabled with the shape of the series type.
</p>
<br></br>
<p>
More information on the area series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#area-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default AreaNegative;

284
src/chart/area-segments-functional.tsx
Просмотреть файл

@ -1,143 +1,143 @@
/**
* Sample for Area series with empty points
*/
import * as React from 'react';
import { useEffect } from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Tooltip, ILoadedEventArgs, ChartTheme, AnnotationsDirective, AnnotationDirective, DateTime, MultiColoredAreaSeries, ChartAnnotation, SegmentsDirective, SegmentDirective } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let dataValues = [];
[150, 71.5, 106.4, 100.25, 70.0, 106.0, 85.6, 78.5, 76.4, 86.1, 155.6, 160.4,].map((value, index) => {
dataValues.push({ XValue: new Date(2016, index, 1), YValue: value });
});
let content = "<div style='color:#4ca1af; font-weight:bold'>Winter</div>";
let content1 = "<div style='color:#ffa751; font-weight:bold'>Summer</div>";
let content2 = "<div style='color:#1d976c; font-weight:bold'>Spring</div>";
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
#control-container {
padding: 0px !important;
}
#control-container {
padding: 0px !important;
}
#winter stop {
stop-color: #4ca1af;
}
#winter stop[offset="0"] {
stop-color: #c4e0e5;
}
#winter stop[offset="1"] {
stop-color: #4ca1af;
}
#summer stop {
stop-color: #ffa751;
}
#summer stop[offset="0"] {
stop-color: #ffe259;
}
#summer stop[offset="1"] {
stop-color: #ffa751;
}
#spring stop {
stop-color: #1d976c;
}
#spring stop[offset="0"] {
stop-color: #93f9b9;
}
#spring stop[offset="1"] {
stop-color: #1d976c;
}`;
/**
* Area empty sample
*/
const AreaMultiColored = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'DateTime', majorTickLines: {width : 0}, minorTickLines: {width: 0}, labelFormat: 'MMM', intervalType: 'Months', majorGridLines: { width: 0 }, interval: 1, labelRotation: Browser.isDevice ? -45 : 0, labelIntersectAction: Browser.isDevice? 'None' : 'Trim' }} primaryYAxis={{ labelFormat: '${value}K', rangePadding: 'None', minimum: 0, maximum: 200, interval: 50, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} tooltip={{ enable: true, shared: true, format: '${point.x} : <b>${point.y}</b>' }} legendSettings={{ visible: false }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} title="US Season Retail Sales Growth" loaded={onChartLoad.bind(this)}>
<Inject services={[MultiColoredAreaSeries, DateTime, Tooltip, ChartAnnotation,]} />
<AnnotationsDirective>
<AnnotationDirective content={content} region="Series" x="18%" y="43%"></AnnotationDirective>
<AnnotationDirective content={content1} region="Series" x="46%" y="43%"></AnnotationDirective>
<AnnotationDirective content={content2} region="Series" x="90%" y="18%"></AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={dataValues} xName="XValue" yName="YValue" name="US" type="MultiColoredArea" segmentAxis="X">
<SegmentsDirective>
<SegmentDirective value={new Date(2016, 4, 1)} color="url(#winter)"></SegmentDirective>
<SegmentDirective value={new Date(2016, 8, 1)} color="url(#summer)"></SegmentDirective>
<SegmentDirective color="url(#spring)"></SegmentDirective>
</SegmentsDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<svg style={{ height: 0 }}>
<defs>
<linearGradient id="winter" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="summer" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="spring" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
</defs>
</svg>
<div id="action-description">
<p>This sample visualizes the data on US season retail sales growth using a multi-colored area series in the chart. Data points are enhanced with segments and tooltips.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the points in a particular range by using <code>MultiColoredArea</code> series.
Points within the range can be configured with <a target="_blank" href="https://helpej2.syncfusion.com/react/documentation/api/chart/chartSegment/#color">color</a> property in chart segment.
</p>
<p>
The <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/api/chart/tooltip/">tooltip</a> is enabled in this example. To see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use area series, we need to inject
<code>MultiColoredAreaSeries</code> module using
<code>Chart.Inject(MultiColoredAreaSeries)</code> method.
</p>
<p>
More information on the area series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#area-charts">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Area series with empty points
*/
import * as React from 'react';
import { useEffect } from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Tooltip, ILoadedEventArgs, ChartTheme, AnnotationsDirective, AnnotationDirective, DateTime, MultiColoredAreaSeries, ChartAnnotation, SegmentsDirective, SegmentDirective } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let dataValues = [];
[150, 71.5, 106.4, 100.25, 70.0, 106.0, 85.6, 78.5, 76.4, 86.1, 155.6, 160.4,].map((value, index) => {
dataValues.push({ XValue: new Date(2016, index, 1), YValue: value });
});
let content = "<div style='color:#4ca1af; font-weight:bold'>Winter</div>";
let content1 = "<div style='color:#ffa751; font-weight:bold'>Summer</div>";
let content2 = "<div style='color:#1d976c; font-weight:bold'>Spring</div>";
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
#control-container {
padding: 0px !important;
}
#control-container {
padding: 0px !important;
}
#winter stop {
stop-color: #4ca1af;
}
#winter stop[offset="0"] {
stop-color: #c4e0e5;
}
#winter stop[offset="1"] {
stop-color: #4ca1af;
}
#summer stop {
stop-color: #ffa751;
}
#summer stop[offset="0"] {
stop-color: #ffe259;
}
#summer stop[offset="1"] {
stop-color: #ffa751;
}
#spring stop {
stop-color: #1d976c;
}
#spring stop[offset="0"] {
stop-color: #93f9b9;
}
#spring stop[offset="1"] {
stop-color: #1d976c;
}`;
/**
* Area empty sample
*/
const AreaMultiColored = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'DateTime', majorTickLines: {width : 0}, minorTickLines: {width: 0}, labelFormat: 'MMM', intervalType: 'Months', majorGridLines: { width: 0 }, interval: 1, labelRotation: Browser.isDevice ? -45 : 0, labelIntersectAction: Browser.isDevice? 'None' : 'Trim' }} primaryYAxis={{ labelFormat: '${value}K', rangePadding: 'None', minimum: 0, maximum: 200, interval: 50, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} tooltip={{ enable: true, shared: true, format: '${point.x} : <b>${point.y}</b>' }} legendSettings={{ visible: false }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} title="US Season Retail Sales Growth" loaded={onChartLoad.bind(this)}>
<Inject services={[MultiColoredAreaSeries, DateTime, Tooltip, ChartAnnotation,]} />
<AnnotationsDirective>
<AnnotationDirective content={content} region="Series" x="18%" y="43%"></AnnotationDirective>
<AnnotationDirective content={content1} region="Series" x="46%" y="43%"></AnnotationDirective>
<AnnotationDirective content={content2} region="Series" x="90%" y="18%"></AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={dataValues} xName="XValue" yName="YValue" name="US" type="MultiColoredArea" segmentAxis="X">
<SegmentsDirective>
<SegmentDirective value={new Date(2016, 4, 1)} color="url(#winter)"></SegmentDirective>
<SegmentDirective value={new Date(2016, 8, 1)} color="url(#summer)"></SegmentDirective>
<SegmentDirective color="url(#spring)"></SegmentDirective>
</SegmentsDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<svg style={{ height: 0 }}>
<defs>
<linearGradient id="winter" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="summer" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="spring" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
</defs>
</svg>
<div id="action-description">
<p>This sample visualizes the data on US season retail sales growth using a multi-colored area series in the chart. Data points are enhanced with segments and tooltips.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the points in a particular range by using <code>MultiColoredArea</code> series.
Points within the range can be configured with <a target="_blank" href="https://helpej2.syncfusion.com/react/documentation/api/chart/chartSegment/#color">color</a> property in chart segment.
</p>
<p>
The <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/api/chart/tooltip/">tooltip</a> is enabled in this example. To see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use area series, we need to inject
<code>MultiColoredAreaSeries</code> module using
<code>Chart.Inject(MultiColoredAreaSeries)</code> method.
</p>
<p>
More information on the area series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#area-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default AreaMultiColored;

152
src/chart/atrindicator-functional.tsx
Просмотреть файл

@ -1,76 +1,76 @@
/**
* Sample for ATR Indicator
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, StripLinesDirective, StripLineDirective, Crosshair, LineSeries, AtrIndicator, StripLine, ChartTheme, IndicatorsDirective, IndicatorDirective, Legend } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { chartValues } from './financial-data';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* ATR sample
*/
const ATR = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', majorGridLines: { width: 0 }, zoomFactor: 0.2, zoomPosition: 0.6, crosshairTooltip: { enable: true } }} primaryYAxis={{ title: 'Price', labelFormat: '${value}', minimum: 50, maximum: 170, interval: 30, rowIndex: 1, plotOffset: 25, majorGridLines: { width: 1 }, opposedPosition: true, lineStyle: { width: 0 } }} tooltip={{ enable: true, shared: true }} crosshair={{ enable: true, lineType: 'Vertical' }} chartArea={{ border: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} zoomSettings={{ enableSelectionZooming: true, mode: 'X', enablePan: true }} title='AAPL Stock Price 2012-2017' legendSettings= {{ visible : false }}loaded={onChartLoad.bind(this)}>
<Inject services={[CandleSeries, Category, Tooltip, StripLine,Legend, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, AtrIndicator]} />
<RowsDirective>
<RowDirective height={'40%'} />
<RowDirective height={'60%'} />
</RowsDirective>
<AxesDirective>
<AxisDirective name='secondary' opposedPosition={true} rowIndex={0} majorGridLines={{ width: 0 }} lineStyle={{ width: 0 }} majorTickLines={{ width: 0 }} title={'ATR'}>
<StripLinesDirective>
<StripLineDirective start={0} end={14} text='' color='#6063ff' visible={true} opacity={0.1} zIndex='Behind' />
</StripLinesDirective>
</AxisDirective>
</AxesDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartValues} width={2} xName='period' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={{ enable: true }} />
</SeriesCollectionDirective>
<IndicatorsDirective>
<IndicatorDirective yAxisName='secondary' type='Atr' fill='#6063ff' seriesName='Apple Inc' period={3} animation={{ enable: true }} />
</IndicatorsDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates a chart with candle series and an average true range indicator. The trackball shows information about the stock rates and signal values of a day.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure an average true range indicator. This indicator measures the volatility of the stock by comparing the current value with the previous value.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices. </p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Average True Range Indicator, we need to inject
<code>AtrIndicator</code> module into <code>services</code>.
</p>
<p>
More information on the Average True Range Indicator can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/technical-indicators/#average-true-range-atr">documentation section</a>.
</p>
</div>
</div >
)
}
export default ATR;
/**
* Sample for ATR Indicator
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, StripLinesDirective, StripLineDirective, Crosshair, LineSeries, AtrIndicator, StripLine, ChartTheme, IndicatorsDirective, IndicatorDirective, Legend } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { chartValues } from './financial-data';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* ATR sample
*/
const ATR = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', majorGridLines: { width: 0 }, zoomFactor: 0.2, zoomPosition: 0.6, crosshairTooltip: { enable: true } }} primaryYAxis={{ title: 'Price', labelFormat: '${value}', minimum: 50, maximum: 170, interval: 30, rowIndex: 1, plotOffset: 25, majorGridLines: { width: 1 }, opposedPosition: true, lineStyle: { width: 0 } }} tooltip={{ enable: true, shared: true }} crosshair={{ enable: true, lineType: 'Vertical' }} chartArea={{ border: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} zoomSettings={{ enableSelectionZooming: true, mode: 'X', enablePan: true }} title='AAPL Stock Price 2012-2017' legendSettings= {{ visible : false }}loaded={onChartLoad.bind(this)}>
<Inject services={[CandleSeries, Category, Tooltip, StripLine,Legend, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, AtrIndicator]} />
<RowsDirective>
<RowDirective height={'40%'} />
<RowDirective height={'60%'} />
</RowsDirective>
<AxesDirective>
<AxisDirective name='secondary' opposedPosition={true} rowIndex={0} majorGridLines={{ width: 0 }} lineStyle={{ width: 0 }} majorTickLines={{ width: 0 }} title={'ATR'}>
<StripLinesDirective>
<StripLineDirective start={0} end={14} text='' color='#6063ff' visible={true} opacity={0.1} zIndex='Behind' />
</StripLinesDirective>
</AxisDirective>
</AxesDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartValues} width={2} xName='period' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={{ enable: true }} />
</SeriesCollectionDirective>
<IndicatorsDirective>
<IndicatorDirective yAxisName='secondary' type='Atr' fill='#6063ff' seriesName='Apple Inc' period={3} animation={{ enable: true }} />
</IndicatorsDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates a chart with candle series and an average true range indicator. The trackball shows information about the stock rates and signal values of a day.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure an average true range indicator. This indicator measures the volatility of the stock by comparing the current value with the previous value.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices. </p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Average True Range Indicator, we need to inject
<code>AtrIndicator</code> module into <code>services</code>.
</p>
<p>
More information on the Average True Range Indicator can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/technical-indicators/#average-true-range-atr">documentation section</a>.
</p>
</div>
</div >
)
}
export default ATR;

290
src/chart/axis-crossing-functional.tsx
Просмотреть файл

@ -1,146 +1,146 @@
/**
* Sample for smart axis labels
*/
import * as React from "react";
import { useEffect, useRef } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ILoadedEventArgs, LineSeries, ScatterSeries, SplineSeries, Tooltip, Legend, Inject, ChartTheme, Highlight } from '@syncfusion/ej2-react-charts';
import { PropertyPane } from '../common/property-pane';
import { EmitType, Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
export let data1: any[] = [{ x: -6, y: 2 }, { x: -3, y: -4 }, { x: 1.5, y: 3.5 }, { x: 6, y: 4.5 }];
export let data2: any[] = [
{ x: -6, y: 2 }, { x: -5, y: 0 }, { x: -4.511, y: -0.977 }, { x: -3, y: -4 }, { x: -1.348, y: -1.247 },
{ x: -0.6, y: 0 }, { x: 0, y: 1 }, { x: 1.5, y: 3.5 }, { x: 6, y: 4.5 }
];
export let data3: any[] = [
{ x: -6, y: 2 }, { x: -5.291, y: 0 }, { x: -5, y: -0.774 }, { x: -3, y: -4 }, { x: -0.6, y: -0.965 },
{ x: -0.175, y: 0 }, { x: 0, y: 0.404 }, { x: 1.5, y: 3.5 }, { x: 3.863, y: 5.163 }, { x: 6, y: 4.5 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const AxisCrossing = () => {
useEffect(() => {
updateSampleSection();
}, [])
let chartInstance = useRef<ChartComponent>(null);
let dropElement = useRef<DropDownListComponent>(null);
let checkboxElement = useRef<HTMLInputElement>(null);
let numericValue = useRef<NumericTextBoxComponent>(null);
let droplist: { [key: string]: Object }[] = [
{ value: 'X' },
{ value: 'Y' },
];
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
const change = (): void => {
if (dropElement.current.value === 'X') {
checkboxElement.current.checked = chartInstance.current.primaryXAxis.placeNextToAxisLine;
numericValue.current.value = +chartInstance.current.primaryXAxis.crossesAt;
} else {
checkboxElement.current.checked = chartInstance.current.primaryYAxis.placeNextToAxisLine;
numericValue.current.value = +chartInstance.current.primaryYAxis.crossesAt;
}
chartInstance.current.dataBind();
};
const crosshingValue = (): void => {
if (dropElement.current.index === 0) {
chartInstance.current.primaryXAxis.crossesAt = numericValue.current.value;
} else {
chartInstance.current.primaryYAxis.crossesAt = numericValue.current.value;
}
chartInstance.current.dataBind();
};
const handleCheckboxChange = (e) => {
if (dropElement.current.index === 0) {
chartInstance.current.primaryXAxis.placeNextToAxisLine = checkboxElement.current.checked;
} else {
chartInstance.current.primaryYAxis.placeNextToAxisLine = checkboxElement.current.checked;
}
chartInstance.current.dataBind();
}
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section row'>
<div className='col-md-8'>
<ChartComponent id='charts' ref={chartInstance} style={{ textAlign: "center" }} primaryXAxis={{ minimum: -8, maximum: 8, interval: 2, valueType: 'Double', lineStyle: { width: 2 }, minorTickLines: { width: 0 }, majorTickLines: { width: 0 }, crossesAt: 0, minorTicksPerInterval: 3 }} chartArea={{ border: { width: 0 } }} primaryYAxis={{ minimum: -8, maximum: 8, interval: 2, lineStyle: { width: 2 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, crossesAt: 0, minorTicksPerInterval: 3 }} legendSettings = {{ visible: true, enableHighlight: true }} load={load.bind(this)} title="Spline Interpolation" tooltip={{ enable: true }} loaded={onChartLoad.bind(this)}>
<Inject services={[LineSeries, ScatterSeries, Highlight, SplineSeries, Tooltip, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' name="Linear Interpolation" type='Line' width={2} enableTooltip={false} fill='Blue' />
<SeriesDirective dataSource={data1} xName='x' yName='y' name="Cubic Spline Interpolation" type='Spline' width={2} enableTooltip={false} fill='Green' />
<SeriesDirective dataSource={data1} xName='x' yName='y' name="Data Points" type='Scatter' width={2} marker={{ visible: false, width: 7, height: 7 }} fill='red' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div className='col-md-4 property-section'>
<PropertyPane title='Properties'>
<table id='property' title='Properties' className='property-panel-table' style={{ width: '100%' }}>
<tr style={{ height: '50px' }}>
<td>
<div>Axis: </div>
</td>
<td>
<div>
<DropDownListComponent index={0} width="120px" id="selmode" change={change.bind(this)} ref={dropElement} dataSource={droplist} fields={{ text: 'value', value: 'value' }} value="X" />
</div>
</td>
</tr>
<tr style={{ height: '50px' }}>
<td style={{ width: '60%' }}>
<div>Crosses Value:</div>
</td>
<td style={{ width: '40%' }}>
<div>
<NumericTextBoxComponent value={0} min={-8} max={8} width={120} step={2} change={crosshingValue.bind(this)} style={{ marginLeft: '-5px' }} ref={numericValue} />
</div>
</td>
</tr>
<tr style={{ height: '50px' }}>
<td style={{ width: '60%' }}>
<div>Placing Label Near to Axis Line:</div>
</td>
<td style={{ width: '40%' }}>
<div>
<input type="checkbox" id="axisElements" onChange={(e) => handleCheckboxChange(e)} style={{ marginLeft: '-5px' }} defaultChecked={true} ref={checkboxElement} />
</div>
</td>
</tr>
</table>
</PropertyPane>
</div>
</div>
<div id="action-description">
<p>This sample illustrates an interpolation of data points between linear and cubic by using spline and line series.</p>
</div>
<div id="description">
<p>
This sample demonstrates the axis crossing behavior in chart.
Axis can be positioned anywhere in the chart area by using the <code>crossesAt</code> property of axis. This property specifies where the horizontal axis should intersect or cross the vertical axis and vice-versa.
</p>
<p>
Default value of crossesAt property is null. So, you can use <code>placeNextToAxisLine</code> property to place the axis labels and ticks next to axis line.
When there are multiple axes, you can choose an axis to cross by using <code>crossesInAxis</code> property.
If the axis name is not valid, primaryXAxis or primaryYAxis will be used for crossing, by default.
</p>
<p>
More information on the smart axis labels can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/axis-customization/#axis-crossing">documentation section</a>.
</p>
</div>
</div >
)
}
/**
* Sample for smart axis labels
*/
import * as React from "react";
import { useEffect, useRef } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ILoadedEventArgs, LineSeries, ScatterSeries, SplineSeries, Tooltip, Legend, Inject, ChartTheme, Highlight } from '@syncfusion/ej2-react-charts';
import { PropertyPane } from '../common/property-pane';
import { EmitType, Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
export let data1: any[] = [{ x: -6, y: 2 }, { x: -3, y: -4 }, { x: 1.5, y: 3.5 }, { x: 6, y: 4.5 }];
export let data2: any[] = [
{ x: -6, y: 2 }, { x: -5, y: 0 }, { x: -4.511, y: -0.977 }, { x: -3, y: -4 }, { x: -1.348, y: -1.247 },
{ x: -0.6, y: 0 }, { x: 0, y: 1 }, { x: 1.5, y: 3.5 }, { x: 6, y: 4.5 }
];
export let data3: any[] = [
{ x: -6, y: 2 }, { x: -5.291, y: 0 }, { x: -5, y: -0.774 }, { x: -3, y: -4 }, { x: -0.6, y: -0.965 },
{ x: -0.175, y: 0 }, { x: 0, y: 0.404 }, { x: 1.5, y: 3.5 }, { x: 3.863, y: 5.163 }, { x: 6, y: 4.5 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const AxisCrossing = () => {
useEffect(() => {
updateSampleSection();
}, [])
let chartInstance = useRef<ChartComponent>(null);
let dropElement = useRef<DropDownListComponent>(null);
let checkboxElement = useRef<HTMLInputElement>(null);
let numericValue = useRef<NumericTextBoxComponent>(null);
let droplist: { [key: string]: Object }[] = [
{ value: 'X' },
{ value: 'Y' },
];
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
const change = (): void => {
if (dropElement.current.value === 'X') {
checkboxElement.current.checked = chartInstance.current.primaryXAxis.placeNextToAxisLine;
numericValue.current.value = +chartInstance.current.primaryXAxis.crossesAt;
} else {
checkboxElement.current.checked = chartInstance.current.primaryYAxis.placeNextToAxisLine;
numericValue.current.value = +chartInstance.current.primaryYAxis.crossesAt;
}
chartInstance.current.dataBind();
};
const crosshingValue = (): void => {
if (dropElement.current.index === 0) {
chartInstance.current.primaryXAxis.crossesAt = numericValue.current.value;
} else {
chartInstance.current.primaryYAxis.crossesAt = numericValue.current.value;
}
chartInstance.current.dataBind();
};
const handleCheckboxChange = (e) => {
if (dropElement.current.index === 0) {
chartInstance.current.primaryXAxis.placeNextToAxisLine = checkboxElement.current.checked;
} else {
chartInstance.current.primaryYAxis.placeNextToAxisLine = checkboxElement.current.checked;
}
chartInstance.current.dataBind();
}
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section row'>
<div className='col-md-8'>
<ChartComponent id='charts' ref={chartInstance} style={{ textAlign: "center" }} primaryXAxis={{ minimum: -8, maximum: 8, interval: 2, valueType: 'Double', lineStyle: { width: 2 }, minorTickLines: { width: 0 }, majorTickLines: { width: 0 }, crossesAt: 0, minorTicksPerInterval: 3 }} chartArea={{ border: { width: 0 } }} primaryYAxis={{ minimum: -8, maximum: 8, interval: 2, lineStyle: { width: 2 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, crossesAt: 0, minorTicksPerInterval: 3 }} legendSettings = {{ visible: true, enableHighlight: true }} load={load.bind(this)} title="Spline Interpolation" tooltip={{ enable: true }} loaded={onChartLoad.bind(this)}>
<Inject services={[LineSeries, ScatterSeries, Highlight, SplineSeries, Tooltip, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' name="Linear Interpolation" type='Line' width={2} enableTooltip={false} fill='Blue' />
<SeriesDirective dataSource={data1} xName='x' yName='y' name="Cubic Spline Interpolation" type='Spline' width={2} enableTooltip={false} fill='Green' />
<SeriesDirective dataSource={data1} xName='x' yName='y' name="Data Points" type='Scatter' width={2} marker={{ visible: false, width: 7, height: 7 }} fill='red' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div className='col-md-4 property-section'>
<PropertyPane title='Properties'>
<table id='property' title='Properties' className='property-panel-table' style={{ width: '100%' }}>
<tr style={{ height: '50px' }}>
<td>
<div>Axis: </div>
</td>
<td>
<div>
<DropDownListComponent index={0} width="120px" id="selmode" change={change.bind(this)} ref={dropElement} dataSource={droplist} fields={{ text: 'value', value: 'value' }} value="X" />
</div>
</td>
</tr>
<tr style={{ height: '50px' }}>
<td style={{ width: '60%' }}>
<div>Crosses Value:</div>
</td>
<td style={{ width: '40%' }}>
<div>
<NumericTextBoxComponent value={0} min={-8} max={8} width={120} step={2} change={crosshingValue.bind(this)} style={{ marginLeft: '-5px' }} ref={numericValue} />
</div>
</td>
</tr>
<tr style={{ height: '50px' }}>
<td style={{ width: '60%' }}>
<div>Placing Label Near to Axis Line:</div>
</td>
<td style={{ width: '40%' }}>
<div>
<input type="checkbox" id="axisElements" onChange={(e) => handleCheckboxChange(e)} style={{ marginLeft: '-5px' }} defaultChecked={true} ref={checkboxElement} />
</div>
</td>
</tr>
</table>
</PropertyPane>
</div>
</div>
<div id="action-description">
<p>This sample illustrates an interpolation of data points between linear and cubic by using spline and line series.</p>
</div>
<div id="description">
<p>
This sample demonstrates the axis crossing behavior in chart.
Axis can be positioned anywhere in the chart area by using the <code>crossesAt</code> property of axis. This property specifies where the horizontal axis should intersect or cross the vertical axis and vice-versa.
</p>
<p>
Default value of crossesAt property is null. So, you can use <code>placeNextToAxisLine</code> property to place the axis labels and ticks next to axis line.
When there are multiple axes, you can choose an axis to cross by using <code>crossesInAxis</code> property.
If the axis name is not valid, primaryXAxis or primaryYAxis will be used for crossing, by default.
</p>
<p>
More information on the smart axis labels can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/axis-customization/#axis-crossing">documentation section</a>.
</p>
</div>
</div >
)
}
export default AxisCrossing;

154
src/chart/bar-functional.tsx
Просмотреть файл

@ -1,77 +1,77 @@
/**
* Sample for Bar series
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, DataLabel, BarSeries, Category, Legend, Tooltip, ILoadedEventArgs, ChartTheme, Highlight } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1: any[] = [
{ x: 'Japan', y: 1.71 }, { x: 'France', y: 1.82 },
{ x: 'India', y: 6.68 }, { x: 'Germany', y: 2.22 }, { x: 'Italy', y: 1.50 }, { x: 'Canada', y: 3.05 }
];
export let data2: any[] = [
{ x: 'Japan', y: 6.02 }, { x: 'France', y: 3.19 },
{ x: 'India', y: 3.28 }, { x: 'Germany', y: 4.56 }, { x: 'Italy', y: 2.40 }, { x: 'Canada', y: 2.04 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Bar sample
*/
const Bar = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<div>
<ChartComponent id='charts' style={{ textAlign: "center" }} legendSettings={{ enableHighlight: true }} primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 } }} primaryYAxis={{ labelFormat: '{value}%', title: 'GDP (In Percentage)', edgeLabelPlacement: 'Shift', majorTickLines: { width: 0 }, lineStyle: { width: 0 } }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} title='GDP by Country in 2017' loaded={onChartLoad.bind(this)} tooltip={{ enable: true }}>
<Inject services={[BarSeries, DataLabel, Category, Legend, Tooltip, Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' type='Bar' columnSpacing={0.1} name='GDP' width={2} />
<SeriesDirective dataSource={data2} xName='x' yName='y' type='Bar' columnSpacing={0.1} name="Share in World's GDP" width={2} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div style={{ float: 'right', marginRight: '10px' }}>
Source: &nbsp; <a href="https://www.gov.uk/" target='_blank'>www.gov.uk</a>
</div>
</div>
<div id="action-description">
<p>This React bar chart example visualizes GDP data by country for the year 2017 with a default bar series.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure the bar chart. The bar chart is similar to the column chart, but the orientation of the y-axis is horizontal rather than vertical.</p>
<p>
<code>Tooltips</code> are enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use bar series, we need to inject
<code>BarSeries</code> module into <code>services</code>.
</p>
<p>
More information on the bar series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#bar-chart">documentation section</a>.
</p>
</div>
</div>
)
}
export default Bar;
/**
* Sample for Bar series
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, DataLabel, BarSeries, Category, Legend, Tooltip, ILoadedEventArgs, ChartTheme, Highlight } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1: any[] = [
{ x: 'Japan', y: 1.71 }, { x: 'France', y: 1.82 },
{ x: 'India', y: 6.68 }, { x: 'Germany', y: 2.22 }, { x: 'Italy', y: 1.50 }, { x: 'Canada', y: 3.05 }
];
export let data2: any[] = [
{ x: 'Japan', y: 6.02 }, { x: 'France', y: 3.19 },
{ x: 'India', y: 3.28 }, { x: 'Germany', y: 4.56 }, { x: 'Italy', y: 2.40 }, { x: 'Canada', y: 2.04 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Bar sample
*/
const Bar = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<div>
<ChartComponent id='charts' style={{ textAlign: "center" }} legendSettings={{ enableHighlight: true }} primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 } }} primaryYAxis={{ labelFormat: '{value}%', title: 'GDP (In Percentage)', edgeLabelPlacement: 'Shift', majorTickLines: { width: 0 }, lineStyle: { width: 0 } }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} title='GDP by Country in 2017' loaded={onChartLoad.bind(this)} tooltip={{ enable: true }}>
<Inject services={[BarSeries, DataLabel, Category, Legend, Tooltip, Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' type='Bar' columnSpacing={0.1} name='GDP' width={2} />
<SeriesDirective dataSource={data2} xName='x' yName='y' type='Bar' columnSpacing={0.1} name="Share in World's GDP" width={2} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div style={{ float: 'right', marginRight: '10px' }}>
Source: &nbsp; <a href="https://www.gov.uk/" target='_blank'>www.gov.uk</a>
</div>
</div>
<div id="action-description">
<p>This React bar chart example visualizes GDP data by country for the year 2017 with a default bar series.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure the bar chart. The bar chart is similar to the column chart, but the orientation of the y-axis is horizontal rather than vertical.</p>
<p>
<code>Tooltips</code> are enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use bar series, we need to inject
<code>BarSeries</code> module into <code>services</code>.
</p>
<p>
More information on the bar series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#bar-chart">documentation section</a>.
</p>
</div>
</div>
)
}
export default Bar;

130
src/chart/bollinger-functional.tsx
Просмотреть файл

@ -1,65 +1,65 @@
/**
* Sample for Bollinger Band Indicator
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, BollingerBands, ChartTheme, IndicatorsDirective, IndicatorDirective, RangeAreaSeries, Legend } from '@syncfusion/ej2-react-charts';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Bollinger sample
*/
const Bollinger = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', majorGridLines: { width: 0 }, zoomFactor: 0.2, zoomPosition: 0.6, crosshairTooltip: { enable: true } }} primaryYAxis={{ title: 'Price (in Million)', intervalType: 'Months', labelFormat: '${value}M', minimum: 50, maximum: 170, interval: 30, majorGridLines: { width: 1 }, lineStyle: { width: 0 } }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true }} legendSettings={{ visible: false }} width={Browser.isDevice ? '100%' : '75%'} crosshair={{ enable: true, lineType: 'Vertical' }} zoomSettings={{ enablePinchZooming: true, enableDeferredZooming:true,enableSelectionZooming: true, mode: 'X', enablePan: true }} title='AAPL Stock Price 2012-2017' loaded={onChartLoad.bind(this)}>
<Inject services={[CandleSeries, Category, Tooltip, DateTime, Legend, Zoom, Logarithmic, Crosshair, LineSeries, RangeAreaSeries, BollingerBands]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartValues} width={2} xName='period' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={{ enable: false }} />
</SeriesCollectionDirective>
<IndicatorsDirective>
<IndicatorDirective type='BollingerBands' field='Close' seriesName='Apple Inc' fill='#606eff' period={14} animation={{ enable: true }} upperLine={{ color: '#ffb735', width: 1 }} lowerLine={{ color: '#f2ec2f', width: 1 }} />
</IndicatorsDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates a chart with candle series and a Bollinger band indicator. The trackball shows information about the stock, signal line, upper line, and lower line values each day.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure a Bollinger band indicator. This indicator shows the upper and lower limits of normal price movements based on the standard deviation of prices. The bands offer insights into price and volatility.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Bollingear Bands Indicator, we need to inject
<code>BollingerBands</code> module into <code>services</code>.
</p>
<p>
More information on the Bollingear Bands Indicator can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/technical-indicators/#bollinger-band">documentation section</a>.
</p>
</div>
</div >
)
}
export default Bollinger;
/**
* Sample for Bollinger Band Indicator
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, BollingerBands, ChartTheme, IndicatorsDirective, IndicatorDirective, RangeAreaSeries, Legend } from '@syncfusion/ej2-react-charts';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Bollinger sample
*/
const Bollinger = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', majorGridLines: { width: 0 }, zoomFactor: 0.2, zoomPosition: 0.6, crosshairTooltip: { enable: true } }} primaryYAxis={{ title: 'Price (in Million)', intervalType: 'Months', labelFormat: '${value}M', minimum: 50, maximum: 170, interval: 30, majorGridLines: { width: 1 }, lineStyle: { width: 0 } }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true }} legendSettings={{ visible: false }} width={Browser.isDevice ? '100%' : '75%'} crosshair={{ enable: true, lineType: 'Vertical' }} zoomSettings={{ enablePinchZooming: true, enableDeferredZooming:true,enableSelectionZooming: true, mode: 'X', enablePan: true }} title='AAPL Stock Price 2012-2017' loaded={onChartLoad.bind(this)}>
<Inject services={[CandleSeries, Category, Tooltip, DateTime, Legend, Zoom, Logarithmic, Crosshair, LineSeries, RangeAreaSeries, BollingerBands]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartValues} width={2} xName='period' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={{ enable: false }} />
</SeriesCollectionDirective>
<IndicatorsDirective>
<IndicatorDirective type='BollingerBands' field='Close' seriesName='Apple Inc' fill='#606eff' period={14} animation={{ enable: true }} upperLine={{ color: '#ffb735', width: 1 }} lowerLine={{ color: '#f2ec2f', width: 1 }} />
</IndicatorsDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates a chart with candle series and a Bollinger band indicator. The trackball shows information about the stock, signal line, upper line, and lower line values each day.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure a Bollinger band indicator. This indicator shows the upper and lower limits of normal price movements based on the standard deviation of prices. The bands offer insights into price and volatility.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Bollingear Bands Indicator, we need to inject
<code>BollingerBands</code> module into <code>services</code>.
</p>
<p>
More information on the Bollingear Bands Indicator can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/technical-indicators/#bollinger-band">documentation section</a>.
</p>
</div>
</div >
)
}
export default Bollinger;

220
src/chart/box-whisker-functional.tsx
Просмотреть файл

@ -1,111 +1,111 @@
/**
* Sample for Box and Whisker
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, ILoadedEventArgs, ChartTheme, IPointRenderEventArgs, BoxAndWhiskerSeries, Tooltip, BoxPlotMode, Inject } from '@syncfusion/ej2-react-charts';
import { PropertyPane } from '../common/property-pane';
import { Browser } from '@syncfusion/ej2-base';
import { EmitType } from '@syncfusion/ej2-base';
import { pointFabricColors, pointMaterialDarkColors, pointMaterialColors, pointBootstrap5DarkColors, pointBootstrapColors, pointHighContrastColors, pointFluentDarkColors, pointFluentColors, pointTailwindDarkColors, pointTailwindColors, pointBootstrap5Colors, pointMaterial3DarkColors, pointMaterial3Colors } from './theme-color';
import { updateSampleSection } from '../common/sample-base';
export let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = pointFabricColors[args.point.index % 10];;
} else if (selectedTheme === 'material-dark') {
args.fill = pointMaterialDarkColors[args.point.index % 10];;
} else if (selectedTheme === 'material') {
args.fill = pointMaterialColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5-dark') {
args.fill = pointBootstrap5DarkColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5') {
args.fill = pointBootstrap5Colors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap4') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap-dark') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'highcontrast') {
args.fill = pointHighContrastColors[args.point.index % 10];
} else if (selectedTheme === 'fluent-dark') {
args.fill = pointFluentDarkColors[args.point.index % 10];
} else if (selectedTheme === 'fluent') {
args.fill = pointFluentColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind-dark') {
args.fill = pointTailwindDarkColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind') {
args.fill = pointTailwindColors[args.point.index % 10];
} else if (selectedTheme === 'material3-dark') {
args.fill = pointMaterial3DarkColors[args.point.index % 10];
} else if (selectedTheme === 'material3') {
args.fill = pointMaterial3Colors[args.point.index % 10];
}
};
export let data1: any[] = [
{ x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
{ x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
{ x: 'Training', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
{ x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
{ x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
{ x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
{ x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
{ x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
{ x: 'HR', y: [28, 29, 30, 31, 32, 34, 35, 36] }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* BoxWhisker sample
*/
const BoxWhisker = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
document.getElementById('charts').setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'Category', interval: 1, majorGridLines: { width: 0 }, edgeLabelPlacement: 'Shift', labelIntersectAction : Browser.isDevice ? 'None' : 'Rotate45', labelRotation: Browser.isDevice ? -45 : 0, majorTickLines: {width : 0}, minorTickLines: {width: 0} }} chartArea={{ border: { width: 0 } }} primaryYAxis={{ title: 'Age', minimum: 10, maximum: 60, interval: 10, majorGridLines: { width: 1 }, majorTickLines: { width: 0 }, lineStyle: {width: 0} }} pointRender={pointRender} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} title="Employee Age Group in Various Department" loaded={onChartLoad.bind(this)} tooltip={{ enable: true }}>
<Inject services={[Category, BoxAndWhiskerSeries, Tooltip]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' type='BoxAndWhisker' marker={{ visible: true, height: 7, width: 7 }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This React Box and Whisker Chart example visualizes the employee’s age group in various departments of a company with box and whisker chart.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure a box and whisker chart or box plot. This chart is used to visualize a group of numerical data through their data quartiles. Box plots may also have lines extending vertically from the boxes (whiskers) indicating variability outside the upper and lower quartiles. Marker and DataLabel are used to represent individual data and its values.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use BoxAndWhisker series, we need to inject
<code>BoxAndWhiskerSeries</code> module into <code>services</code>.
</p>
<p>
More information on the Box and Whisker series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/other-types/#boxplotmode">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Box and Whisker
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, ILoadedEventArgs, ChartTheme, IPointRenderEventArgs, BoxAndWhiskerSeries, Tooltip, BoxPlotMode, Inject } from '@syncfusion/ej2-react-charts';
import { PropertyPane } from '../common/property-pane';
import { Browser } from '@syncfusion/ej2-base';
import { EmitType } from '@syncfusion/ej2-base';
import { pointFabricColors, pointMaterialDarkColors, pointMaterialColors, pointBootstrap5DarkColors, pointBootstrapColors, pointHighContrastColors, pointFluentDarkColors, pointFluentColors, pointTailwindDarkColors, pointTailwindColors, pointBootstrap5Colors, pointMaterial3DarkColors, pointMaterial3Colors } from './theme-color';
import { updateSampleSection } from '../common/sample-base';
export let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = pointFabricColors[args.point.index % 10];;
} else if (selectedTheme === 'material-dark') {
args.fill = pointMaterialDarkColors[args.point.index % 10];;
} else if (selectedTheme === 'material') {
args.fill = pointMaterialColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5-dark') {
args.fill = pointBootstrap5DarkColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5') {
args.fill = pointBootstrap5Colors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap4') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap-dark') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'highcontrast') {
args.fill = pointHighContrastColors[args.point.index % 10];
} else if (selectedTheme === 'fluent-dark') {
args.fill = pointFluentDarkColors[args.point.index % 10];
} else if (selectedTheme === 'fluent') {
args.fill = pointFluentColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind-dark') {
args.fill = pointTailwindDarkColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind') {
args.fill = pointTailwindColors[args.point.index % 10];
} else if (selectedTheme === 'material3-dark') {
args.fill = pointMaterial3DarkColors[args.point.index % 10];
} else if (selectedTheme === 'material3') {
args.fill = pointMaterial3Colors[args.point.index % 10];
}
};
export let data1: any[] = [
{ x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
{ x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
{ x: 'Training', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
{ x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
{ x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
{ x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
{ x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
{ x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
{ x: 'HR', y: [28, 29, 30, 31, 32, 34, 35, 36] }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* BoxWhisker sample
*/
const BoxWhisker = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
document.getElementById('charts').setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'Category', interval: 1, majorGridLines: { width: 0 }, edgeLabelPlacement: 'Shift', labelIntersectAction : Browser.isDevice ? 'None' : 'Rotate45', labelRotation: Browser.isDevice ? -45 : 0, majorTickLines: {width : 0}, minorTickLines: {width: 0} }} chartArea={{ border: { width: 0 } }} primaryYAxis={{ title: 'Age', minimum: 10, maximum: 60, interval: 10, majorGridLines: { width: 1 }, majorTickLines: { width: 0 }, lineStyle: {width: 0} }} pointRender={pointRender} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} title="Employee Age Group in Various Department" loaded={onChartLoad.bind(this)} tooltip={{ enable: true }}>
<Inject services={[Category, BoxAndWhiskerSeries, Tooltip]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' type='BoxAndWhisker' marker={{ visible: true, height: 7, width: 7 }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This React Box and Whisker Chart example visualizes the employee’s age group in various departments of a company with box and whisker chart.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure a box and whisker chart or box plot. This chart is used to visualize a group of numerical data through their data quartiles. Box plots may also have lines extending vertically from the boxes (whiskers) indicating variability outside the upper and lower quartiles. Marker and DataLabel are used to represent individual data and its values.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use BoxAndWhisker series, we need to inject
<code>BoxAndWhiskerSeries</code> module into <code>services</code>.
</p>
<p>
More information on the Box and Whisker series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/other-types/#boxplotmode">documentation section</a>.
</p>
</div>
</div>
)
}
export default BoxWhisker;

282
src/chart/bubble-functional.tsx
Просмотреть файл

@ -1,142 +1,142 @@
/**
* Sample for Bubble Series
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { EmitType } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, BubbleSeries, Tooltip, IPointRenderEventArgs, ILoadedEventArgs, ChartTheme, DataLabel } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { bubbleFabricColors, bubbleMaterialDarkColors, bubbleMaterialColors, bubbleBootstrap5DarkColors, bubbleBootstrapColors, bubbleHighContrastColors, bubbleFluentDarkColors, bubbleFluentColors, bubbleTailwindDarkColors, bubbleTailwindColors, pointFabricColors, pointMaterialDarkColors, pointMaterialColors, pointBootstrap5DarkColors, pointBootstrapColors, pointHighContrastColors, pointFluentDarkColors, pointFluentColors, pointTailwindDarkColors, pointTailwindColors, bubbleBootstrap5Colors, pointBootstrap5Colors, bubbleMaterial3Colors, pointMaterial3Colors, bubbleMaterial3DarkColors, pointMaterial3DarkColors } from './theme-color';
import { updateSampleSection } from '../common/sample-base';
export let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'material';
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = bubbleFabricColors[args.point.index % 10];
args.border.color = pointFabricColors[args.point.index % 10];
} else if (selectedTheme === 'material-dark') {
args.fill = bubbleMaterialDarkColors[args.point.index % 10];
args.border.color = pointMaterialDarkColors[args.point.index % 10];
} else if (selectedTheme === 'material') {
args.fill = bubbleMaterialColors[args.point.index % 10];
args.border.color = pointMaterialColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5-dark') {
args.fill = bubbleBootstrap5DarkColors[args.point.index % 10];
args.border.color = pointBootstrap5DarkColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5') {
args.fill = bubbleBootstrap5Colors[args.point.index % 10];
args.border.color = pointBootstrap5Colors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap') {
args.fill = bubbleBootstrapColors[args.point.index % 10];
args.border.color = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap4') {
args.fill = bubbleBootstrapColors[args.point.index % 10];
args.border.color = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap-dark') {
args.fill = bubbleBootstrapColors[args.point.index % 10];
args.border.color = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'highcontrast') {
args.fill = bubbleHighContrastColors[args.point.index % 10];
args.border.color = pointHighContrastColors[args.point.index % 10];
} else if (selectedTheme === 'fluent-dark') {
args.fill = bubbleFluentDarkColors[args.point.index % 10];
args.border.color = pointFluentDarkColors[args.point.index % 10];
} else if (selectedTheme === 'fluent') {
args.fill = bubbleFluentColors[args.point.index % 10];
args.border.color = pointFluentColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind-dark') {
args.fill = bubbleTailwindDarkColors[args.point.index % 10];
args.border.color = pointTailwindDarkColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind') {
args.fill = bubbleTailwindColors[args.point.index % 10];
args.border.color = pointTailwindColors[args.point.index % 10];
} else if (selectedTheme === 'material3') {
args.fill = bubbleMaterial3Colors[args.point.index % 10];
args.border.color = pointMaterial3Colors[args.point.index % 10];
} else if (selectedTheme === 'material3-dark') {
args.fill = bubbleMaterial3DarkColors[args.point.index % 10];
args.border.color = pointMaterial3DarkColors[args.point.index % 10];
}
};
export let data: any[] = [
{ x: 92.2, y: 7.8, size: 1.347, toolTipMappingName: 'China', text:'China' },
{ x: 74, y: 6.5, size: 1.241, toolTipMappingName: 'India', text:'India' },
{ x: 90.4, y: 6.0, size: 0.238, toolTipMappingName: 'Indonesia', text: Browser.isDevice ? 'ID' : 'Indonesia' },
{ x: 99.4, y: 2.2, size: 0.312, toolTipMappingName: 'United States' , text:'US'},
{ x: 88.6, y: 1.3, size: 0.197, toolTipMappingName: 'Brazil' , text: Browser.isDevice ? 'BR' : 'Brazil'},
{ x: 99, y: 0.7, size: 0.0818, toolTipMappingName: 'Germany' , text: Browser.isDevice ? 'DE' : 'Germany'},
{ x: 72, y: 2.0, size: 0.0826, toolTipMappingName: 'Egypt' , text: Browser.isDevice ? 'EG' : 'Egypt'},
{ x: 99.6, y: 3.4, size: 0.143, toolTipMappingName: 'Russia' , text: Browser.isDevice ? 'RUS' : 'Russia' },
{ x: 96.5, y: 0.2, size: 0.128, toolTipMappingName: 'Japan' , text: Browser.isDevice ? 'JP' : 'Japan'},
{ x: 86.1, y: 4.0, size: 0.115, toolTipMappingName: 'MeLiteracy Ion' , text:'MLI'},
{ x: 92.6, y: 5.2, size: 0.096, toolTipMappingName: 'Philippines' , text:'PH'},
{ x: 61.3, y: 1.45, size: 0.162, toolTipMappingName: 'Nigeria' , text:'Nigeria'},
{ x: 82.2, y: 3.97, size: 0.7, toolTipMappingName: 'Hong Kong' , text: Browser.isDevice ? 'HK' : 'Hong Kong'},
{ x: 79.2, y: 4.9, size: 0.162, toolTipMappingName: 'Netherland' , text:'NL'},
{ x: 72.5, y: 4.5, size: 0.7, toolTipMappingName: 'Jordan' , text:'Jordan'},
{ x: 81, y: 2.5, size: 0.21, toolTipMappingName: 'Australia' , text: Browser.isDevice ? 'AU' : 'Australia'},
{ x: 66.8, y: 3.9, size: 0.028, toolTipMappingName: 'Mongolia' , text:'MN'},
{ x: 78.4, y: 2.9, size: 0.231, toolTipMappingName: 'Taiwan' , text: Browser.isDevice ? 'TW' : 'Taiwan'}
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
ellipse[id*=_Trackball_0] {
stroke-width: 1 !important;
}`;
/**
* Bubble sample
*/
const Bubble = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ minimum: 65, maximum: 102, interval: 5, crossesAt: 5 }} load={load.bind(this)} primaryYAxis={{ minimum: 0, maximum: 10, crossesAt: 85, interval: 2.5 }} width={Browser.isDevice ? '100%' : '75%'} title='World Countries Details' pointRender={pointRender} legendSettings={{ visible: false }} loaded={onChartLoad.bind(this)} tooltip={{ enableMarker: false, enable: true, header: "<b>${point.tooltip}</b>", format: "Literacy Rate : <b>${point.x}%</b> <br/>GDP Annual Growth Rate : <b>${point.y}</b><br/>Population : <b>${point.size} Billion</b>" }}>
<Inject services={[BubbleSeries, Tooltip, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} type='Bubble' minRadius={3} maxRadius={8} tooltipMappingName='toolTipMappingName' border={{ width: 2 }} xName='x' yName='y' size='size' marker={{ dataLabel: { visible: true, name: 'text', position: 'Middle', font: { fontWeight: '500', color: '#ffffff' } } }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This React bubble chart example visualizes the literacy rates and GDP growth rates of countries. A tooltip shows more information about the countries.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the bubble chart. The bubble chart is a type of chart that shows three dimensions of the data. Each point is drawn as a bubble, where the bubble's size depends on the <code>Size</code> property. You can also use the <code>Fill</code> property to customize the data appearance.
</p>
<p>
<code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use bubble series, we need to inject
<code>BubbleSeries</code> module into <code>services</code>.
</p>
<p>
More information on the bubble series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#bubble-chart">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Bubble Series
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { EmitType } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, BubbleSeries, Tooltip, IPointRenderEventArgs, ILoadedEventArgs, ChartTheme, DataLabel } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { bubbleFabricColors, bubbleMaterialDarkColors, bubbleMaterialColors, bubbleBootstrap5DarkColors, bubbleBootstrapColors, bubbleHighContrastColors, bubbleFluentDarkColors, bubbleFluentColors, bubbleTailwindDarkColors, bubbleTailwindColors, pointFabricColors, pointMaterialDarkColors, pointMaterialColors, pointBootstrap5DarkColors, pointBootstrapColors, pointHighContrastColors, pointFluentDarkColors, pointFluentColors, pointTailwindDarkColors, pointTailwindColors, bubbleBootstrap5Colors, pointBootstrap5Colors, bubbleMaterial3Colors, pointMaterial3Colors, bubbleMaterial3DarkColors, pointMaterial3DarkColors } from './theme-color';
import { updateSampleSection } from '../common/sample-base';
export let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'material';
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = bubbleFabricColors[args.point.index % 10];
args.border.color = pointFabricColors[args.point.index % 10];
} else if (selectedTheme === 'material-dark') {
args.fill = bubbleMaterialDarkColors[args.point.index % 10];
args.border.color = pointMaterialDarkColors[args.point.index % 10];
} else if (selectedTheme === 'material') {
args.fill = bubbleMaterialColors[args.point.index % 10];
args.border.color = pointMaterialColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5-dark') {
args.fill = bubbleBootstrap5DarkColors[args.point.index % 10];
args.border.color = pointBootstrap5DarkColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5') {
args.fill = bubbleBootstrap5Colors[args.point.index % 10];
args.border.color = pointBootstrap5Colors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap') {
args.fill = bubbleBootstrapColors[args.point.index % 10];
args.border.color = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap4') {
args.fill = bubbleBootstrapColors[args.point.index % 10];
args.border.color = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap-dark') {
args.fill = bubbleBootstrapColors[args.point.index % 10];
args.border.color = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'highcontrast') {
args.fill = bubbleHighContrastColors[args.point.index % 10];
args.border.color = pointHighContrastColors[args.point.index % 10];
} else if (selectedTheme === 'fluent-dark') {
args.fill = bubbleFluentDarkColors[args.point.index % 10];
args.border.color = pointFluentDarkColors[args.point.index % 10];
} else if (selectedTheme === 'fluent') {
args.fill = bubbleFluentColors[args.point.index % 10];
args.border.color = pointFluentColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind-dark') {
args.fill = bubbleTailwindDarkColors[args.point.index % 10];
args.border.color = pointTailwindDarkColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind') {
args.fill = bubbleTailwindColors[args.point.index % 10];
args.border.color = pointTailwindColors[args.point.index % 10];
} else if (selectedTheme === 'material3') {
args.fill = bubbleMaterial3Colors[args.point.index % 10];
args.border.color = pointMaterial3Colors[args.point.index % 10];
} else if (selectedTheme === 'material3-dark') {
args.fill = bubbleMaterial3DarkColors[args.point.index % 10];
args.border.color = pointMaterial3DarkColors[args.point.index % 10];
}
};
export let data: any[] = [
{ x: 92.2, y: 7.8, size: 1.347, toolTipMappingName: 'China', text:'China' },
{ x: 74, y: 6.5, size: 1.241, toolTipMappingName: 'India', text:'India' },
{ x: 90.4, y: 6.0, size: 0.238, toolTipMappingName: 'Indonesia', text: Browser.isDevice ? 'ID' : 'Indonesia' },
{ x: 99.4, y: 2.2, size: 0.312, toolTipMappingName: 'United States' , text:'US'},
{ x: 88.6, y: 1.3, size: 0.197, toolTipMappingName: 'Brazil' , text: Browser.isDevice ? 'BR' : 'Brazil'},
{ x: 99, y: 0.7, size: 0.0818, toolTipMappingName: 'Germany' , text: Browser.isDevice ? 'DE' : 'Germany'},
{ x: 72, y: 2.0, size: 0.0826, toolTipMappingName: 'Egypt' , text: Browser.isDevice ? 'EG' : 'Egypt'},
{ x: 99.6, y: 3.4, size: 0.143, toolTipMappingName: 'Russia' , text: Browser.isDevice ? 'RUS' : 'Russia' },
{ x: 96.5, y: 0.2, size: 0.128, toolTipMappingName: 'Japan' , text: Browser.isDevice ? 'JP' : 'Japan'},
{ x: 86.1, y: 4.0, size: 0.115, toolTipMappingName: 'MeLiteracy Ion' , text:'MLI'},
{ x: 92.6, y: 5.2, size: 0.096, toolTipMappingName: 'Philippines' , text:'PH'},
{ x: 61.3, y: 1.45, size: 0.162, toolTipMappingName: 'Nigeria' , text:'Nigeria'},
{ x: 82.2, y: 3.97, size: 0.7, toolTipMappingName: 'Hong Kong' , text: Browser.isDevice ? 'HK' : 'Hong Kong'},
{ x: 79.2, y: 4.9, size: 0.162, toolTipMappingName: 'Netherland' , text:'NL'},
{ x: 72.5, y: 4.5, size: 0.7, toolTipMappingName: 'Jordan' , text:'Jordan'},
{ x: 81, y: 2.5, size: 0.21, toolTipMappingName: 'Australia' , text: Browser.isDevice ? 'AU' : 'Australia'},
{ x: 66.8, y: 3.9, size: 0.028, toolTipMappingName: 'Mongolia' , text:'MN'},
{ x: 78.4, y: 2.9, size: 0.231, toolTipMappingName: 'Taiwan' , text: Browser.isDevice ? 'TW' : 'Taiwan'}
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
ellipse[id*=_Trackball_0] {
stroke-width: 1 !important;
}`;
/**
* Bubble sample
*/
const Bubble = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ minimum: 65, maximum: 102, interval: 5, crossesAt: 5 }} load={load.bind(this)} primaryYAxis={{ minimum: 0, maximum: 10, crossesAt: 85, interval: 2.5 }} width={Browser.isDevice ? '100%' : '75%'} title='World Countries Details' pointRender={pointRender} legendSettings={{ visible: false }} loaded={onChartLoad.bind(this)} tooltip={{ enableMarker: false, enable: true, header: "<b>${point.tooltip}</b>", format: "Literacy Rate : <b>${point.x}%</b> <br/>GDP Annual Growth Rate : <b>${point.y}</b><br/>Population : <b>${point.size} Billion</b>" }}>
<Inject services={[BubbleSeries, Tooltip, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} type='Bubble' minRadius={3} maxRadius={8} tooltipMappingName='toolTipMappingName' border={{ width: 2 }} xName='x' yName='y' size='size' marker={{ dataLabel: { visible: true, name: 'text', position: 'Middle', font: { fontWeight: '500', color: '#ffffff' } } }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This React bubble chart example visualizes the literacy rates and GDP growth rates of countries. A tooltip shows more information about the countries.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the bubble chart. The bubble chart is a type of chart that shows three dimensions of the data. Each point is drawn as a bubble, where the bubble's size depends on the <code>Size</code> property. You can also use the <code>Fill</code> property to customize the data appearance.
</p>
<p>
<code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use bubble series, we need to inject
<code>BubbleSeries</code> module into <code>services</code>.
</p>
<p>
More information on the bubble series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#bubble-chart">documentation section</a>.
</p>
</div>
</div>
)
}
export default Bubble;

168
src/chart/candle-functional.tsx
Просмотреть файл

@ -1,85 +1,85 @@
/**
* Sample for Candle Series
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, ColumnSeries, Crosshair, StripLine, IAxisLabelRenderEventArgs, ChartTheme, RowDirective, RowsDirective, SeriesDirective, Inject } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
export let zoomFactor: number;
export let zoomPosition: number;
export let pointColors: string[] = [];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Candle sample
*/
const Candle = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
args.chart.primaryXAxis.zoomFactor = zoomFactor;
args.chart.primaryXAxis.zoomPosition = zoomPosition;
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
const axisLabelRender = (args: IAxisLabelRenderEventArgs): void => {
args.text = args.text.replace("0000000M", "M");
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<div className="row">
<ChartComponent id='charts' style={{ textAlign: "center" }} load={load.bind(this)} primaryXAxis={{ valueType: 'DateTime', crosshairTooltip: { enable: true }, majorGridLines: { width: 0 } }} primaryYAxis={{ title: 'Volume', labelFormat: '{value}M', opposedPosition: true, majorGridLines: { width: 1 }, lineStyle: { width: 0 } }} tooltip={{ enable: true, header: "",format: "<b>Apple Inc.(AAPL)</b> <br> High : <b>${point.high}</b> <br> Low : <b>${point.low}</b> <br> Open : <b>${point.open}</b> <br> Close : <b>${point.close}</b> <br> Volume : <b>${point.volume}</b>" }} width={Browser.isDevice ? '100%' : '80%'} axisLabelRender={axisLabelRender.bind(this)} chartArea={{ border: { width: 0 } }} title="AAPL Historical" loaded={onChartLoad.bind(this)}>
<Inject services={[CandleSeries, StripLine, Category, Tooltip, DateTime, Zoom, ColumnSeries, Logarithmic, Crosshair]} />
<RowsDirective>
<RowDirective height={'30%'} />
<RowDirective height={'70%'} />
</RowsDirective>
<AxesDirective>
<AxisDirective name='secondary' rangePadding={"None"} maximum= {150} minimum= {55} opposedPosition={true} rowIndex={1} majorGridLines={{ width: 1 }} labelFormat='n0' title='Price' plotOffset={30} lineStyle={{ width: 0 }} />
</AxesDirective>
<SeriesCollectionDirective>
<SeriesDirective type='Column' dataSource={chartValues} animation={{ enable: true }} xName='period' yName='volume' enableTooltip={false} name='Volume' />
<SeriesDirective type='Candle' yAxisName='secondary' bearFillColor='#2ecd71' bullFillColor='#e74c3d' dataSource={chartValues} animation={{ enable: true }} xName='period' low='low' high='high' open='open' close='close' name='Apple Inc' volume='volume' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
<div id="action-description">
<p>This sample visualizes the AAPL stock price with a default candlestick series. The tooltip and crosshair show information about the stock price.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure the candlestick series. This chart shows financial data and trends at equal intervals. It can often be combined with line and column charts to show the closing value of the stock and volume of the data.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Candle series, we need to inject
<code>CandleSeries</code> module into <code>services</code>.
</p>
<p>
More information on the Candle series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/financial-types/#candle">documentation section</a>.
</p>
</div>
</div >
)
}
/**
* Sample for Candle Series
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, ColumnSeries, Crosshair, StripLine, IAxisLabelRenderEventArgs, ChartTheme, RowDirective, RowsDirective, SeriesDirective, Inject, Legend } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
export let zoomFactor: number;
export let zoomPosition: number;
export let pointColors: string[] = [];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Candle sample
*/
const Candle = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
args.chart.primaryXAxis.zoomFactor = zoomFactor;
args.chart.primaryXAxis.zoomPosition = zoomPosition;
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
const axisLabelRender = (args: IAxisLabelRenderEventArgs): void => {
args.text = args.text.replace("0000000M", "M");
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<div className="row">
<ChartComponent id='charts' style={{ textAlign: "center" }} load={load.bind(this)} primaryXAxis={{ valueType: 'DateTime', crosshairTooltip: { enable: true }, majorGridLines: { width: 0 } }} primaryYAxis={{ title: 'Volume', labelFormat: '{value}M', opposedPosition: true, majorGridLines: { width: 1 }, lineStyle: { width: 0 } }} legendSettings= {{visible: false}} tooltip={{ enable: true, header: "",format: "<b>Apple Inc.(AAPL)</b> <br> High : <b>${point.high}</b> <br> Low : <b>${point.low}</b> <br> Open : <b>${point.open}</b> <br> Close : <b>${point.close}</b> <br> Volume : <b>${point.volume}</b>" }} width={Browser.isDevice ? '100%' : '80%'} axisLabelRender={axisLabelRender.bind(this)} chartArea={{ border: { width: 0 } }} title="AAPL Historical" loaded={onChartLoad.bind(this)}>
<Inject services={[CandleSeries, StripLine, Category, Tooltip, DateTime, Zoom, Legend, ColumnSeries, Logarithmic, Crosshair]} />
<RowsDirective>
<RowDirective height={'30%'} />
<RowDirective height={'70%'} />
</RowsDirective>
<AxesDirective>
<AxisDirective name='secondary' rangePadding={"None"} maximum= {150} minimum= {55} opposedPosition={true} rowIndex={1} majorGridLines={{ width: 1 }} labelFormat='n0' title='Price' plotOffset={30} lineStyle={{ width: 0 }} />
</AxesDirective>
<SeriesCollectionDirective>
<SeriesDirective type='Column' dataSource={chartValues} animation={{ enable: true }} xName='period' yName='volume' enableTooltip={false} name='Volume' />
<SeriesDirective type='Candle' yAxisName='secondary' bearFillColor='#2ecd71' bullFillColor='#e74c3d' dataSource={chartValues} animation={{ enable: true }} xName='period' low='low' high='high' open='open' close='close' name='Apple Inc' volume='volume' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
<div id="action-description">
<p>This sample visualizes the AAPL stock price with a default candlestick series. The tooltip and crosshair show information about the stock price.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure the candlestick series. This chart shows financial data and trends at equal intervals. It can often be combined with line and column charts to show the closing value of the stock and volume of the data.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Candle series, we need to inject
<code>CandleSeries</code> module into <code>services</code>.
</p>
<p>
More information on the Candle series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/financial-types/#candle">documentation section</a>.
</p>
</div>
</div >
)
}
export default Candle;

224
src/chart/category-functional.tsx
Просмотреть файл

@ -1,113 +1,113 @@
/**
* Sample for Category Axis
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { EmitType } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, DataLabel, ChartTheme, Legend, Tooltip, BarSeries, Category, IPointRenderEventArgs, ILoadedEventArgs } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { fabricColors, bootstrapColors, materialColors, highContrastColors, fluentColors, fluentDarkColors, bubbleFabricColors, bubbleMaterialDarkColors, bubbleMaterialColors, bubbleBootstrap5DarkColors, bubbleBootstrapColors, bubbleHighContrastColors, bubbleFluentDarkColors, bubbleFluentColors, bubbleTailwindDarkColors, bubbleTailwindColors, pointFabricColors, pointMaterialDarkColors, pointMaterialColors, pointBootstrap5DarkColors, pointBootstrapColors, pointHighContrastColors, pointFluentDarkColors, pointFluentColors, pointTailwindDarkColors, pointTailwindColors, bubbleBootstrap5Colors, pointBootstrap5Colors, pointMaterial3DarkColors, pointMaterial3Colors } from './theme-color';
import { updateSampleSection } from '../common/sample-base';
export let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = pointFabricColors[args.point.index % 10];;
} else if (selectedTheme === 'material-dark') {
args.fill = pointMaterialDarkColors[args.point.index % 10];;
} else if (selectedTheme === 'material') {
args.fill = pointMaterialColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5-dark') {
args.fill = pointBootstrap5DarkColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5') {
args.fill = pointBootstrap5Colors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap4') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap-dark') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'highcontrast') {
args.fill = pointHighContrastColors[args.point.index % 10];
} else if (selectedTheme === 'fluent-dark') {
args.fill = pointFluentDarkColors[args.point.index % 10];
} else if (selectedTheme === 'fluent') {
args.fill = pointFluentColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind-dark') {
args.fill = pointTailwindDarkColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind') {
args.fill = pointTailwindColors[args.point.index % 10];
} else if (selectedTheme === 'material3-dark') {
args.fill = pointMaterial3DarkColors[args.point.index % 10];
} else if (selectedTheme === 'material3') {
args.fill = pointMaterial3Colors[args.point.index % 10];
}
};
export let data: any[] = [
{ x: 'Germany', y: 72, country: 'GER: 72' },
{ x: 'Russia', y: 103.1, country: 'RUS: 103.1' },
{ x: 'Brazil', y: 139.1, country: 'BRZ: 139.1' },
{ x: 'India', y: 462.1, country: 'IND: 462.1' },
{ x: 'China', y: 721.4, country: 'CHN: 721.4' },
{ x: 'United States<br>Of America', y: 286.9, country: 'USA: 286.9' },
{ x: 'Great Britain', y: 115.1, country: 'GBR: 115.1' },
{ x: 'Nigeria', y: 97.2, country: 'NGR: 97.2' },
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Category sample
*/
const CategoryAxis = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 }, enableTrim: false, majorTickLines: {width : 0}, minorTickLines: {width: 0} }} primaryYAxis={{ minimum: 0, maximum: 800, labelFormat: '{value}M', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 }, majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} chartArea={{ border: { width: 0 } }} legendSettings={{ visible: false }} title={Browser.isDevice ? 'Internet Users in Million – 2016' : 'Internet Users – 2016'} pointRender={pointRender} loaded={onChartLoad.bind(this)} tooltip={{ enable: false, format: '${point.tooltip}' }}>
<Inject services={[BarSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' type='Bar' width={2} tooltipMappingName='country' marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff', size: Browser.isDevice ? '9px' : '11px' } } }} name='Users' />
</SeriesCollectionDirective>
</ChartComponent>
<div style={{ float: 'right', marginRight: '10px' }}>Source: &nbsp;
<a href="http://www.internetworldstats.com/top20.htm" target="_blank">www.internetworldstats.com</a>
</div>
</div>
<div id="action-description">
<p>This sample shows a category axis in a chart with details about internet users across different countries.</p>
</div>
<div id="description">
<p>
You can use the category axis to represent string values instead of numbers in the chart. To use the category axis, set <code>ValueType</code> in axis to <b>Category</b>.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Category axis, we need to inject
<code>Category</code> module into <code>services</code>.
</p>
<p>
More information on the Category axis can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/category-axis/">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Category Axis
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { EmitType } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, DataLabel, ChartTheme, Legend, Tooltip, BarSeries, Category, IPointRenderEventArgs, ILoadedEventArgs } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { fabricColors, bootstrapColors, materialColors, highContrastColors, fluentColors, fluentDarkColors, bubbleFabricColors, bubbleMaterialDarkColors, bubbleMaterialColors, bubbleBootstrap5DarkColors, bubbleBootstrapColors, bubbleHighContrastColors, bubbleFluentDarkColors, bubbleFluentColors, bubbleTailwindDarkColors, bubbleTailwindColors, pointFabricColors, pointMaterialDarkColors, pointMaterialColors, pointBootstrap5DarkColors, pointBootstrapColors, pointHighContrastColors, pointFluentDarkColors, pointFluentColors, pointTailwindDarkColors, pointTailwindColors, bubbleBootstrap5Colors, pointBootstrap5Colors, pointMaterial3DarkColors, pointMaterial3Colors } from './theme-color';
import { updateSampleSection } from '../common/sample-base';
export let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = pointFabricColors[args.point.index % 10];;
} else if (selectedTheme === 'material-dark') {
args.fill = pointMaterialDarkColors[args.point.index % 10];;
} else if (selectedTheme === 'material') {
args.fill = pointMaterialColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5-dark') {
args.fill = pointBootstrap5DarkColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5') {
args.fill = pointBootstrap5Colors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap4') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap-dark') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'highcontrast') {
args.fill = pointHighContrastColors[args.point.index % 10];
} else if (selectedTheme === 'fluent-dark') {
args.fill = pointFluentDarkColors[args.point.index % 10];
} else if (selectedTheme === 'fluent') {
args.fill = pointFluentColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind-dark') {
args.fill = pointTailwindDarkColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind') {
args.fill = pointTailwindColors[args.point.index % 10];
} else if (selectedTheme === 'material3-dark') {
args.fill = pointMaterial3DarkColors[args.point.index % 10];
} else if (selectedTheme === 'material3') {
args.fill = pointMaterial3Colors[args.point.index % 10];
}
};
export let data: any[] = [
{ x: 'Germany', y: 72, country: 'GER: 72' },
{ x: 'Russia', y: 103.1, country: 'RUS: 103.1' },
{ x: 'Brazil', y: 139.1, country: 'BRZ: 139.1' },
{ x: 'India', y: 462.1, country: 'IND: 462.1' },
{ x: 'China', y: 721.4, country: 'CHN: 721.4' },
{ x: 'United States<br>Of America', y: 286.9, country: 'USA: 286.9' },
{ x: 'Great Britain', y: 115.1, country: 'GBR: 115.1' },
{ x: 'Nigeria', y: 97.2, country: 'NGR: 97.2' },
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Category sample
*/
const CategoryAxis = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 }, enableTrim: false, majorTickLines: {width : 0}, minorTickLines: {width: 0} }} primaryYAxis={{ minimum: 0, maximum: 800, labelFormat: '{value}M', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 }, majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} chartArea={{ border: { width: 0 } }} legendSettings={{ visible: false }} title={Browser.isDevice ? 'Internet Users in Million – 2016' : 'Internet Users – 2016'} pointRender={pointRender} loaded={onChartLoad.bind(this)} tooltip={{ enable: false, format: '${point.tooltip}' }}>
<Inject services={[BarSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' type='Bar' width={2} tooltipMappingName='country' marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff', size: Browser.isDevice ? '9px' : '11px' } } }} name='Users' />
</SeriesCollectionDirective>
</ChartComponent>
<div style={{ float: 'right', marginRight: '10px' }}>Source: &nbsp;
<a href="http://www.internetworldstats.com/top20.htm" target="_blank">www.internetworldstats.com</a>
</div>
</div>
<div id="action-description">
<p>This sample shows a category axis in a chart with details about internet users across different countries.</p>
</div>
<div id="description">
<p>
You can use the category axis to represent string values instead of numbers in the chart. To use the category axis, set <code>ValueType</code> in axis to <b>Category</b>.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Category axis, we need to inject
<code>Category</code> module into <code>services</code>.
</p>
<p>
More information on the Category axis can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/category-axis/">documentation section</a>.
</p>
</div>
</div>
)
}
export default CategoryAxis;

138
src/chart/column-functional.tsx
Просмотреть файл

@ -1,69 +1,69 @@
/**
* Sample for Column series
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme, Legend, Category, Tooltip, ColumnSeries, ILoadedEventArgs, DataLabel, Highlight } from '@syncfusion/ej2-react-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1 = [{ x: 'GBR', y: 27, toolTipMappingName: 'Great Britain' }, { x: 'CHN', y: 26, toolTipMappingName: 'China' }, { x: 'AUS', y: 8, toolTipMappingName: 'Australia' }, { x: 'RUS', y: 19, toolTipMappingName: 'Russia' }, { x: 'GER', y: 17, toolTipMappingName: 'Germany' }, { x: 'UA', y: 2, toolTipMappingName: 'Ukraine' }, { x: 'ES', y: 7, toolTipMappingName: 'Spain' }, { x: 'UZB', y: 4, toolTipMappingName: 'Uzbekistan' }, { x: 'JPN', y: 12, toolTipMappingName: 'Japan' }, { x: 'NL', y: 8, toolTipMappingName: 'NetherLand' }, { x: 'USA', y: 46, toolTipMappingName: 'United States' }];
export let data2 = [{ x: 'GBR', y: 23, toolTipMappingName: 'Great Britain' }, { x: 'CHN', y: 18, toolTipMappingName: 'China' }, { x: 'AUS', y: 11, toolTipMappingName: 'Australia' }, { x: 'RUS', y: 17, toolTipMappingName: 'Russia' }, { x: 'GER', y: 10, toolTipMappingName: 'Germany' }, { x: 'UA', y: 5, toolTipMappingName: 'Ukraine' }, { x: 'ES', y: 4, toolTipMappingName: 'Spain' }, { x: 'UZB', y: 2, toolTipMappingName: 'Uzbekistan' }, { x: 'JPN', y: 8, toolTipMappingName: 'Japan' }, { x: 'NL', y: 7, toolTipMappingName: 'NetherLand' }, { x: 'USA', y: 37, toolTipMappingName: 'United States' }];
export let data3 = [{ x: 'GBR', y: 17, toolTipMappingName: 'Great Britain' }, { x: 'CHN', y: 26, toolTipMappingName: 'China' }, { x: 'AUS', y: 10, toolTipMappingName: 'Australia' }, { x: 'RUS', y: 20, toolTipMappingName: 'Russia' }, { x: 'GER', y: 15, toolTipMappingName: 'Germany' }, { x: 'UA', y: 24, toolTipMappingName: 'Ukraine' }, { x: 'ES', y: 6, toolTipMappingName: 'Spain' }, { x: 'UZB', y: 7, toolTipMappingName: 'Uzbekistan' }, { x: 'JPN', y: 8, toolTipMappingName: 'Japan' }, { x: 'NL', y: 4, toolTipMappingName: 'NetherLand' }, { x: 'USA', y: 38, toolTipMappingName: 'United States' }];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const Column = () => {
useEffect(() => {
updateSampleSection();
}, [])
const loaded = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
if (selectedTheme === 'highcontrast') {
args.chart.series[0].marker.dataLabel.font.color = '#000000';
args.chart.series[1].marker.dataLabel.font.color = '#000000';
args.chart.series[2].marker.dataLabel.font.color = '#000000';
}
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} legendSettings={{ enableHighlight: true }} primaryXAxis={{ labelIntersectAction: Browser.isDevice ? 'None' : 'Trim', labelRotation: Browser.isDevice ? -45 : 0 , valueType: 'Category', interval: 1, majorGridLines: { width: 0 }, majorTickLines: { width: 0 } }} primaryYAxis={{ title: 'Medal Count', majorTickLines: { width: 0 }, lineStyle: { width: 0 }, maximum: 50, interval: 10 }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} tooltip={{ enable: true, header: "<b>${point.tooltip}</b>", shared: true }} width={Browser.isDevice ? '100%' : '75%'} title='Olympic Medal Counts - RIO' loaded={loaded.bind(this)}>
<Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel, Highlight]} />
<SeriesCollectionDirective >
<SeriesDirective dataSource={data1} tooltipMappingName='toolTipMappingName' xName='x' columnSpacing={0.1} yName='y' name='Gold' type='Column' />
<SeriesDirective dataSource={data2} tooltipMappingName='toolTipMappingName' xName='x' columnSpacing={0.1} yName='y' name='Silver' type='Column' />
<SeriesDirective dataSource={data3} tooltipMappingName='toolTipMappingName' xName='x' columnSpacing={0.1} yName='y' name='Bronze' type='Column' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This React column chart example visualizes the medal count from the Rio Olympics with the default column series in the chart.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure a column chart. The column chart is used to compare the frequency, count, total, or average of data in different categories.</p>
<p>Tooltip is enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject
<code>ColumnSeries</code> module into <code>services</code>.
</p>
<p>
More information on the column series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#column-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default Column;
/**
* Sample for Column series
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme, Legend, Category, Tooltip, ColumnSeries, ILoadedEventArgs, DataLabel, Highlight } from '@syncfusion/ej2-react-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1 = [{ x: 'GBR', y: 27, toolTipMappingName: 'Great Britain' }, { x: 'CHN', y: 26, toolTipMappingName: 'China' }, { x: 'AUS', y: 8, toolTipMappingName: 'Australia' }, { x: 'RUS', y: 19, toolTipMappingName: 'Russia' }, { x: 'GER', y: 17, toolTipMappingName: 'Germany' }, { x: 'UA', y: 2, toolTipMappingName: 'Ukraine' }, { x: 'ES', y: 7, toolTipMappingName: 'Spain' }, { x: 'UZB', y: 4, toolTipMappingName: 'Uzbekistan' }, { x: 'JPN', y: 12, toolTipMappingName: 'Japan' }, { x: 'NL', y: 8, toolTipMappingName: 'NetherLand' }, { x: 'USA', y: 46, toolTipMappingName: 'United States' }];
export let data2 = [{ x: 'GBR', y: 23, toolTipMappingName: 'Great Britain' }, { x: 'CHN', y: 18, toolTipMappingName: 'China' }, { x: 'AUS', y: 11, toolTipMappingName: 'Australia' }, { x: 'RUS', y: 17, toolTipMappingName: 'Russia' }, { x: 'GER', y: 10, toolTipMappingName: 'Germany' }, { x: 'UA', y: 5, toolTipMappingName: 'Ukraine' }, { x: 'ES', y: 4, toolTipMappingName: 'Spain' }, { x: 'UZB', y: 2, toolTipMappingName: 'Uzbekistan' }, { x: 'JPN', y: 8, toolTipMappingName: 'Japan' }, { x: 'NL', y: 7, toolTipMappingName: 'NetherLand' }, { x: 'USA', y: 37, toolTipMappingName: 'United States' }];
export let data3 = [{ x: 'GBR', y: 17, toolTipMappingName: 'Great Britain' }, { x: 'CHN', y: 26, toolTipMappingName: 'China' }, { x: 'AUS', y: 10, toolTipMappingName: 'Australia' }, { x: 'RUS', y: 20, toolTipMappingName: 'Russia' }, { x: 'GER', y: 15, toolTipMappingName: 'Germany' }, { x: 'UA', y: 24, toolTipMappingName: 'Ukraine' }, { x: 'ES', y: 6, toolTipMappingName: 'Spain' }, { x: 'UZB', y: 7, toolTipMappingName: 'Uzbekistan' }, { x: 'JPN', y: 8, toolTipMappingName: 'Japan' }, { x: 'NL', y: 4, toolTipMappingName: 'NetherLand' }, { x: 'USA', y: 38, toolTipMappingName: 'United States' }];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const Column = () => {
useEffect(() => {
updateSampleSection();
}, [])
const loaded = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
if (selectedTheme === 'highcontrast') {
args.chart.series[0].marker.dataLabel.font.color = '#000000';
args.chart.series[1].marker.dataLabel.font.color = '#000000';
args.chart.series[2].marker.dataLabel.font.color = '#000000';
}
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} legendSettings={{ enableHighlight: true }} primaryXAxis={{ labelIntersectAction: Browser.isDevice ? 'None' : 'Trim', labelRotation: Browser.isDevice ? -45 : 0 , valueType: 'Category', interval: 1, majorGridLines: { width: 0 }, majorTickLines: { width: 0 } }} primaryYAxis={{ title: 'Medal Count', majorTickLines: { width: 0 }, lineStyle: { width: 0 }, maximum: 50, interval: 10 }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} tooltip={{ enable: true, header: "<b>${point.tooltip}</b>", shared: true }} width={Browser.isDevice ? '100%' : '75%'} title='Olympic Medal Counts - RIO' loaded={loaded.bind(this)}>
<Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel, Highlight]} />
<SeriesCollectionDirective >
<SeriesDirective dataSource={data1} tooltipMappingName='toolTipMappingName' xName='x' columnSpacing={0.1} yName='y' name='Gold' type='Column' />
<SeriesDirective dataSource={data2} tooltipMappingName='toolTipMappingName' xName='x' columnSpacing={0.1} yName='y' name='Silver' type='Column' />
<SeriesDirective dataSource={data3} tooltipMappingName='toolTipMappingName' xName='x' columnSpacing={0.1} yName='y' name='Bronze' type='Column' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This React column chart example visualizes the medal count from the Rio Olympics with the default column series in the chart.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure a column chart. The column chart is used to compare the frequency, count, total, or average of data in different categories.</p>
<p>Tooltip is enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject
<code>ColumnSeries</code> module into <code>services</code>.
</p>
<p>
More information on the column series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#column-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default Column;

152
src/chart/column-placement-functional.tsx
Просмотреть файл

@ -1,76 +1,76 @@
/**
* Sample for Column Series with disabled side by side placement
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme, ColumnSeries, Category, DataLabel, Tooltip, ILoadedEventArgs, Legend } from '@syncfusion/ej2-react-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
export let data1: any[] = [
{ x: 'Jamesh', y: 10, text: 'Total 10' }, { x: 'Michael', y: 9, text: 'Total 9' },
{ x: 'John', y: 11, text: 'Total 11' },{ x: 'Jack', y: 8, text: 'Total 8' },
{ x: 'Lucas', y: 10, text: 'Total 10' }
];
export let data2: any[] = [{ x: 'Jamesh', y: 5 }, { x: 'Michael', y: 4 }, { x: 'John', y: 5 }, { x: 'Jack', y: 5}, { x: 'Lucas', y: 6}];
export let data3: any[] = [{ x: 'Jamesh', y: 4 }, { x: 'Michael', y: 3 }, { x: 'John', y: 4 }, { x: 'Jack', y: 2 }, { x: 'Lucas', y: 3}];
export let data4: any[] = [{ x: 'Jamesh', y: 1 }, { x: 'Michael', y: 2 }, { x: 'John', y: 2 }, { x: 'Jack', y: 1}, { x: 'Lucas', y: 1}];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Column Side placment sample
*/
const ColumnPlacemen = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as ChartTheme as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} load={load.bind(this)} primaryXAxis={{ valueType: 'Category', majorTickLines: {width : 0}, minorTickLines: {width: 0}, interval: 1, majorGridLines: { width: 0 } }} primaryYAxis={{ majorTickLines: { width: 0 }, lineStyle: { width: 0 }, title: 'Fruits Count' }} chartArea={{ border: { width: 0 } }} enableSideBySidePlacement={false} title='Fruit Consumption' tooltip={{ enable: true, shared: true }} width={Browser.isDevice ? '100%' : '75%'} loaded={onChartLoad.bind(this)}>
<Inject services={[ColumnSeries, DataLabel, Category, Tooltip, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' width={2} yName='y' name='Total' type='Column' columnWidth={0.5} marker={{ dataLabel: { visible: true, name: 'text', enableRotation: Browser.isDevice ? true : false, angle: -90, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }} />
<SeriesDirective dataSource={data2} xName='x' width={2} yName='y' name='Apple' type='Column' columnWidth={0.4} marker={{ dataLabel: { visible: true, name: 'text', position: 'Top', font: { fontWeight: '600', color: '#ffffff'} } }} />
<SeriesDirective dataSource={data3} xName='x' width={2} yName='y' name='Orange' type='Column' columnWidth={0.3} marker={{ dataLabel: { visible: true, name: 'text', position: 'Top', font: { fontWeight: '600', color: '#ffffff'} } }} />
<SeriesDirective dataSource={data4} xName='x' width={2} yName='y' name='Grapes' type='Column' columnWidth={0.2} marker={{ dataLabel: { visible: true, name: 'text', position: 'Top', font: { fontWeight: '600', color: '#ffffff'} } }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample shows four series of columns in which each column is rendered with a different width and placed behind the previous column.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the column chart. The column chart is used to compare the frequency, count, total, or average of data in different categories. The <code>EnableSideBySidePlacement</code> property is used to enable and disable side-by-side positioning. DataLabel is used to present details about individual data points.
</p>
<p>Tooltip is enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject
<code>ColumnSeries</code> module into <code>services</code>.
</p>
<p>
More information on the column series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#column-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default ColumnPlacemen;
/**
* Sample for Column Series with disabled side by side placement
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme, ColumnSeries, Category, DataLabel, Tooltip, ILoadedEventArgs, Legend } from '@syncfusion/ej2-react-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
export let data1: any[] = [
{ x: 'Jamesh', y: 10, text: 'Total 10' }, { x: 'Michael', y: 9, text: 'Total 9' },
{ x: 'John', y: 11, text: 'Total 11' },{ x: 'Jack', y: 8, text: 'Total 8' },
{ x: 'Lucas', y: 10, text: 'Total 10' }
];
export let data2: any[] = [{ x: 'Jamesh', y: 5 }, { x: 'Michael', y: 4 }, { x: 'John', y: 5 }, { x: 'Jack', y: 5}, { x: 'Lucas', y: 6}];
export let data3: any[] = [{ x: 'Jamesh', y: 4 }, { x: 'Michael', y: 3 }, { x: 'John', y: 4 }, { x: 'Jack', y: 2 }, { x: 'Lucas', y: 3}];
export let data4: any[] = [{ x: 'Jamesh', y: 1 }, { x: 'Michael', y: 2 }, { x: 'John', y: 2 }, { x: 'Jack', y: 1}, { x: 'Lucas', y: 1}];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Column Side placment sample
*/
const ColumnPlacemen = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as ChartTheme as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} load={load.bind(this)} primaryXAxis={{ valueType: 'Category', majorTickLines: {width : 0}, minorTickLines: {width: 0}, interval: 1, majorGridLines: { width: 0 } }} primaryYAxis={{ majorTickLines: { width: 0 }, lineStyle: { width: 0 }, title: 'Fruits Count' }} chartArea={{ border: { width: 0 } }} enableSideBySidePlacement={false} title='Fruit Consumption' tooltip={{ enable: true, shared: true }} width={Browser.isDevice ? '100%' : '75%'} loaded={onChartLoad.bind(this)}>
<Inject services={[ColumnSeries, DataLabel, Category, Tooltip, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' width={2} yName='y' name='Total' type='Column' columnWidth={0.5} marker={{ dataLabel: { visible: true, name: 'text', enableRotation: Browser.isDevice ? true : false, angle: -90, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }} />
<SeriesDirective dataSource={data2} xName='x' width={2} yName='y' name='Apple' type='Column' columnWidth={0.4} marker={{ dataLabel: { visible: true, name: 'text', position: 'Top', font: { fontWeight: '600', color: '#ffffff'} } }} />
<SeriesDirective dataSource={data3} xName='x' width={2} yName='y' name='Orange' type='Column' columnWidth={0.3} marker={{ dataLabel: { visible: true, name: 'text', position: 'Top', font: { fontWeight: '600', color: '#ffffff'} } }} />
<SeriesDirective dataSource={data4} xName='x' width={2} yName='y' name='Grapes' type='Column' columnWidth={0.2} marker={{ dataLabel: { visible: true, name: 'text', position: 'Top', font: { fontWeight: '600', color: '#ffffff'} } }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample shows four series of columns in which each column is rendered with a different width and placed behind the previous column.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the column chart. The column chart is used to compare the frequency, count, total, or average of data in different categories. The <code>EnableSideBySidePlacement</code> property is used to enable and disable side-by-side positioning. DataLabel is used to present details about individual data points.
</p>
<p>Tooltip is enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject
<code>ColumnSeries</code> module into <code>services</code>.
</p>
<p>
More information on the column series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#column-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default ColumnPlacemen;

158
src/chart/combination-series-functional.tsx
Просмотреть файл

@ -1,80 +1,80 @@
/**
* Sample for Combination Serie
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme, Legend, StackingColumnSeries, LineSeries, Tooltip, ILoadedEventArgs, Category, ColumnSeries, Highlight } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
export let data: any[] = [
{ x: '2005', y: 1.2, y1: 0.5, y2: 0.7, y3: -0.8, y4: 1.5},
{ x: '2006', y: 1, y1: 0.5, y2: 1.4, y3: 0, y4: 2.3 },
{ x: '2007', y: 1, y1: 0.5, y2: 1.5, y3: -1, y4: 2 },
{ x: '2008', y: 0.25, y1: 0.35, y2: 0.35, y3: -.35, y4: 0.1 },
{ x: '2009', y: 0.1, y1: 0.9, y2: -2.7, y3: -0.3, y4: -2.7 },
{ x: '2010', y: 1, y1: 0.5, y2: 0.5, y3: -0.5, y4: 1.8 },
{ x: '2011', y: 0.1, y1: 0.25, y2: 0.25, y3: 0, y4: 2 },
{ x: '2012', y: -0.25, y1: -0.5, y2: -0.1, y3: -0.4, y4: 0.4 },
{ x: '2013', y: 0.25, y1: 0.5, y2: -0.3, y3: 0, y4: 0.9 },
{ x: '2014', y: 0.6, y1: 0.6, y2: -0.6, y3: -0.6, y4: 0.4 },
{ x: '2015', y: 0.9, y1: 0.5, y2: 0, y3: -0.3, y4: 1.3 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const CombinationSeries = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ interval: Browser.isDevice ? 2 : 1, labelIntersectAction: 'Rotate45', valueType: 'Category', majorGridLines: { width: 0 }, minorGridLines: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, lineStyle: { width: 0 } }} load={load.bind(this)} primaryYAxis={{ title: 'Growth (in Billion)', minimum: -3, maximum: 3, interval: 1, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, majorGridLines: { width: 1 }, minorGridLines: { width: 1 }, minorTickLines: { width: 0 }, labelFormat: '{value}B' }} chartArea={{ border: { width: 0 } }} title='Annual Growth GDP in France' loaded={onChartLoad.bind(this)} tooltip={{ enable: true }} width={Browser.isDevice ? '100%' : '75%'} legendSettings={{ visible: true, enableHighlight: true }}>
<Inject services={[StackingColumnSeries, LineSeries, Category, ColumnSeries, Tooltip, Legend, Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' name='Private Consumption' type='StackingColumn' />
<SeriesDirective dataSource={data} xName='x' yName='y1' name='Government Consumption' type='StackingColumn' />
<SeriesDirective dataSource={data} xName='x' yName='y2' name='Investment' type='StackingColumn' />
<SeriesDirective dataSource={data} xName='x' yName='y3' name='Net Foreign Trade' type='StackingColumn' />
<SeriesDirective dataSource={data} xName='x' yName='y4' name='GDP' type='Line' width={2} opacity={0.6} marker={{ visible: true, width: 7, height: 7 }} />
</SeriesCollectionDirective>
</ChartComponent>
<div style={{ float: 'right', marginRight: '10px' }}>Source: &nbsp;
<a href="http://perspectives.pictet.com/2016/01/29/growth-accelerated-markedly-in-france-and-spain-in-2015/" target="_blank">perspectives.pictet.com</a>
</div>
</div>
<div id="action-description">
<p>This sample illustrates a combination of line and stacked column series. Tooltip shows the information about the data point.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the different type of charts. You can render any combination of series in chart except bar.
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
In this example, we have used line and column series. To use column and line feature, we need to inject
<code>ColumnSeries</code> <code>LineSeries</code> modules into <code>services</code>.
</p>
<p>
More information on the Combination series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-series/#combination-series">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Combination Serie
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme, Legend, StackingColumnSeries, LineSeries, Tooltip, ILoadedEventArgs, Category, ColumnSeries, Highlight } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
export let data: any[] = [
{ x: '2005', y: 1.2, y1: 0.5, y2: 0.7, y3: -0.8, y4: 1.5},
{ x: '2006', y: 1, y1: 0.5, y2: 1.4, y3: 0, y4: 2.3 },
{ x: '2007', y: 1, y1: 0.5, y2: 1.5, y3: -1, y4: 2 },
{ x: '2008', y: 0.25, y1: 0.35, y2: 0.35, y3: -.35, y4: 0.1 },
{ x: '2009', y: 0.1, y1: 0.9, y2: -2.7, y3: -0.3, y4: -2.7 },
{ x: '2010', y: 1, y1: 0.5, y2: 0.5, y3: -0.5, y4: 1.8 },
{ x: '2011', y: 0.1, y1: 0.25, y2: 0.25, y3: 0, y4: 2 },
{ x: '2012', y: -0.25, y1: -0.5, y2: -0.1, y3: -0.4, y4: 0.4 },
{ x: '2013', y: 0.25, y1: 0.5, y2: -0.3, y3: 0, y4: 0.9 },
{ x: '2014', y: 0.6, y1: 0.6, y2: -0.6, y3: -0.6, y4: 0.4 },
{ x: '2015', y: 0.9, y1: 0.5, y2: 0, y3: -0.3, y4: 1.3 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const CombinationSeries = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ interval: Browser.isDevice ? 2 : 1, labelIntersectAction: 'Rotate45', valueType: 'Category', majorGridLines: { width: 0 }, minorGridLines: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, lineStyle: { width: 0 } }} load={load.bind(this)} primaryYAxis={{ title: 'Growth (in Billion)', minimum: -3, maximum: 3, interval: 1, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, majorGridLines: { width: 1 }, minorGridLines: { width: 1 }, minorTickLines: { width: 0 }, labelFormat: '{value}B' }} chartArea={{ border: { width: 0 } }} title='Annual Growth GDP in France' loaded={onChartLoad.bind(this)} tooltip={{ enable: true }} width={Browser.isDevice ? '100%' : '75%'} legendSettings={{ visible: true, enableHighlight: true }}>
<Inject services={[StackingColumnSeries, LineSeries, Category, ColumnSeries, Tooltip, Legend, Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' name='Private Consumption' type='StackingColumn' />
<SeriesDirective dataSource={data} xName='x' yName='y1' name='Government Consumption' type='StackingColumn' />
<SeriesDirective dataSource={data} xName='x' yName='y2' name='Investment' type='StackingColumn' />
<SeriesDirective dataSource={data} xName='x' yName='y3' name='Net Foreign Trade' type='StackingColumn' />
<SeriesDirective dataSource={data} xName='x' yName='y4' name='GDP' type='Line' width={2} opacity={0.6} marker={{ visible: true, width: 7, height: 7 }} />
</SeriesCollectionDirective>
</ChartComponent>
<div style={{ float: 'right', marginRight: '10px' }}>Source: &nbsp;
<a href="http://perspectives.pictet.com/2016/01/29/growth-accelerated-markedly-in-france-and-spain-in-2015/" target="_blank">perspectives.pictet.com</a>
</div>
</div>
<div id="action-description">
<p>This sample illustrates a combination of line and stacked column series. Tooltip shows the information about the data point.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the different type of charts. You can render any combination of series in chart except bar.
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
In this example, we have used line and column series. To use column and line feature, we need to inject
<code>ColumnSeries</code> <code>LineSeries</code> modules into <code>services</code>.
</p>
<p>
More information on the Combination series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-series/#combination-series">documentation section</a>.
</p>
</div>
</div>
)
}
export default CombinationSeries;

22
src/chart/config.tsx
Просмотреть файл

@ -111,6 +111,10 @@ export const ChartSampleOrder: Object = [
'path': 'chart/range-bar', 'component': 'RangeBar', 'name': 'Inversed Range Column', 'order': '04', 'category': 'Bar Charts',
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the inversed range column series.'
},
{
'path': 'chart/cylindrical-column', 'component': 'CylindricalColumn', 'name': 'Cylindrical Column', 'type': 'new', 'order': '04', 'category': 'Bar Charts',
'description': 'This demo sample for Essential JavaScript2 Chart control shows how to render the cylindrical column series.'
},
{
'path': 'chart/bar', 'component': 'Bar', 'name': 'Bar', 'order': '04', 'category': 'Bar Charts',
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the bar series.'
@ -132,7 +136,7 @@ export const ChartSampleOrder: Object = [
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the 100 percent stacking bar series.'
},
{
'path': 'chart/tornado', 'component': 'NegativeStack', 'name': 'Negative Stack', 'order': '04', 'category': 'Bar Charts',
'path': 'chart/negative-stack', 'component': 'NegativeStack', 'name': 'Negative Stack', 'order': '04', 'category': 'Bar Charts',
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the bar charts.'
},
{
@ -224,7 +228,7 @@ export const ChartSampleOrder: Object = [
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the combination series.'
},
{
'path': 'chart/pareto', 'component': 'ParetoChart', 'name': 'Pareto Chart', 'type': 'update', 'order': '08', 'category': 'Other Types',
'path': 'chart/pareto', 'component': 'ParetoChart', 'name': 'Pareto Chart', 'order': '08', 'category': 'Other Types',
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure pareto charts.'
},
{
@ -312,7 +316,7 @@ export const ChartSampleOrder: Object = [
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the remote-data chart.'
},
{
'path': 'chart/lazy-loading', 'component': 'LazyLoading', 'name': 'Lazy Loading', 'type': 'update', 'order': '12', 'category': 'Data Binding',
'path': 'chart/lazy-loading', 'component': 'LazyLoading', 'name': 'Lazy Loading', 'order': '12', 'category': 'Data Binding',
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the lazy-loading chart.'
},
{
@ -348,7 +352,7 @@ export const ChartSampleOrder: Object = [
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates how to invert the axis in charts.'
},
{
'path': 'chart/stripline', 'component': 'Stripline', 'name': 'Stripline', 'type': 'update', 'order': '13', 'category': 'Chart Axes',
'path': 'chart/stripline', 'component': 'Stripline', 'name': 'Stripline', 'order': '13', 'category': 'Chart Axes',
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates how to invert the axis in charts.'
},
{
@ -383,6 +387,10 @@ export const ChartSampleOrder: Object = [
'path': 'chart/annotation', 'component': 'Annotation', 'name': 'Annotation', 'order': '14', 'category': 'Chart Customization',
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates how to add more information to the chart using annotation.'
},
{
'path': 'chart/synchronized-chart', 'component': 'SynchronizedChart', 'name': 'Synchronized Charts', 'order': '14', 'type': 'new', 'category': 'Chart Customization',
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the synchronized chart.'
},
{
'path': 'chart/datalabel-template', 'component': 'DataLabelTemplate', 'name': 'DataLabel Template', 'order': '14', 'category': 'Chart Customization',
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the data label template.'
@ -408,7 +416,7 @@ export const ChartSampleOrder: Object = [
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates how to print the entire chart.'
},
{
'path': 'chart/export', 'component': 'ChartExport', 'name': 'Export', 'order': '15', 'category': 'Print and Export',
'path': 'chart/export', 'component': 'ChartExport', 'name': 'Export', 'order': '15', 'category': 'Print and Export', 'type': 'update',
'description': 'This demo for Essential JS2 Chart control shows how to export the charts to Excel, PDF, and image formats such as SVG, JPEG, and PNG at client-side.'
},
{
@ -421,7 +429,7 @@ export const ChartSampleOrder: Object = [
},
{
'path': 'chart/keyboard', 'component': 'KeyboardNavigation', 'name': 'Keyboard Navigation', 'order': '16', 'category': 'User Interaction',
'description': 'This demo for Essential JS2 Chart control shows how to use the keyboard for the charts functions.'
'description': 'This demo sample for Essential JS2 Chart control shows how to use the keyboard for the charts functions.'
},
{
'path': 'chart/crosshair', 'component': 'CrosshairChart', 'name': 'Crosshair', 'order': '16', 'category': 'User Interaction',
@ -432,7 +440,7 @@ export const ChartSampleOrder: Object = [
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates the trackball behavior in chart.'
},
{
'path': 'chart/zoom', 'component': 'Zooming', 'name': 'Zooming and Panning', 'type': 'update', 'order': '16', 'category': 'User Interaction',
'path': 'chart/zoom', 'component': 'Zooming', 'name': 'Zooming and Panning', 'order': '16', 'category': 'User Interaction',
'description': 'This demo sample for Essential JavaScript2 Chart control demonstrates the zooming behavior in chart.'
},
{

124
src/chart/crosshair-functional.tsx
Просмотреть файл

@ -1,63 +1,63 @@
/**
* Sample for Crosshair in chart
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, AxesDirective, AxisDirective, Inject, LineSeries, HiloOpenCloseSeries, Crosshair, DateTime, ILoadedEventArgs, ChartTheme, Zoom } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { axesData } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
/**
* Crosshair sample
*/
const CrosshairChart = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ majorGridLines: { width: 0 }, valueType: 'DateTime', crosshairTooltip: { enable: true }, labelFormat: 'MMM' }} load={load.bind(this)} primaryYAxis={{ minimum: 83, maximum: 87, interval: 1, title: 'Millions in USD', labelFormat: '{value}M', rowIndex: 0, crosshairTooltip: { enable: true } }} width={Browser.isDevice ? '100%' : '75%'} title='Conns,Inc Stock Details' loaded={onChartLoad.bind(this)} crosshair={{ enable: true }} legendSettings={{ visible: false }} zoomSettings={{ enablePinchZooming: true, enableSelectionZooming: true, mode: 'X' }}>
<Inject services={[LineSeries, HiloOpenCloseSeries, Crosshair, DateTime, Zoom]} />
<AxesDirective>
<AxisDirective majorGridLines={{ width: 0 }} rowIndex={0} opposedPosition={true} minimum={82} maximum={88} interval={2} name='yAxis' title='Millions in USD (Stock)' crosshairTooltip={{ enable: true }} />
</AxesDirective>
<SeriesCollectionDirective>
<SeriesDirective type='Line' dataSource={axesData} border={{ width: 1.5 }} xName='xDate' width={2} yName='High' marker={{ visible: true }} />
<SeriesDirective type='HiloOpenClose' dataSource={axesData} yAxisName='yAxis' border={{ width: 1.5 }} bearFillColor='#2ecd71' bullFillColor='#e74c3d' xName='xDate' width={2} high='High' low='Low' open='Open' close='Close' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample depicts the crosshair behavior in the charts. To view the crosshair and its tooltip, hover over the chart or tap on it in touch-enabled devices.</p>
</div>
<div id="description">
<p>
This sample demonstrates the crosshair behavior in chart. Crosshair is used to inspect or focus on an individual data point.
You can customize the axis tooltip using <code>crosshairTooltip</code> properties in axis.
</p>
<p>Hover the chart area to view crosshair and its tooltip. Touch and hold to enable crosshair in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Crosshair, we need to inject
<code>Crosshair</code> module into <code>services</code>.
</p>
<p>
More information on the Crosshair can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/cross-hair-and-track-ball/#trackball">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Crosshair in chart
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, AxesDirective, AxisDirective, Inject, LineSeries, HiloOpenCloseSeries, Crosshair, DateTime, ILoadedEventArgs, ChartTheme, Zoom } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { axesData } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
/**
* Crosshair sample
*/
const CrosshairChart = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ majorGridLines: { width: 0 }, valueType: 'DateTime', crosshairTooltip: { enable: true }, labelFormat: 'MMM' }} load={load.bind(this)} primaryYAxis={{ minimum: 83, maximum: 87, interval: 1, title: 'Millions in USD', labelFormat: '{value}M', rowIndex: 0, crosshairTooltip: { enable: true } }} width={Browser.isDevice ? '100%' : '75%'} title='Conns,Inc Stock Details' loaded={onChartLoad.bind(this)} crosshair={{ enable: true }} legendSettings={{ visible: false }} zoomSettings={{ enablePinchZooming: true, enableSelectionZooming: true, mode: 'X' }}>
<Inject services={[LineSeries, HiloOpenCloseSeries, Crosshair, DateTime, Zoom]} />
<AxesDirective>
<AxisDirective majorGridLines={{ width: 0 }} rowIndex={0} opposedPosition={true} minimum={82} maximum={88} interval={2} name='yAxis' title='Millions in USD (Stock)' crosshairTooltip={{ enable: true }} />
</AxesDirective>
<SeriesCollectionDirective>
<SeriesDirective type='Line' dataSource={axesData} border={{ width: 1.5 }} xName='xDate' width={2} yName='High' marker={{ visible: true }} />
<SeriesDirective type='HiloOpenClose' dataSource={axesData} yAxisName='yAxis' border={{ width: 1.5 }} bearFillColor='#2ecd71' bullFillColor='#e74c3d' xName='xDate' width={2} high='High' low='Low' open='Open' close='Close' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample depicts the crosshair behavior in the charts. To view the crosshair and its tooltip, hover over the chart or tap on it in touch-enabled devices.</p>
</div>
<div id="description">
<p>
This sample demonstrates the crosshair behavior in chart. Crosshair is used to inspect or focus on an individual data point.
You can customize the axis tooltip using <code>crosshairTooltip</code> properties in axis.
</p>
<p>Hover the chart area to view crosshair and its tooltip. Touch and hold to enable crosshair in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Crosshair, we need to inject
<code>Crosshair</code> module into <code>services</code>.
</p>
<p>
More information on the Crosshair can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/cross-hair-and-track-ball/#trackball">documentation section</a>.
</p>
</div>
</div>
)
}
export default CrosshairChart;

100
src/chart/cylindrical-column-functional.tsx Normal file
Просмотреть файл

@ -0,0 +1,100 @@
/**
* Sample for Cylindrical Column series
*/
import * as React from 'react';
import { useEffect } from "react";
import { ChartComponent, ILoadedEventArgs, ColumnSeries, Category, DataLabel, Tooltip, ChartTheme, SeriesDirective, SeriesCollectionDirective, Inject } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data: Object[] = [
{ x: 'China', y: 26, tooltipMappingName: 'China' },
{ x: 'Australia', y: 8, tooltipMappingName: 'Australia' },
{ x: 'Germany', y: 17, tooltipMappingName: 'Germany' },
{ x: 'Spain', y: 7, tooltipMappingName: 'Spain' },
{ x: 'Japan', y: 12, tooltipMappingName: 'Japan' },
{ x: 'USA', y: 46, tooltipMappingName: 'United States' }
];
const CylindricalColumn = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }}
chartArea={{ border: { width: 0 } }}
title='Olympic Gold Medal Counts - RIO'
primaryXAxis={{
valueType: 'Category',
interval: 1,
majorGridLines: { width: 0 },
labelIntersectAction: Browser.isDevice ? 'None' : 'Trim',
labelRotation: Browser.isDevice ? -45 : 0,
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
}}
primaryYAxis={{
title: 'Medal Count',
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
maximum: 50,
interval: 10
}}
tooltip={{
enable: true,
header: "<b>${point.tooltip}</b>",
format: "Gold Medal: <b>${point.y}</b>"
}}
load={load.bind(this)}
loaded={onChartLoad.bind(this)}
width={Browser.isDevice ? '100%' : '75%'}>
<Inject services={[ColumnSeries, Category, DataLabel, Tooltip]} />
<SeriesCollectionDirective>
<SeriesDirective
dataSource={data}
columnFacet='Cylinder'
type='Column'
xName='x'
yName='y'
width={2}
columnSpacing={0.1}
tooltipMappingName='tooltipMappingName'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>
This sample visualizes the gold medal count from the Rio Olympics using a cylindrical column chart. </p>
</div>
<div id="description">
<p>
In this example, you can observe the rendering and configuration of a cylindrical column chart. The cylindrical column chart serves the purpose of comparing the frequency, count, total, or average of data across various categories using a cylindrical shape. </p>
<p>
Tooltips have been enabled in this example. To experience the tooltip functionality, simply hover over a point or tap on it in touch-enabled devices. </p>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject <code>ColumnSeries</code> module into <code>services</code>.
</p>
<p>
More information on the column series can be found in this &nbsp;
<a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/chart-types/column">documentation section</a>.
</p>
</div>
</div>
)
}
export default CylindricalColumn;

95
src/chart/cylindrical-column.tsx Normal file
Просмотреть файл

@ -0,0 +1,95 @@
/**
* Sample for Cylindrical Column series
*/
import * as React from 'react';
import { ChartComponent, ILoadedEventArgs, ColumnSeries, Category, DataLabel, Tooltip, ChartTheme, SeriesDirective, SeriesCollectionDirective, Inject } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { SampleBase } from '../common/sample-base';
export let data: Object[] = [
{ x: 'China', y: 26 , tooltipMappingName:'China' },
{ x: 'Australia', y: 8, tooltipMappingName:'Australia'},
{ x: 'Germany', y: 17, tooltipMappingName:'Germany' },
{ x: 'Spain', y: 7, tooltipMappingName:'Spain' },
{ x: 'Japan', y: 12, tooltipMappingName:'Japan' },
{ x: 'USA', y: 46, tooltipMappingName:'United States' }
];
export class CylindricalColumn extends SampleBase<{}, {}> {
render() {
return (
<div className='control-pane'>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }}
chartArea={{ border: { width: 0 } }}
title='Olympic Medal Counts - RIO'
primaryXAxis={{
valueType: 'Category',
interval: 1,
majorGridLines: { width: 0 },
labelIntersectAction: Browser.isDevice ? 'None' : 'Trim',
labelRotation: Browser.isDevice ? -45 : 0,
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
}}
primaryYAxis={{
title: 'Medal Count',
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
maximum: 50,
interval: 10
}}
tooltip={{
enable: true,
header: "<b>${point.tooltip}</b>",
format: "Gold Medal: <b>${point.y}</b>"
}}
load={this.load.bind(this)}
width={Browser.isDevice ? '100%' : '75%'}>
<Inject services={[ColumnSeries, Category, DataLabel, Tooltip]} />
<SeriesCollectionDirective>
<SeriesDirective
dataSource={data}
columnFacet='Cylinder'
type='Column'
xName='x'
yName='y'
width={2}
columnSpacing={0.1}
opacity= {0.75}
tooltipMappingName='tooltipMappingName'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>
This sample visualizes the gold medal count from the Rio Olympics using a cylindrical column chart. </p>
</div>
<div id="description">
<p>
In this example, you can observe the rendering and configuration of a cylindrical column chart. The cylindrical column chart serves the purpose of comparing the frequency, count, total, or average of data across various categories using a cylindrical shape. </p>
<p>
Tooltips have been enabled in this example. To experience the tooltip functionality, simply hover over a point or tap on it in touch-enabled devices. </p>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject <code>ColumnSeries</code> module into <code>services</code>.
</p>
<p>
More information on the column series can be found in this &nbsp;
<a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/chart-types/column">documentation section</a>.
</p>
</div>
</div>
)
}
public load(args: ILoadedEventArgs): void {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as ChartTheme;
};
}

344
src/chart/dashed-line-functional.tsx
Просмотреть файл

@ -1,172 +1,172 @@
/**
* Sample for Line Series with dashed line
*/
import * as React from 'react';
import { useEffect, useState } from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, AnnotationDirective, ILoadedEventArgs, AnnotationsDirective, Inject, ChartAnnotation, LineSeries, Crosshair, Category, Tooltip, Highlight, ChartTheme } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1 = [
{ x: 'Jan', y: 100 },
{ x: 'Feb', y: 110 },
{ x: 'Mar', y: 125 },
{ x: 'Apr', y: 150 },
{ x: 'May', y: 140 },
{ x: 'Jun', y: 160 },
];
export let data2 = [
{ x: 'Jun', y: 160 },
{ x: 'Jul', y: 170 },
{ x: 'Aug', y: 180 },
{ x: 'Sep', y: 190 },
{ x: 'Oct', y: 200 },
{ x: 'Nov', y: 230 },
{ x: 'Dec', y: 270 },
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
#charts_Series_1 {
stroke-dasharray: 10px 10px;
stroke-linejoin: round; stroke-linecap: round;
-webkit-animation: dash 1s linear infinite;
animation: dash 1s linear infinite;
}
#charts_Series_0_Point_3_Symbol {
-webkit-animation: opac 1s ease-out infinite;
animation: opac 1s ease-out infinite;
}
@-webkit-keyframes dash {
100% {
stroke-dashoffset: -20px;
}
}
@keyframes dash {
100% {
stroke-dashoffset: -20px;
}
}
@keyframes opac {
0% {
stroke-opacity: 1;
stroke-width: 0px;
}
100% {
stroke-opacity: 0;
stroke-width: 10px;
}
}`;
const DashedLine = () => {
useEffect(() => {
updateSampleSection();
}, [])
const [content, setContent] = useState<string>("<div>Actual</div>");
const [content1, setContent1] = useState<string>("<div>Forecast</div>");
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let annotationColor = 'light';
args.chart.annotations[0].content = '<div style="color:black; font-weight:bold;">Actual</div>';
args.chart.annotations[1].content = '<div style="color:black; font-weight:bold;">Forecast</div>';
let selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
if (selectedTheme === 'highcontrast' || selectedTheme.indexOf('dark') > -1) {
args.chart.annotations[0].content = '<div style="color:white; font-weight:bold;">Actual</div>';
args.chart.annotations[1].content = '<div style="color:white; font-weight:bold;">Forecast</div>';
}
if (selectedTheme && selectedTheme.indexOf('fabric-dark') > -1) {
annotationColor = 'dark'
} else if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
annotationColor = 'light'
} else if (selectedTheme === 'material-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'material') {
annotationColor = 'light'
} else if (selectedTheme === 'bootstrap5-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'bootstrap5') {
annotationColor = 'light'
} else if (selectedTheme === 'bootstrap-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'bootstrap') {
annotationColor = 'light'
} else if (selectedTheme === 'highcontrast') {
annotationColor = 'dark'
} else if (selectedTheme === 'fluent-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'fluent') {
annotationColor = 'light'
} else if (selectedTheme === 'tailwind-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'tailwind') {
annotationColor = 'light'
} else if (selectedTheme === 'material3-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'material3') {
annotationColor = 'light'
} else {
annotationColor = 'light'
}
if (annotationColor == 'light') {
setContent('<div style="color:black; font-weight:bold;">Actual</div>');
setContent1('<div style="color:black; font-weight:bold;">Forecast</div>');
}
else {
setContent('<div style="color:whitesmoke; font-weight:bold;">Actual</div>');
setContent1('<div style="color:whitesmoke; font-weight:bold;">Forecast</div>');
}
};
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 }, interval: 1, labelIntersectAction: Browser.isDevice ? 'None' : 'Trim', labelRotation: Browser.isDevice ? -45 : 0, majorTickLines: {width : 0}, minorTickLines: {width: 0} }} load={load.bind(this)} primaryYAxis={{ labelFormat: '{value}k', rangePadding: 'None', lineStyle: { width: 0 }, minimum: 0, maximum: 300, interval: 50, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true, format: '${point.x} : <b>${point.y}</b>', header: '<b>Fruits Production</b>' }} legendSettings={{ enableHighlight: true }} crosshair={{ enable: false, line: { color: 'rgba(204,214,235,0.25)', width: Browser.isDevice ? 50 : 20}, lineType: 'Vertical' }} width={Browser.isDevice ? '100%' : '75%'} title="Fruits Production Statistics" loaded={onChartLoad.bind(this)}>
<Inject services={[ LineSeries, Category, Tooltip, Crosshair, ChartAnnotation, Highlight ]}/>
<AnnotationsDirective>
<AnnotationDirective content={content} region="Series" x="15%" y="55%"></AnnotationDirective>
<AnnotationDirective content={content1} region="Series" x="65%" y="30%"></AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName="x" yName="y" width={2} marker={{ visible: false, width: 7, height: 7 }} type="Line"></SeriesDirective>
<SeriesDirective dataSource={data2} xName="x" yName="y" width={2} marker={{ visible: false, width: 7, height: 7, shape: 'Diamond'}} dashArray='10' type="Line"></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample shows the rate of fruit production statistics with default line series and dash array in the chart. Dashed lines are animated by using CSS animation.</p>
</div>
<div id="description">
<p>
In this example, you will see how to render and configure the line chart. Line charts are used to represent time-dependent data, showing trends in data at equal intervals.
You can use <code>DashArray</code>, <code>Width</code>, <code>Fill</code> properties to customize the line.
</p>
<p>
<code>Tooltips</code> are enabled in this example.To see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use line series, we need to inject
<code>LineSeries</code> module into <code>services</code>.
</p>
<p>
More information on the line series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#line-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default DashedLine;
/**
* Sample for Line Series with dashed line
*/
import * as React from 'react';
import { useEffect, useState } from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, AnnotationDirective, ILoadedEventArgs, AnnotationsDirective, Inject, ChartAnnotation, LineSeries, Crosshair, Category, Tooltip, Highlight, ChartTheme } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1 = [
{ x: 'Jan', y: 100 },
{ x: 'Feb', y: 110 },
{ x: 'Mar', y: 125 },
{ x: 'Apr', y: 150 },
{ x: 'May', y: 140 },
{ x: 'Jun', y: 160 },
];
export let data2 = [
{ x: 'Jun', y: 160 },
{ x: 'Jul', y: 170 },
{ x: 'Aug', y: 180 },
{ x: 'Sep', y: 190 },
{ x: 'Oct', y: 200 },
{ x: 'Nov', y: 230 },
{ x: 'Dec', y: 270 },
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
#charts_Series_1 {
stroke-dasharray: 10px 10px;
stroke-linejoin: round; stroke-linecap: round;
-webkit-animation: dash 1s linear infinite;
animation: dash 1s linear infinite;
}
#charts_Series_0_Point_3_Symbol {
-webkit-animation: opac 1s ease-out infinite;
animation: opac 1s ease-out infinite;
}
@-webkit-keyframes dash {
100% {
stroke-dashoffset: -20px;
}
}
@keyframes dash {
100% {
stroke-dashoffset: -20px;
}
}
@keyframes opac {
0% {
stroke-opacity: 1;
stroke-width: 0px;
}
100% {
stroke-opacity: 0;
stroke-width: 10px;
}
}`;
const DashedLine = () => {
useEffect(() => {
updateSampleSection();
}, [])
const [content, setContent] = useState<string>("<div>Actual</div>");
const [content1, setContent1] = useState<string>("<div>Forecast</div>");
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let annotationColor = 'light';
args.chart.annotations[0].content = '<div style="color:black; font-weight:bold;">Actual</div>';
args.chart.annotations[1].content = '<div style="color:black; font-weight:bold;">Forecast</div>';
let selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
if (selectedTheme === 'highcontrast' || selectedTheme.indexOf('dark') > -1) {
args.chart.annotations[0].content = '<div style="color:white; font-weight:bold;">Actual</div>';
args.chart.annotations[1].content = '<div style="color:white; font-weight:bold;">Forecast</div>';
}
if (selectedTheme && selectedTheme.indexOf('fabric-dark') > -1) {
annotationColor = 'dark'
} else if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
annotationColor = 'light'
} else if (selectedTheme === 'material-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'material') {
annotationColor = 'light'
} else if (selectedTheme === 'bootstrap5-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'bootstrap5') {
annotationColor = 'light'
} else if (selectedTheme === 'bootstrap-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'bootstrap') {
annotationColor = 'light'
} else if (selectedTheme === 'highcontrast') {
annotationColor = 'dark'
} else if (selectedTheme === 'fluent-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'fluent') {
annotationColor = 'light'
} else if (selectedTheme === 'tailwind-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'tailwind') {
annotationColor = 'light'
} else if (selectedTheme === 'material3-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'material3') {
annotationColor = 'light'
} else {
annotationColor = 'light'
}
if (annotationColor == 'light') {
setContent('<div style="color:black; font-weight:bold;">Actual</div>');
setContent1('<div style="color:black; font-weight:bold;">Forecast</div>');
}
else {
setContent('<div style="color:whitesmoke; font-weight:bold;">Actual</div>');
setContent1('<div style="color:whitesmoke; font-weight:bold;">Forecast</div>');
}
};
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 }, interval: 1, labelIntersectAction: Browser.isDevice ? 'None' : 'Trim', labelRotation: Browser.isDevice ? -45 : 0, majorTickLines: {width : 0}, minorTickLines: {width: 0} }} load={load.bind(this)} primaryYAxis={{ labelFormat: '{value}k', rangePadding: 'None', lineStyle: { width: 0 }, minimum: 0, maximum: 300, interval: 50, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true, format: '${point.x} : <b>${point.y}</b>', header: '<b>Fruits Production</b>' }} legendSettings={{ enableHighlight: true }} crosshair={{ enable: false, line: { color: 'rgba(204,214,235,0.25)', width: Browser.isDevice ? 50 : 20}, lineType: 'Vertical' }} width={Browser.isDevice ? '100%' : '75%'} title="Fruits Production Statistics" loaded={onChartLoad.bind(this)}>
<Inject services={[ LineSeries, Category, Tooltip, Crosshair, ChartAnnotation, Highlight ]}/>
<AnnotationsDirective>
<AnnotationDirective content={content} region="Series" x="15%" y="55%"></AnnotationDirective>
<AnnotationDirective content={content1} region="Series" x="65%" y="30%"></AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName="x" yName="y" width={2} marker={{ visible: false, width: 7, height: 7 }} type="Line"></SeriesDirective>
<SeriesDirective dataSource={data2} xName="x" yName="y" width={2} marker={{ visible: false, width: 7, height: 7, shape: 'Diamond'}} dashArray='10' type="Line"></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample shows the rate of fruit production statistics with default line series and dash array in the chart. Dashed lines are animated by using CSS animation.</p>
</div>
<div id="description">
<p>
In this example, you will see how to render and configure the line chart. Line charts are used to represent time-dependent data, showing trends in data at equal intervals.
You can use <code>DashArray</code>, <code>Width</code>, <code>Fill</code> properties to customize the line.
</p>
<p>
<code>Tooltips</code> are enabled in this example.To see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use line series, we need to inject
<code>LineSeries</code> module into <code>services</code>.
</p>
<p>
More information on the line series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#line-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default DashedLine;

149
src/chart/data-editing-functional.tsx
Просмотреть файл

@ -1,75 +1,74 @@
/**
* Sample for Line Series
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, Inject, ColumnSeries, LineSeries, DataEditing, Legend, Tooltip, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1: any[] = [
{ x: 2005, y: 21 }, { x: 2006, y: 24 },
{ x: 2007, y: 36 }, { x: 2008, y: 38 },
{ x: 2009, y: 54 }, { x: 2010, y: 57 },
{ x: 2011, y: 70 }
];
export let data2: any[] = [
{ x: 2005, y: 28 }, { x: 2006, y: 44 },
{ x: 2007, y: 48 }, { x: 2008, y: 50 },
{ x: 2009, y: 66 }, { x: 2010, y: 78 },
{ x: 2011, y: 84 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
.charts {
align :center
}`;
const DataEdit = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'Category', labelFormat: 'y', labelPlacement: 'BetweenTicks', majorGridLines: { width: 0 }, edgeLabelPlacement: 'Shift', majorTickLines: { width : 0}, minorTickLines: { width : 0} }} load={load.bind(this)} primaryYAxis={{ rangePadding: 'None', minimum: 0, maximum: 100, interval: 20, title: 'Production(Billion in kWh)', labelFormat: '{value}B', lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true }} width={Browser.isDevice ? '100%' : '75%'} title='Electricity - Production' loaded={onChartLoad.bind(this)}>
<Inject services={[LineSeries, ColumnSeries, Category, DataEditing, Legend, Tooltip]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} dragSettings={{ enable: true }} xName='x' yName='y' name='Renewable' width={2} marker={{ visible: true, width: 7, height: 7 }} type='Column' />
<SeriesDirective dataSource={data2} dragSettings={{ enable: true }} xName='x' yName='y' name='Non-Renewable' width={2} marker={{ visible: true, width: 7, height: 7, isFilled: true }} type='Line' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample shows the behavior of the data editing in the chart. Drag and drop the points to change the data values dynamically.</p>
</div>
<div id="description">
<p>
In this example, you can see how to drag and drop the data points in the chart by setting Enable property in <code>ChartDataEditSettings</code> to <b>true</b>. Also, you can set data editing’s minimum and maximum range using the <code>MinY</code> and <code>MaxY</code> properties.
</p>
<p>Tooltip is enabled in this example. To see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<p>
Chart component features are segregated into individual feature-wise modules. To use data editing, we need to inject
<code>DataEditing</code> module using <code>Chart.Inject(DataEditing)</code> method.
</p> <br>
</br>
<p>
More information on the Data Editing can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/data-editing/">documentation section</a>.
</p>
</div>
</div>
)
}
export default DataEdit;
/**
* Sample for Line Series
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, Inject, ColumnSeries, LineSeries, DataEditing, Legend, Tooltip, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1: any[] = [
{ x: 2005, y: 21 }, { x: 2006, y: 24 },
{ x: 2007, y: 36 }, { x: 2008, y: 38 },
{ x: 2009, y: 54 }, { x: 2010, y: 57 },
{ x: 2011, y: 70 }
];
export let data2: any[] = [
{ x: 2005, y: 28 }, { x: 2006, y: 44 },
{ x: 2007, y: 48 }, { x: 2008, y: 50 },
{ x: 2009, y: 66 }, { x: 2010, y: 78 },
{ x: 2011, y: 84 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
.charts {
align :center
}`;
const DataEdit = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'Category', labelFormat: 'y', labelPlacement: 'BetweenTicks', majorGridLines: { width: 0 }, edgeLabelPlacement: 'Shift', majorTickLines: { width : 0}, minorTickLines: { width : 0} }} load={load.bind(this)} primaryYAxis={{ rangePadding: 'None', minimum: 0, maximum: 100, interval: 20, title: 'Production(Billion in kWh)', labelFormat: '{value}B', lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} title='Electricity - Production' loaded={onChartLoad.bind(this)}>
<Inject services={[LineSeries, ColumnSeries, Category, DataEditing, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} dragSettings={{ enable: true }} xName='x' yName='y' name='Renewable' width={2} marker={{ visible: true, width: 7, height: 7 }} type='Column' />
<SeriesDirective dataSource={data2} dragSettings={{ enable: true }} xName='x' yName='y' name='Non-Renewable' width={2} marker={{ visible: true, width: 7, height: 7, isFilled: true }} type='Line' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample shows the behavior of the data editing in the chart. Drag and drop the points to change the data values dynamically.</p>
</div>
<div id="description">
<p>
In this example, you can see how to drag and drop the data points in the chart by setting Enable property in <code>ChartDataEditSettings</code> to <b>true</b>. Also, you can set data editing’s minimum and maximum range using the <code>MinY</code> and <code>MaxY</code> properties.
</p>
<p>
Chart component features are segregated into individual feature-wise modules. To use data editing, we need to inject
<code>DataEditing</code> module using <code>Chart.Inject(DataEditing)</code> method.
</p> <br>
</br>
<p>
More information on the Data Editing can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/data-editing/">documentation section</a>.
</p>
</div>
</div>
)
}
export default DataEdit;

3
src/chart/data-editing.tsx
Просмотреть файл

@ -62,10 +62,9 @@ export class DataEdit extends SampleBase<{}, {}> {
}}
chartArea={{ border: { width: 0 } }}
tooltip={{ enable: true }}
width={Browser.isDevice ? '100%' : '75%'}
title='Sales prediction of products' loaded={this.onChartLoad.bind(this)}>
<Inject services={[LineSeries, ColumnSeries, Category, DataEditing, Legend, Tooltip]} />
<Inject services={[LineSeries, ColumnSeries, Category, DataEditing, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} dragSettings={{ enable: true }} xName='x' yName='y' name='Product A'
width={2} marker={{ visible: true, width: 10, height: 10 }} type='Column'>

458
src/chart/datalabel-template-functional.tsx
Просмотреть файл

@ -1,230 +1,230 @@
/**
* Sample fro DataLabel template
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, DataLabel, Legend, ILoadedEventArgs,ColumnSeries, ChartTheme, Category, ITextRenderEventArgs } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from "../common/sample-base";
let data1: Object[] = [
{ sports: "Tennis", boys: 50, girls: 38 },
{ sports: "Badminton", boys: 30, girls: 40 },
{ sports: "Cycling", boys: 37, girls: 20 },
{ sports: "Football", boys: 60, girls: 21 },
{ sports: "Hockey", boys: 15, girls: 8 },
];
let data2: Object[] = [
{ sports: "Tennis", boys: 50, girls: 38 },
{ sports: "Badminton", boys: 30, girls: 40 },
{ sports: "Cycling", boys: 37, girls: 20 },
{ sports: "Football", boys: 60, girls: 21 },
{ sports: "Hockey", boys: 15, girls: 8 },
];
let theme: ChartTheme;
let materialMan: string = '<div style="background-color:#00bdae;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center; padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let materialWomen: string = '<div style="background-color:#404041;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let fabricMan: string = '<div style="background-color:#4472c4;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px"><span>' +
'${point.y} </span></div></div>';
let fabricWomen: string = '<div style="background-color:#ed7d31;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px"><span>' +
'${point.y} </span></div></div>';
let bootstrapMan: string = '<div style="background-color:#a16ee5;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let bootstrapWomen: string = '<div style="background-color:#f7ce69;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px"><span>' +
'${point.y} </span></div></div>';
let highcontrastMan: string = '<div style="background-color:#79ECE4;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let highcontrastWomen: string = '<div style="background-color:#E98272;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let tailwindMan: string = '<div style="background-color:#5A61F6;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let tailwindWomen: string = '<div style="background-color:#65A30D;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let bootstrap5Man: string = '<div style="background-color:#6355C7;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let bootstrap5Women: string = '<div style="background-color:#FFB400;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let materialDarkMan: string = '<div style="background-color:#9ECB08;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let materialDarkWomen: string = '<div style="background-color:#56AEFF;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let fabricDarkMan: string = '<div style="background-color:#4472c4;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let fabricDarkWomen: string = '<div style="background-color:#ed7d31;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let tailwindDarkMan: string = '<div style="background-color:#8B5CF6;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let tailwindDarkWomen: string = '<div style="background-color:#22D3EE;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let bootstrap5DarkMan: string = '<div style="background-color:#8F80F4;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let bootstrap5DarkWomen: string = '<div style="background-color:#FFD46D;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let fluentMan: string = '<div style="background-color:#1AC9E6;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let fluentWomen: string = '<div style="background-color:#DA4CB2;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let fluentDarkMan: string = '<div style="background-color:#1AC9E6;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let fluentDarkWomen: string = '<div style="background-color:#DA4CB2;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let material3Man: string = '<div style="background-color:#6355C7;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center; padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let material3Women: string = '<div style="background-color:#00AEE0;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let material3DarkMan: string = '<div style="background-color:#4EAAFF;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center; padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let material3DarkWomen: string = '<div style="background-color:#FA4EAB;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const DataLabelTemplate = () => {
useEffect(() => {
updateSampleSection();
}, [])
const textRender = (args: ITextRenderEventArgs): void => {
if (theme === 'Material') {
args.template = args.series.name === 'Boys' ? materialMan : materialWomen;
} else if (theme === 'Fabric') {
args.template = args.series.name === 'Boys' ? fabricMan : fabricWomen;
} else if (theme === 'Tailwind') {
args.template = args.series.name === 'Boys' ? tailwindMan : tailwindWomen;
} else if (theme.toLowerCase() === 'highcontrast') {
args.template = args.series.name === 'Boys' ? highcontrastMan : highcontrastWomen;
} else if (theme === 'MaterialDark') {
args.template = args.series.name === 'Boys' ? materialDarkMan : materialDarkWomen;
} else if (theme === 'FabricDark') {
args.template = args.series.name === 'Boys' ? fabricDarkMan : fabricDarkWomen;
} else if (theme === 'TailwindDark') {
args.template = args.series.name === 'Boys' ? tailwindDarkMan : tailwindDarkWomen;
} else if (theme === 'Bootstrap5Dark') {
args.template = args.series.name === 'Boys' ? bootstrap5DarkMan : bootstrap5DarkWomen;
} else if (theme === 'Bootstrap5') {
args.template = args.series.name === 'Boys' ? bootstrap5Man : bootstrap5Women;
} else if (theme === 'Fluent') {
args.template = args.series.name === 'Boys' ? fluentMan : fluentWomen;
} else if (theme === 'FluentDark') {
args.template = args.series.name === 'Boys' ? fluentDarkMan : fluentDarkWomen;
} else if (theme === 'Material3') {
args.template = args.series.name === 'Boys' ? material3Man : material3Women;
} else if (theme === 'Material3Dark') {
args.template = args.series.name === 'Boys' ? material3DarkMan : material3DarkWomen;
} else {
args.template = args.series.name === 'Boys' ? bootstrapMan : bootstrapWomen;
}
};
const loadPre = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
theme = args.chart.theme;
};
const loaded = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'Category', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 }, labelIntersectAction: 'Rotate45', majorTickLines: {width : 0}, minorTickLines: {width : 0} }} primaryYAxis={{ minimum: 0, maximum: 70, lineStyle:{width:0}, majorGridLines:{ color:'#eaeaea', width:1} }} titleStyle={{ fontStyle: 'medium', size: '14px' }} chartArea={{ border: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} title='Athletes in Popular School' load={loadPre.bind(this)} loaded={loaded.bind(this)} textRender={textRender.bind(this)}>
<Inject services={[LineSeries, DataLabel, Category, Legend, ColumnSeries]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='sports' yName='boys' name='Boys' type='Column' columnWidth={0.75} columnSpacing={0.5} marker={{ visible: false, shape: 'Circle', dataLabel: { visible: true, position: 'Outer', margin: { top: 70 }, template: materialMan } }} width={2} />
<SeriesDirective dataSource={data2} xName='sports' yName='girls' name='Girls' type='Column' columnWidth={0.75} columnSpacing={0.5} marker={{ visible: false, shape: 'Rectangle', dataLabel: { visible: true, position: 'Outer', margin: { top: 70 }, template: materialWomen } }} width={2} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
)
}
/**
* Sample fro DataLabel template
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, DataLabel, Legend, ILoadedEventArgs,ColumnSeries, ChartTheme, Category, ITextRenderEventArgs } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from "../common/sample-base";
let data1: Object[] = [
{ sports: "Tennis", boys: 50, girls: 38 },
{ sports: "Badminton", boys: 30, girls: 40 },
{ sports: "Cycling", boys: 37, girls: 20 },
{ sports: "Football", boys: 60, girls: 21 },
{ sports: "Hockey", boys: 15, girls: 8 },
];
let data2: Object[] = [
{ sports: "Tennis", boys: 50, girls: 38 },
{ sports: "Badminton", boys: 30, girls: 40 },
{ sports: "Cycling", boys: 37, girls: 20 },
{ sports: "Football", boys: 60, girls: 21 },
{ sports: "Hockey", boys: 15, girls: 8 },
];
let theme: ChartTheme;
let materialMan: string = '<div style="background-color:#00bdae;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center; padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let materialWomen: string = '<div style="background-color:#404041;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let fabricMan: string = '<div style="background-color:#4472c4;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px"><span>' +
'${point.y} </span></div></div>';
let fabricWomen: string = '<div style="background-color:#ed7d31;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px"><span>' +
'${point.y} </span></div></div>';
let bootstrapMan: string = '<div style="background-color:#a16ee5;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let bootstrapWomen: string = '<div style="background-color:#f7ce69;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px"><span>' +
'${point.y} </span></div></div>';
let highcontrastMan: string = '<div style="background-color:#79ECE4;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let highcontrastWomen: string = '<div style="background-color:#E98272;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let tailwindMan: string = '<div style="background-color:#5A61F6;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let tailwindWomen: string = '<div style="background-color:#65A30D;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let bootstrap5Man: string = '<div style="background-color:#6355C7;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let bootstrap5Women: string = '<div style="background-color:#FFB400;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let materialDarkMan: string = '<div style="background-color:#9ECB08;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let materialDarkWomen: string = '<div style="background-color:#56AEFF;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let fabricDarkMan: string = '<div style="background-color:#4472c4;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let fabricDarkWomen: string = '<div style="background-color:#ed7d31;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let tailwindDarkMan: string = '<div style="background-color:#8B5CF6;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let tailwindDarkWomen: string = '<div style="background-color:#22D3EE;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let bootstrap5DarkMan: string = '<div style="background-color:#8F80F4;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let bootstrap5DarkWomen: string = '<div style="background-color:#FFD46D;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let fluentMan: string = '<div style="background-color:#1AC9E6;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let fluentWomen: string = '<div style="background-color:#DA4CB2;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let fluentDarkMan: string = '<div style="background-color:#1AC9E6;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let fluentDarkWomen: string = '<div style="background-color:#DA4CB2;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let material3Man: string = '<div style="background-color:#6355C7;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center; padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let material3Women: string = '<div style="background-color:#00AEE0;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let material3DarkMan: string = '<div style="background-color:#4EAAFF;border-radius: 3px;">' +
'<img src="src/chart/images/male.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center; padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
let material3DarkWomen: string = '<div style="background-color:#FA4EAB;border-radius: 3px;">' +
'<img src="src/chart/images/female.png" style="width: 24px; height: 24px; padding: 2px" />' +
'<div style="color:white; font-family:Roboto; font-style: medium; font-size:14px; float: right;'
+ 'padding: 2px;line-height: 20px;text-align: center;padding-right: 6px;"><span>' +
'${point.y} </span></div></div>';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const DataLabelTemplate = () => {
useEffect(() => {
updateSampleSection();
}, [])
const textRender = (args: ITextRenderEventArgs): void => {
if (theme === 'Material') {
args.template = args.series.name === 'Boys' ? materialMan : materialWomen;
} else if (theme === 'Fabric') {
args.template = args.series.name === 'Boys' ? fabricMan : fabricWomen;
} else if (theme === 'Tailwind') {
args.template = args.series.name === 'Boys' ? tailwindMan : tailwindWomen;
} else if (theme.toLowerCase() === 'highcontrast') {
args.template = args.series.name === 'Boys' ? highcontrastMan : highcontrastWomen;
} else if (theme === 'MaterialDark') {
args.template = args.series.name === 'Boys' ? materialDarkMan : materialDarkWomen;
} else if (theme === 'FabricDark') {
args.template = args.series.name === 'Boys' ? fabricDarkMan : fabricDarkWomen;
} else if (theme === 'TailwindDark') {
args.template = args.series.name === 'Boys' ? tailwindDarkMan : tailwindDarkWomen;
} else if (theme === 'Bootstrap5Dark') {
args.template = args.series.name === 'Boys' ? bootstrap5DarkMan : bootstrap5DarkWomen;
} else if (theme === 'Bootstrap5') {
args.template = args.series.name === 'Boys' ? bootstrap5Man : bootstrap5Women;
} else if (theme === 'Fluent') {
args.template = args.series.name === 'Boys' ? fluentMan : fluentWomen;
} else if (theme === 'FluentDark') {
args.template = args.series.name === 'Boys' ? fluentDarkMan : fluentDarkWomen;
} else if (theme === 'Material3') {
args.template = args.series.name === 'Boys' ? material3Man : material3Women;
} else if (theme === 'Material3Dark') {
args.template = args.series.name === 'Boys' ? material3DarkMan : material3DarkWomen;
} else {
args.template = args.series.name === 'Boys' ? bootstrapMan : bootstrapWomen;
}
};
const loadPre = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
theme = args.chart.theme;
};
const loaded = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'Category', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 }, labelIntersectAction: 'Rotate45', majorTickLines: {width : 0}, minorTickLines: {width : 0} }} primaryYAxis={{ minimum: 0, maximum: 70, lineStyle:{width:0}, majorGridLines:{ color:'#eaeaea', width:1} }} titleStyle={{ fontStyle: 'medium', size: '14px' }} chartArea={{ border: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} title='Athletes in Popular School' load={loadPre.bind(this)} loaded={loaded.bind(this)} textRender={textRender.bind(this)}>
<Inject services={[LineSeries, DataLabel, Category, Legend, ColumnSeries]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='sports' yName='boys' name='Boys' type='Column' columnWidth={0.75} columnSpacing={0.5} marker={{ visible: false, shape: 'Circle', dataLabel: { visible: true, position: 'Outer', margin: { top: 70 }, template: materialMan } }} width={2} />
<SeriesDirective dataSource={data2} xName='sports' yName='girls' name='Girls' type='Column' columnWidth={0.75} columnSpacing={0.5} marker={{ visible: false, shape: 'Rectangle', dataLabel: { visible: true, position: 'Outer', margin: { top: 70 }, template: materialWomen } }} width={2} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
)
}
export default DataLabelTemplate;

170
src/chart/datetime-category-functional.tsx
Просмотреть файл

@ -1,85 +1,85 @@
/**
* Sample for smart axis labels
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Tooltip, IPointRenderEventArgs, ChartTheme, ILoadedEventArgs, DateTimeCategory, ColumnSeries, Inject, AnnotationDirective, AnnotationsDirective, DataLabel, ChartAnnotation, StripLine } from '@syncfusion/ej2-react-charts';
import { EmitType, Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let materialColors: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',
'#ea7a57', '#404041', '#00bdae'];
let fabricColors: string[] = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',
'#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];
let selectedTheme: string = location.hash.split('/')[1];
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = fabricColors[args.point.index];
} else {
args.fill = materialColors[args.point.index];
}
};
export let data1: any[] = [
{ x: new Date(2017, 11, 20), y: 21, DataLabelMappingName:"21M" }, { x: new Date(2017, 11, 21), y: 24, DataLabelMappingName: "24M" },
{ x: new Date(2017, 11, 22), y: 24, DataLabelMappingName: "24M" }, { x: new Date(2017, 11, 26), y: 70, DataLabelMappingName: "70M" },
{ x: new Date(2017, 11, 27), y: 75, DataLabelMappingName: "75M" }, { x: new Date(2018, 0, 2), y: 82, DataLabelMappingName: "82M" },
{ x: new Date(2018, 0, 3), y: 53, DataLabelMappingName: "53M" }, { x: new Date(2018, 0, 4), y: 54, DataLabelMappingName: "54M" },
{ x: new Date(2018, 0, 5), y: 53, DataLabelMappingName: "53M"}, { x: new Date(2018, 0, 8), y: 45, DataLabelMappingName: "45M" }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const DatetimeCategoryAxis = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section row'>
<div>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTimeCategory', intervalType: 'Days', skeleton: 'Ed', majorGridLines: { width: 0 }, stripLines: [ { visible: true, start: new Date(2017, 11, 20), end: new Date(2017, 11, 27), color: 'skyblue', opacity: 0.5, }, { visible: true, start: new Date(2018, 0, 2), end: new Date(2018, 0, 8), color: 'pink', opacity: 0.5 }, ], title: 'Business Days', labelIntersectAction: Browser.isDevice ? 'None' : 'Rotate45', labelRotation: Browser.isDevice ? -45 : 0 }} chartArea={{ border: { width: 0 } }} primaryYAxis={{ labelFormat: '{value}M', rangePadding: 'None', minimum: 0, maximum: 100, interval: 20, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} load={load.bind(this)} title="Sales Comparison of a Product" loaded={onChartLoad.bind(this)} legendSettings={{ visible: false }} width={Browser.isDevice ? '100%' : '75%'} tooltip={{ enable: false }}>
<Inject services={[DateTimeCategory, ColumnSeries, Tooltip, ChartAnnotation, StripLine, DataLabel]} />
<AnnotationsDirective>
<AnnotationDirective content='<div style="color:#FF0000;font-family: bold; font-weight: 600">Christmas Offer<br> Dec 2017</div>' x={new Date(2017, 11, 22)} y={90} coordinateUnits='Point' />
<AnnotationDirective content='<div style="color:#FF0000;font-family: bold; font-weight: 800">New Year Offer<br> Jan 2018</div>' x={new Date(2018, 0, 4)} y={90} coordinateUnits='Point' />
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' name="Product" type='Column' marker={{ dataLabel: { visible: true, enableRotation: Browser.isDevice ? true : false, angle : -90, position: 'Top', name: 'DataLabelMappingName' } }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
<div id="action-description">
<p>This sample shows the date-time category axis with sample data about the sales of a product on different business days.</p>
</div>
<div id="description">
<p>
The date-time category axis is used to display date-time values with nonlinear intervals. For example, business days alone can be depicted here in a week. To use a date-time category axis, set the <code>ValueType</code> in axis to <b>DateTimeCategory</b>.
</p>
<p>Tooltip is enabled in this example. To see the tooltip in action, hover a point or tap a point in touch enabled devices.</p>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. For datetime category axis, you should inject
<code>DateTimeCategory</code> module by using
<code>Chart.Inject(DateTimeCategory)</code>method.
</p>
<p>
More information on the date time category can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/date-time-axis/#datetimecategory-axis">documentation section</a>.
</p>
</div>
</div >
)
}
export default DatetimeCategoryAxis;
/**
* Sample for smart axis labels
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Tooltip, IPointRenderEventArgs, ChartTheme, ILoadedEventArgs, DateTimeCategory, ColumnSeries, Inject, AnnotationDirective, AnnotationsDirective, DataLabel, ChartAnnotation, StripLine } from '@syncfusion/ej2-react-charts';
import { EmitType, Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let materialColors: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',
'#ea7a57', '#404041', '#00bdae'];
let fabricColors: string[] = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',
'#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];
let selectedTheme: string = location.hash.split('/')[1];
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = fabricColors[args.point.index];
} else {
args.fill = materialColors[args.point.index];
}
};
export let data1: any[] = [
{ x: new Date(2017, 11, 20), y: 21, DataLabelMappingName:"21M" }, { x: new Date(2017, 11, 21), y: 24, DataLabelMappingName: "24M" },
{ x: new Date(2017, 11, 22), y: 24, DataLabelMappingName: "24M" }, { x: new Date(2017, 11, 26), y: 70, DataLabelMappingName: "70M" },
{ x: new Date(2017, 11, 27), y: 75, DataLabelMappingName: "75M" }, { x: new Date(2018, 0, 2), y: 82, DataLabelMappingName: "82M" },
{ x: new Date(2018, 0, 3), y: 53, DataLabelMappingName: "53M" }, { x: new Date(2018, 0, 4), y: 54, DataLabelMappingName: "54M" },
{ x: new Date(2018, 0, 5), y: 53, DataLabelMappingName: "53M"}, { x: new Date(2018, 0, 8), y: 45, DataLabelMappingName: "45M" }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const DatetimeCategoryAxis = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section row'>
<div>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTimeCategory', intervalType: 'Days', skeleton: 'Ed', majorGridLines: { width: 0 }, stripLines: [ { visible: true, start: new Date(2017, 11, 20), end: new Date(2017, 11, 27), color: 'skyblue', opacity: 0.5, }, { visible: true, start: new Date(2018, 0, 2), end: new Date(2018, 0, 8), color: 'pink', opacity: 0.5 }, ], title: 'Business Days', labelIntersectAction: Browser.isDevice ? 'None' : 'Rotate45', labelRotation: Browser.isDevice ? -45 : 0 }} chartArea={{ border: { width: 0 } }} primaryYAxis={{ labelFormat: '{value}M', rangePadding: 'None', minimum: 0, maximum: 100, interval: 20, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} load={load.bind(this)} title="Sales Comparison of a Product" loaded={onChartLoad.bind(this)} legendSettings={{ visible: false }} width={Browser.isDevice ? '100%' : '75%'} tooltip={{ enable: false }}>
<Inject services={[DateTimeCategory, ColumnSeries, Tooltip, ChartAnnotation, StripLine, DataLabel]} />
<AnnotationsDirective>
<AnnotationDirective content='<div style="color:#FF0000;font-family: bold; font-weight: 600">Christmas Offer<br> Dec 2017</div>' x={new Date(2017, 11, 22)} y={90} coordinateUnits='Point' />
<AnnotationDirective content='<div style="color:#FF0000;font-family: bold; font-weight: 800">New Year Offer<br> Jan 2018</div>' x={new Date(2018, 0, 4)} y={90} coordinateUnits='Point' />
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' name="Product" type='Column' marker={{ dataLabel: { visible: true, enableRotation: Browser.isDevice ? true : false, angle : -90, position: 'Top', name: 'DataLabelMappingName' } }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
<div id="action-description">
<p>This sample shows the date-time category axis with sample data about the sales of a product on different business days.</p>
</div>
<div id="description">
<p>
The date-time category axis is used to display date-time values with nonlinear intervals. For example, business days alone can be depicted here in a week. To use a date-time category axis, set the <code>ValueType</code> in axis to <b>DateTimeCategory</b>.
</p>
<p>Tooltip is enabled in this example. To see the tooltip in action, hover a point or tap a point in touch enabled devices.</p>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. For datetime category axis, you should inject
<code>DateTimeCategory</code> module by using
<code>Chart.Inject(DateTimeCategory)</code>method.
</p>
<p>
More information on the date time category can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/date-time-axis/#datetimecategory-axis">documentation section</a>.
</p>
</div>
</div >
)
}
export default DatetimeCategoryAxis;

152
src/chart/datetime-functional.tsx
Просмотреть файл

@ -1,77 +1,77 @@
/**
* Sample for DateTime axis
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, DateTime, Legend, DataLabel, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
export let data1: any[] = [
{ x: new Date(2016, 2, 7), y: 6.3 },
{ x: new Date(2016, 3, 15), y: 13.3 }, { x: new Date(2016, 4, 10), y: 18.0 },
{ x: new Date(2016, 5, 17), y: 19.8 }, { x: new Date(2016, 6, 13), y: 18.1 },
{ x: new Date(2016, 7, 11), y: 13.1 }, { x: new Date(2016, 8, 16), y: 4.1 }
];
export let data2: any[] = [
{ x: new Date(2016, 2, 7), y: -5.3 },
{ x: new Date(2016, 3, 15), y: 1.0 }, { x: new Date(2016, 4, 10), y: 6.9 },
{ x: new Date(2016, 5, 17), y: 9.4 }, { x: new Date(2016, 6, 13), y: 7.6 },
{ x: new Date(2016, 7, 11), y: 2.6 }, { x: new Date(2016, 8, 16), y: -4.9 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const DateTimeAxis = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', intervalType: 'Days', labelFormat: 'MMM d', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 } }} load={load.bind(this)} primaryYAxis={{ minimum: -20, maximum: 30, interval: 10, edgeLabelPlacement: 'Shift', labelFormat: '{value}°C', lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} tooltip={{enable: false, shared: true}} title='Alaska Weather Statistics - 2016' loaded={onChartLoad.bind(this)}>
<Inject services={[LineSeries, DateTime, Legend, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' name='Warmest' type='Line' marker={{ visible: true, height: 8, width: 8, shape: 'Pentagon', isFilled : true, dataLabel: { visible: true, position: 'Top' } }} width={2}>
</SeriesDirective>
<SeriesDirective dataSource={data2} xName='x' yName='y' name='Coldest' type='Line' marker={{ visible: true, height: 8, width: 8, shape: 'Pentagon', isFilled : true, dataLabel: { visible: true, position: 'Top' } }} width={2}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
<div style={{ float: 'right', marginRight: '10px' }}>Source: &nbsp;
<a href="http://www.yr.no/place/USA/Alaska/Hatcher_Pass/statistics.html" target="_blank">www.yr.no</a>
</div>
</div>
<div id="action-description">
<p>This sample shows the date-time axis in a chart with a weather report for the year 2016.</p>
</div>
<div id="description">
<p>
The date-time axis uses a date-time scale and displays date-time values as the axis labels. To use a date-time axis, set the <code>ValueType</code> in axis to <b>DateTime</b>.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use DateTime axis, we need to inject
<code>DateTime</code> module into <code>services</code>.
</p>
<p>
More information on the DateTime axis can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/date-time-axis/#datetime-axis">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for DateTime axis
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, DateTime, Legend, DataLabel, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
export let data1: any[] = [
{ x: new Date(2016, 2, 7), y: 6.3 },
{ x: new Date(2016, 3, 15), y: 13.3 }, { x: new Date(2016, 4, 10), y: 18.0 },
{ x: new Date(2016, 5, 17), y: 19.8 }, { x: new Date(2016, 6, 13), y: 18.1 },
{ x: new Date(2016, 7, 11), y: 13.1 }, { x: new Date(2016, 8, 16), y: 4.1 }
];
export let data2: any[] = [
{ x: new Date(2016, 2, 7), y: -5.3 },
{ x: new Date(2016, 3, 15), y: 1.0 }, { x: new Date(2016, 4, 10), y: 6.9 },
{ x: new Date(2016, 5, 17), y: 9.4 }, { x: new Date(2016, 6, 13), y: 7.6 },
{ x: new Date(2016, 7, 11), y: 2.6 }, { x: new Date(2016, 8, 16), y: -4.9 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const DateTimeAxis = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', intervalType: 'Days', labelFormat: 'MMM d', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 } }} load={load.bind(this)} primaryYAxis={{ minimum: -20, maximum: 30, interval: 10, edgeLabelPlacement: 'Shift', labelFormat: '{value}°C', lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} tooltip={{enable: false, shared: true}} title='Alaska Weather Statistics - 2016' loaded={onChartLoad.bind(this)}>
<Inject services={[LineSeries, DateTime, Legend, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' name='Warmest' type='Line' marker={{ visible: true, height: 8, width: 8, shape: 'Pentagon', isFilled : true, dataLabel: { visible: true, position: 'Top' } }} width={2}>
</SeriesDirective>
<SeriesDirective dataSource={data2} xName='x' yName='y' name='Coldest' type='Line' marker={{ visible: true, height: 8, width: 8, shape: 'Pentagon', isFilled : true, dataLabel: { visible: true, position: 'Top' } }} width={2}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
<div style={{ float: 'right', marginRight: '10px' }}>Source: &nbsp;
<a href="http://www.yr.no/place/USA/Alaska/Hatcher_Pass/statistics.html" target="_blank">www.yr.no</a>
</div>
</div>
<div id="action-description">
<p>This sample shows the date-time axis in a chart with a weather report for the year 2016.</p>
</div>
<div id="description">
<p>
The date-time axis uses a date-time scale and displays date-time values as the axis labels. To use a date-time axis, set the <code>ValueType</code> in axis to <b>DateTime</b>.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use DateTime axis, we need to inject
<code>DateTime</code> module into <code>services</code>.
</p>
<p>
More information on the DateTime axis can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/date-time-axis/#datetime-axis">documentation section</a>.
</p>
</div>
</div>
)
}
export default DateTimeAxis;

148
src/chart/default-pie-functional.tsx
Просмотреть файл

@ -1,75 +1,75 @@
/**
* Sample for Pie chart
*/
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useEffect } from 'react';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
import { PropertyPane } from '../common/property-pane';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, PieSeries, AccumulationTooltip, IAccLoadedEventArgs, AccumulationTheme, AccumulationDataLabel } from '@syncfusion/ej2-react-charts';
export let data1: any[] = Browser.isDevice ?
[ { 'x': 'Chrome', y: 59.28, text: 'Chrome: 59.28%' },
{ 'x': 'Safari', y: 4.73, text: Browser.isDevice ? 'Safari <br> 4.73%' : 'Safari: 4.73%' },
{ 'x': 'Opera', y: 6.12, text: 'Opera: 6.12%' },
{ 'x': 'Edge', y: 7.48, text: 'Edge: 7.48%' },
{ 'x': 'Others', y: 22.39, text: 'Others: 22.39%' }] :
[
{ 'x': 'Chrome', y: 59.28, text: 'Chrome: 59.28%' },
{ 'x': 'UC Browser', y: 4.37, text: 'UC Browser: 4.37%' },
{ 'x': 'Opera', y: 3.12, text: 'Opera: 3.12%' },
{ 'x': 'Sogou Explorer', y: 1.73, text: 'Sogou Explorer: 1.73%' },
{ 'x': 'QQ', y: 3.96, text: 'QQ: 3.96%' },
{ 'x': 'Safari', y: 4.73, text: 'Safari: 4.73%' },
{ 'x': 'Internet Explorer', y: 6.12, text: 'Internet Explorer: 6.12%' },
{ 'x': 'Edge', y: 7.48, text: 'Edge: 7.48%' },
{ 'x': 'Others', y: 9.57, text: 'Others: 9.57%' }
]
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
.pie-chart {
align :center
}`;
const Pie = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: IAccLoadedEventArgs): void => {
document.getElementById('pie-chart').setAttribute('title', '');
};
const load = (args: IAccLoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/light/i, "Light").replace(/contrast/i, 'Contrast') as AccumulationTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section row'>
<AccumulationChartComponent id='pie-chart' title='Browser Market Share' load={load.bind(this)} legendSettings={{ visible: false }} enableSmartLabels={true} enableAnimation={false} center={{ x: '50%', y: '50%' }} enableBorderOnMouseMove={false} tooltip={{ enable: true, format: '<b>${point.x}</b><br>Browser Share: <b>${point.y}%</b>',header:"" }} loaded={onChartLoad.bind(this)}>
<Inject services={[AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data1} name='Browser' xName='x' yName='y' explode={true} explodeOffset='10%' explodeIndex={0} startAngle = {Browser.isDevice ? 55 : 35 } dataLabel={{ visible: true, position: 'Outside', name: 'text', font: { fontWeight: '600' }, connectorStyle:{ length : '20px' ,type: 'Curve'} }} radius= {Browser.isDevice ? '40%' : '70%'} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
<div id="action-description">
<p>This React Pie Chart example demonstrates a pie chart for mobile browsers usage statistics. Datalabels show information about the points.</p>
</div>
<div id="description">
<p> In this example, you can see how to render and configure a pie chart. The pie chart is a circular graphic, which is ideal for displaying categories as a proportion or a percentage of the whole . The radius of the pie chart can be customized using the <code>Radius</code> property.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Accumulation Chart component features are segregated into individual feature-wise modules. To use pie chart, we need to inject <code>PieSeries</code> module into <code>services</code>.
</p>
<p>
More information on the pie series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/accumulation-chart/pie-dough-nut/#pie-chart">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Pie chart
*/
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useEffect } from 'react';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
import { PropertyPane } from '../common/property-pane';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, PieSeries, AccumulationTooltip, IAccLoadedEventArgs, AccumulationTheme, AccumulationDataLabel } from '@syncfusion/ej2-react-charts';
export let data1: any[] = Browser.isDevice ?
[ { 'x': 'Chrome', y: 59.28, text: 'Chrome: 59.28%' },
{ 'x': 'Safari', y: 4.73, text: Browser.isDevice ? 'Safari <br> 4.73%' : 'Safari: 4.73%' },
{ 'x': 'Opera', y: 6.12, text: 'Opera: 6.12%' },
{ 'x': 'Edge', y: 7.48, text: 'Edge: 7.48%' },
{ 'x': 'Others', y: 22.39, text: 'Others: 22.39%' }] :
[
{ 'x': 'Chrome', y: 59.28, text: 'Chrome: 59.28%' },
{ 'x': 'UC Browser', y: 4.37, text: 'UC Browser: 4.37%' },
{ 'x': 'Opera', y: 3.12, text: 'Opera: 3.12%' },
{ 'x': 'Sogou Explorer', y: 1.73, text: 'Sogou Explorer: 1.73%' },
{ 'x': 'QQ', y: 3.96, text: 'QQ: 3.96%' },
{ 'x': 'Safari', y: 4.73, text: 'Safari: 4.73%' },
{ 'x': 'Internet Explorer', y: 6.12, text: 'Internet Explorer: 6.12%' },
{ 'x': 'Edge', y: 7.48, text: 'Edge: 7.48%' },
{ 'x': 'Others', y: 9.57, text: 'Others: 9.57%' }
]
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
.pie-chart {
align :center
}`;
const Pie = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: IAccLoadedEventArgs): void => {
document.getElementById('pie-chart').setAttribute('title', '');
};
const load = (args: IAccLoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/light/i, "Light").replace(/contrast/i, 'Contrast') as AccumulationTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section row'>
<AccumulationChartComponent id='pie-chart' title='Browser Market Share' load={load.bind(this)} legendSettings={{ visible: false }} enableSmartLabels={true} enableAnimation={false} center={{ x: '50%', y: '50%' }} enableBorderOnMouseMove={false} tooltip={{ enable: true, format: '<b>${point.x}</b><br>Browser Share: <b>${point.y}%</b>',header:"" }} loaded={onChartLoad.bind(this)}>
<Inject services={[AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data1} name='Browser' xName='x' yName='y' explode={true} explodeOffset='10%' explodeIndex={0} startAngle = {Browser.isDevice ? 55 : 35 } dataLabel={{ visible: true, position: 'Outside', name: 'text', font: { fontWeight: '600' }, connectorStyle:{ length : '20px' ,type: 'Curve'} }} radius= {Browser.isDevice ? '40%' : '70%'} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
<div id="action-description">
<p>This React Pie Chart example demonstrates a pie chart for mobile browsers usage statistics. Datalabels show information about the points.</p>
</div>
<div id="description">
<p> In this example, you can see how to render and configure a pie chart. The pie chart is a circular graphic, which is ideal for displaying categories as a proportion or a percentage of the whole . The radius of the pie chart can be customized using the <code>Radius</code> property.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Accumulation Chart component features are segregated into individual feature-wise modules. To use pie chart, we need to inject <code>PieSeries</code> module into <code>services</code>.
</p>
<p>
More information on the pie series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/accumulation-chart/pie-dough-nut/#pie-chart">documentation section</a>.
</p>
</div>
</div>
)
}
export default Pie;

200
src/chart/doughnut-functional.tsx
Просмотреть файл

@ -1,101 +1,101 @@
/**
* Sample for Doughnut chart
*/
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useEffect } from 'react';
import { EmitType } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, IAccLoadedEventArgs, AccumulationDataLabel, Inject, AccumulationTheme, IPointRenderEventArgs } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
export let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'material';
if (selectedTheme === 'fluent' || selectedTheme === 'bootstrap5') {
args.fill = seriesColor[args.point.index % 10];
}
if (selectedTheme.indexOf('dark') > -1) {
if (selectedTheme.indexOf('material') > -1) {
args.border.color = '#303030';
}
else if (selectedTheme.indexOf('bootstrap5') > -1) {
args.border.color = '#212529';
}
else if (selectedTheme.indexOf('bootstrap') > -1) {
args.border.color = '#1A1A1A';
}
else if (selectedTheme.indexOf('fabric') > -1) {
args.border.color = '#201f1f';
}
else if (selectedTheme.indexOf('fluent') > -1) {
args.border.color = '#252423';
}
else if (selectedTheme.indexOf('bootstrap') > -1) {
args.border.color = '#1A1A1A';
}
else if (selectedTheme.indexOf('tailwind') > -1) {
args.border.color = '#1F2937';
}
else {
args.border.color = '#222222';
}
}
else if (selectedTheme.indexOf('highcontrast') > -1) {
args.border.color = '#000000';
}
else {
args.border.color = '#FFFFFF';
}
};
let seriesColor = ['#FFE066', "#FAB666", "#F68F6A", "#F3646A", "#CC555A", "#9C4649"];
export let data1: any[] = [
{ x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
{ x: 'Safari', y: 24.6, text: Browser.isDevice ? 'Safari: <br> 24.6%': 'Safari: 24.6%' },
{ x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
{ x: 'Samsung Internet', y: 2.7, text: Browser.isDevice ? 'Samsung <br> Internet: 2.7%' : 'Samsung Internet: 2.7%' },
{ x: 'Firefox', y: 2.6, text: Browser.isDevice ? 'Firefox: <br> 2.6%' : 'Firefox: 2.6%' },
{ x: 'Others', y: 3.6, text: Browser.isDevice ? 'Others: <br> 3.6%' : 'Others: 3.6%' }
]
const AccumulationDoughnut = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: IAccLoadedEventArgs): void => {
document.getElementById('pie-chart').setAttribute('title', '');
};
const load = (args: IAccLoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/light/i, "Light").replace(/contrast/i, 'Contrast') as AccumulationTheme;
};
return (
<div className='control-pane'>
<div className='control-section'>
<AccumulationChartComponent id="pie-chart" centerLabel={{ text: 'Mobile<br>Browsers<br>Statistics', hoverTextFormat: '${point.x}<br>Browser Share<br>${point.y}%', textStyle: { fontWeight: '600', size: Browser.isDevice ? '7px' : '15px' } }} enableSmartLabels={true} load={load.bind(this)} loaded={onChartLoad.bind(this)} pointRender={pointRender} enableBorderOnMouseMove={false} legendSettings={{ visible: false }}>
<Inject services={[PieSeries, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data1} xName='x' yName='y' innerRadius='65%' border={{width:1}} startAngle= {Browser.isDevice ? 30 : 62 } dataLabel={{ visible: true, position: 'Outside', name: 'text', font: { fontWeight: '600' }, connectorStyle:{length : '20px', type: 'Curve'} }} radius= {Browser.isDevice ? '40%' : '70%'} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
<div id="action-description">
<p>This React donut chart example visualizes mobile browser statistics. The center label shows information about the data in the donut series.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure a donut chart. To create a donut in the pie series, we use the <code>innerRadius</code> property. The <code>centerLabel</code> property allows you to specify the default text that will be rendered in the center. You can also customize the text that will render when the mouse pointer is hovered over one of the donut slices using the <code>hoverTextFormat</code> property.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
The Charts component’s features are segregated into individual feature modules. To use pie chart, we need to inject <code>PieSeries</code> module into <code>services</code>.
</p>
<p>
More information about the donut series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/accumulation-chart/pie-dough-nut/">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Doughnut chart
*/
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useEffect } from 'react';
import { EmitType } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, IAccLoadedEventArgs, AccumulationDataLabel, Inject, AccumulationTheme, IPointRenderEventArgs } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
export let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'material';
if (selectedTheme === 'fluent' || selectedTheme === 'bootstrap5') {
args.fill = seriesColor[args.point.index % 10];
}
if (selectedTheme.indexOf('dark') > -1) {
if (selectedTheme.indexOf('material') > -1) {
args.border.color = '#303030';
}
else if (selectedTheme.indexOf('bootstrap5') > -1) {
args.border.color = '#212529';
}
else if (selectedTheme.indexOf('bootstrap') > -1) {
args.border.color = '#1A1A1A';
}
else if (selectedTheme.indexOf('fabric') > -1) {
args.border.color = '#201f1f';
}
else if (selectedTheme.indexOf('fluent') > -1) {
args.border.color = '#252423';
}
else if (selectedTheme.indexOf('bootstrap') > -1) {
args.border.color = '#1A1A1A';
}
else if (selectedTheme.indexOf('tailwind') > -1) {
args.border.color = '#1F2937';
}
else {
args.border.color = '#222222';
}
}
else if (selectedTheme.indexOf('highcontrast') > -1) {
args.border.color = '#000000';
}
else {
args.border.color = '#FFFFFF';
}
};
let seriesColor = ['#FFE066', "#FAB666", "#F68F6A", "#F3646A", "#CC555A", "#9C4649"];
export let data1: any[] = [
{ x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
{ x: 'Safari', y: 24.6, text: Browser.isDevice ? 'Safari: <br> 24.6%': 'Safari: 24.6%' },
{ x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
{ x: 'Samsung Internet', y: 2.7, text: Browser.isDevice ? 'Samsung <br> Internet: 2.7%' : 'Samsung Internet: 2.7%' },
{ x: 'Firefox', y: 2.6, text: Browser.isDevice ? 'Firefox: <br> 2.6%' : 'Firefox: 2.6%' },
{ x: 'Others', y: 3.6, text: Browser.isDevice ? 'Others: <br> 3.6%' : 'Others: 3.6%' }
]
const AccumulationDoughnut = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: IAccLoadedEventArgs): void => {
document.getElementById('pie-chart').setAttribute('title', '');
};
const load = (args: IAccLoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/light/i, "Light").replace(/contrast/i, 'Contrast') as AccumulationTheme;
};
return (
<div className='control-pane'>
<div className='control-section'>
<AccumulationChartComponent id="pie-chart" centerLabel={{ text: 'Mobile<br>Browsers<br>Statistics', hoverTextFormat: '${point.x}<br>Browser Share<br>${point.y}%', textStyle: { fontWeight: '600', size: Browser.isDevice ? '7px' : '15px' } }} enableSmartLabels={true} load={load.bind(this)} loaded={onChartLoad.bind(this)} pointRender={pointRender} enableBorderOnMouseMove={false} legendSettings={{ visible: false }}>
<Inject services={[PieSeries, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data1} xName='x' yName='y' innerRadius='65%' border={{width:1}} startAngle= {Browser.isDevice ? 30 : 62 } dataLabel={{ visible: true, position: 'Outside', name: 'text', font: { fontWeight: '600' }, connectorStyle:{length : '20px', type: 'Curve'} }} radius= {Browser.isDevice ? '40%' : '70%'} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
<div id="action-description">
<p>This React donut chart example visualizes mobile browser statistics. The center label shows information about the data in the donut series.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure a donut chart. To create a donut in the pie series, we use the <code>innerRadius</code> property. The <code>centerLabel</code> property allows you to specify the default text that will be rendered in the center. You can also customize the text that will render when the mouse pointer is hovered over one of the donut slices using the <code>hoverTextFormat</code> property.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
The Charts component’s features are segregated into individual feature modules. To use pie chart, we need to inject <code>PieSeries</code> module into <code>services</code>.
</p>
<p>
More information about the donut series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/accumulation-chart/pie-dough-nut/">documentation section</a>.
</p>
</div>
</div>
)
}
export default AccumulationDoughnut;

341
src/chart/drilldown-functional.tsx
Просмотреть файл

@ -1,168 +1,175 @@
/**
* Sample for Drill down in Pie chart
*/
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, indexFinder, Index, Inject, AccumulationDataLabel, AccumulationTooltip, PieSeries, IAccLoadedEventArgs, IAccTextRenderEventArgs, IMouseEventArgs, AccumulationAnnotation, AccumulationTheme, AccumulationChart } from '@syncfusion/ej2-react-charts';
const SAMPLE_CSS = `
#category:hover {
cursor: pointer;
}`;
const Drilldown = () => {
useEffect(() => {
updateSampleSection();
}, [])
type Visibility = 'visible' | 'hidden';
const [titleContent, setTitleContent] = useState<string>('Automobile Sales by Category');
const [textContent, setTextContent] = useState<string>('');
const [isVisible, setIsVisible] = useState<boolean>(false);
const [isEnableSmartLabels, setIsEnableSmartLables] = useState<boolean>(false);
const [visibility, setVisibility] = useState<Visibility>('hidden');
let data: Object[] = [
{ x: 'SUV', y: 25 }, { x: 'Car', y: 37 }, { x: 'Pickup', y: 15 },
{ x: 'Minivan', y: 23 }
];
let suvs: Object = [
{ x: 'Toyota', y: 8 }, { x: 'Ford', y: 12 }, { x: 'GM', y: 17 }, { x: 'Renault', y: 6 }, { x: 'Fiat', y: 3 },
{ x: 'Hyundai', y: 16 }, { x: 'Honda', y: 8 }, { x: 'Maruthi', y: 10 }, { x: 'BMW', y: 20 }
];
let cars: Object = [
{ x: 'Toyota', y: 7 }, { x: 'Chrysler', y: 12 }, { x: 'Nissan', y: 9 }, { x: 'Ford', y: 15 }, { x: 'Tata', y: 10 },
{ x: 'Mahindra', y: 7 }, { x: 'Renault', y: 8 }, { x: 'Skoda', y: 5 }, { x: 'Volkswagen', y: 15 }, { x: 'Fiat', y: 3 }
];
let pickups: Object = [
{ x: 'Nissan', y: 9 }, { x: 'Chrysler', y: 4 }, { x: 'Ford', y: 7 }, { x: 'Toyota', y: 20 },
{ x: 'Suzuki', y: 13 }, { x: 'Lada', y: 12 }, { x: 'Bentley', y: 6 }, { x: 'Volvo', y: 10 }, { x: 'Audi', y: 19 }
];
let minivans: Object = [
{ x: 'Hummer', y: 11 }, { x: 'Ford', y: 5 }, { x: 'GM', y: 12 }, { x: 'Chrysler', y: 3 }, { x: 'Jaguar', y: 9 },
{ x: 'Fiat', y: 8 }, { x: 'Honda', y: 15 }, { x: 'Hyundai', y: 4 }, { x: 'Scion', y: 11 }, { x: 'Toyota', y: 17 }
];
let dataLabel: Object = {
visible: true, position: 'Inside', enableRotation : false, connectorStyle: { type: 'Curve', length: '5%' }, font: { fontWeight: '600', color: 'white' }
};
let title: string = 'Automobile Sales by Category';
let pie = useRef<AccumulationChartComponent>(null);
let isparent: boolean = true;
const onTextRender = (args: IAccTextRenderEventArgs): void => {
args.text = args.point.x + ' ' + args.point.y + '%';
}
const onChartMouseClick = (args: IMouseEventArgs): void => {
let index: Index = indexFinder(args.target);
if (isparent && document.getElementById('pie-chart_Series_' + index.series + '_Point_' + index.point)) {
isparent = false;
switch (index.point) {
case 0:
pie.current.series[0].dataSource = suvs;
setTitleContent('Automobile Sales in the SUV Segment');
setTextContent('SUV');
break;
case 1:
pie.current.series[0].dataSource = cars;
setTitleContent('Automobile Sales in the Car Segment');
setTextContent('Car');
break;
case 2:
pie.current.series[0].dataSource = pickups;
setTitleContent('Automobile Sales in the Pickup Segment');
setTextContent('Pickup');
break;
case 3:
pie.current.series[0].dataSource = minivans;
setTitleContent('Automobile Sales in the Minivan Segment');
setTextContent('Minivan');
break;
}
pie.current.annotations = [{
content: '<div id="back" style="cursor:pointer; padding: 3px; width: 30px; height: 30px;">' + '<img src="./src/chart/images/back.png" id="imgback" />', region: 'Series', x: '50%', y: '50%'
}];
pie.current.series[0].innerRadius = '30%';
pie.current.series[0].radius = Browser.isDevice ? '90%' : '80%';
pie.current.series[0].explode = false;
pie.current.series[0].animation.enable = false;
pie.current.series[0].dataLabel.connectorStyle.length = '20px'
pie.current.series[0].dataLabel.position = Browser.isDevice ? 'Inside' : 'Outside';
pie.current.series[0].dataLabel.enableRotation = true;
pie.current.series[0].dataLabel.font.color = '';
setIsVisible(false);
pie.current.visibleSeries[0].explodeIndex = null;
setIsEnableSmartLables(true);
pie.current.refresh();
setVisibility('visible');
}
if (args.target.indexOf('back') > -1) {
hide(document.getElementById(args.target));
}
}
const onClick = (e: MouseEvent): void => {
hide(e.target as Element);
}
const hide = (target: Element): void => {
pie.current.series[0].dataSource = data;
pie.current.series[0].innerRadius = '0%';
pie.current.series[0].animation.enable = false;
isparent = true;
pie.current.series[0].explode = false;
pie.current.annotations = [];
pie.current.annotationModule['annotations'] = [];
pie.current.series[0].dataLabel = dataLabel;
setTitleContent(title);
setIsVisible(false);
setIsEnableSmartLables(true);
pie.current.refresh();
(target as HTMLButtonElement).style.visibility = 'hidden';
setVisibility('hidden');
}
const onChartLoad = (args: IAccLoadedEventArgs): void => {
document.getElementById('pie-chart').setAttribute('title', '');
};
const load = (args: IAccLoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as AccumulationTheme;
if (selectedTheme === 'highcontrast' || selectedTheme.indexOf('dark') > -1) {
args.accumulation.series[0].dataLabel.font.color = "white";
if (args.accumulation.annotations[0] && !isparent) {
args.accumulation.annotations[0].content = '<div id= "white" style="cursor:pointer;padding:3px;width:30px; height:30px;"><img src="./src/chart/images/white.png" id="back" /><div>';
}
}
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<div id="link">
<a id="category" onClick={onClick.bind(this)} style={{ visibility: visibility, display: 'inline-block' }}>Sales by Category</a>
<p style={{ visibility: visibility, display: 'inline-block' }} id="symbol">&nbsp;&gt;&gt;&nbsp;</p>
<p id="text" style={{ visibility: visibility, display: 'inline-block' }}>{textContent}</p>
</div>
<AccumulationChartComponent id='pie-chart' ref={pie} title={titleContent} enableSmartLabels={isEnableSmartLabels} legendSettings={{ visible: isVisible }} enableBorderOnMouseMove={false} tooltip={{ enable: false, format: '${point.x} <br> ${point.y} %' }} chartMouseClick={onChartMouseClick.bind(this)} textRender={onTextRender.bind(this)} load={load.bind(this)} loaded={onChartLoad.bind(this)}>
<Inject services={[AccumulationDataLabel, AccumulationTooltip, PieSeries, AccumulationAnnotation]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data} xName='x' yName='y' dataLabel={dataLabel} radius='70%' explode={false} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
<div id="action-description">
<p>This sample demonstrates a drill down chart with a pie for automobiles sales by category. By clicking one category, you can navigate to other sub-categories where companies are differentiated.</p>
</div>
<div id="description">
<p>
In this example, you can see how to achieve the drilldown concept using a pie chart. Automobile sales are shown in different categories. By clicking each category, you can navigate to the next level, which shows the sales by categories made by each company. <code>Datalabels</code> are used in this sample to show information about the data points.
</p>
<p style={{ fontWeight: 500 }}><b>Injecting Module</b></p>
<p>
Accumulation chart component features are segregated into individual feature-wise modules. To use datalabel, we need to inject DataLabel module <code>AccumulationDataLabel</code> into services
</p>
<p>
More information on the pie series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/accumulation-chart/pie-dough-nut/#pie-chart">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Drill down in Pie chart
*/
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, indexFinder, Index, Inject, AccumulationDataLabel, AccumulationTooltip, PieSeries, IAccLoadedEventArgs, IAccTextRenderEventArgs, IMouseEventArgs, AccumulationAnnotation, AccumulationTheme, AccumulationChart } from '@syncfusion/ej2-react-charts';
const SAMPLE_CSS = `
#category:hover {
cursor: pointer;
}`;
let isparent: boolean = true;
const Drilldown = () => {
useEffect(() => {
updateSampleSection();
}, [])
type Visibility = 'visible' | 'hidden';
const [titleContent, setTitleContent] = useState<string>('Automobile Sales by Category');
const [textContent, setTextContent] = useState<string>('');
const [isVisible, setIsVisible] = useState<boolean>(false);
const [isEnableSmartLabels, setIsEnableSmartLables] = useState<boolean>(false);
const [visibility, setVisibility] = useState<Visibility>('hidden');
let data: Object[] = [
{ x: 'SUV', y: 25 }, { x: 'Car', y: 37 }, { x: 'Pickup', y: 15 },
{ x: 'Minivan', y: 23 }
];
let suvs: Object = [
{ x: 'Toyota', y: 8 }, { x: 'Ford', y: 12 }, { x: 'GM', y: 17 }, { x: 'Renault', y: 6 }, { x: 'Fiat', y: 3 },
{ x: 'Hyundai', y: 16 }, { x: 'Honda', y: 8 }, { x: 'Maruthi', y: 10 }, { x: 'BMW', y: 20 }
];
let cars: Object = [
{ x: 'Toyota', y: 7 }, { x: 'Chrysler', y: 12 }, { x: 'Nissan', y: 9 }, { x: 'Ford', y: 15 }, { x: 'Tata', y: 10 },
{ x: 'Mahindra', y: 7 }, { x: 'Renault', y: 8 }, { x: 'Skoda', y: 5 }, { x: 'Volkswagen', y: 15 }, { x: 'Fiat', y: 3 }
];
let pickups: Object = [
{ x: 'Nissan', y: 9 }, { x: 'Chrysler', y: 4 }, { x: 'Ford', y: 7 }, { x: 'Toyota', y: 20 },
{ x: 'Suzuki', y: 13 }, { x: 'Lada', y: 12 }, { x: 'Bentley', y: 6 }, { x: 'Volvo', y: 10 }, { x: 'Audi', y: 19 }
];
let minivans: Object = [
{ x: 'Hummer', y: 11 }, { x: 'Ford', y: 5 }, { x: 'GM', y: 12 }, { x: 'Chrysler', y: 3 }, { x: 'Jaguar', y: 9 },
{ x: 'Fiat', y: 8 }, { x: 'Honda', y: 15 }, { x: 'Hyundai', y: 4 }, { x: 'Scion', y: 11 }, { x: 'Toyota', y: 17 }
];
let dataLabel: Object = {
visible: true, position: 'Inside', enableRotation : false, connectorStyle: { type: 'Curve', length: '5%' }, font: { fontWeight: '600', color: 'white' }
};
let title: string = 'Automobile Sales by Category';
let pie = useRef<AccumulationChartComponent>(null);
const onTextRender = (args: IAccTextRenderEventArgs): void => {
args.text = args.point.x + ' ' + args.point.y + '%';
}
const onChartMouseClick = (args: IMouseEventArgs): void => {
let index: Index = indexFinder(args.target);
if (isparent && document.getElementById('pie-chart_Series_' + index.series + '_Point_' + index.point)) {
isparent = false;
switch (index.point) {
case 0:
pie.current.series[0].dataSource = suvs;
setTitleContent('Automobile Sales in the SUV Segment');
setTextContent('SUV');
break;
case 1:
pie.current.series[0].dataSource = cars;
setTitleContent('Automobile Sales in the Car Segment');
setTextContent('Car');
break;
case 2:
pie.current.series[0].dataSource = pickups;
setTitleContent('Automobile Sales in the Pickup Segment');
setTextContent('Pickup');
break;
case 3:
pie.current.series[0].dataSource = minivans;
setTitleContent('Automobile Sales in the Minivan Segment');
setTextContent('Minivan');
break;
}
if (pie.current.theme === 'HighContrast' || pie.current.theme.indexOf('Dark') > -1) {
pie.current.annotations = [{
content: '<div id= "white" style="cursor:pointer;padding:3px;width:30px; height:30px;"><img src="./src/chart/images/white.png" id="back" /><div>', region: 'Series', x: '50%', y: '50%'
}];
}
else {
pie.current.annotations = [{
content: '<div id="back" style="cursor:pointer; padding: 3px; width: 30px; height: 30px;">' + '<img src="./src/chart/images/back.png" id="imgback" />', region: 'Series', x: '50%', y: '50%'
}];
}
pie.current.series[0].innerRadius = '30%';
pie.current.series[0].radius = Browser.isDevice ? '90%' : '80%';
pie.current.series[0].explode = false;
pie.current.series[0].animation.enable = false;
pie.current.series[0].dataLabel.connectorStyle.length = '20px'
pie.current.series[0].dataLabel.position = Browser.isDevice ? 'Inside' : 'Outside';
pie.current.series[0].dataLabel.enableRotation = true;
pie.current.series[0].dataLabel.font.color = '';
setIsVisible(false);
pie.current.visibleSeries[0].explodeIndex = null;
setIsEnableSmartLables(true);
pie.current.refresh();
setVisibility('visible');
}
if (args.target.indexOf('back') > -1) {
hide(document.getElementById(args.target));
}
}
const onClick = (e: MouseEvent): void => {
hide(e.target as Element);
}
const hide = (target: Element): void => {
pie.current.series[0].dataSource = data;
pie.current.series[0].innerRadius = '0%';
pie.current.series[0].animation.enable = false;
isparent = true;
pie.current.series[0].explode = false;
pie.current.annotations = [];
pie.current.annotationModule['annotations'] = [];
pie.current.series[0].dataLabel = dataLabel;
setTitleContent(title);
setIsVisible(false);
setIsEnableSmartLables(true);
pie.current.refresh();
(target as HTMLButtonElement).style.visibility = 'hidden';
setVisibility('hidden');
}
const onChartLoad = (args: IAccLoadedEventArgs): void => {
document.getElementById('pie-chart').setAttribute('title', '');
};
const load = (args: IAccLoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as AccumulationTheme;
if (selectedTheme === 'highcontrast' || selectedTheme.indexOf('dark') > -1) {
args.accumulation.series[0].dataLabel.font.color = "white";
if (args.accumulation.annotations[0] && !isparent) {
args.accumulation.annotations[0].content = '<div id= "white" style="cursor:pointer;padding:3px;width:30px; height:30px;"><img src="./src/chart/images/white.png" id="back" /><div>';
}
}
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<div id="link">
<a id="category" onClick={onClick.bind(this)} style={{ visibility: visibility, display: 'inline-block' }}>Sales by Category</a>
<p style={{ visibility: visibility, display: 'inline-block' }} id="symbol">&nbsp;&gt;&gt;&nbsp;</p>
<p id="text" style={{ visibility: visibility, display: 'inline-block' }}>{textContent}</p>
</div>
<AccumulationChartComponent id='pie-chart' ref={pie} title={titleContent} enableSmartLabels={isEnableSmartLabels} legendSettings={{ visible: isVisible }} enableBorderOnMouseMove={false} tooltip={{ enable: false, format: '${point.x} <br> ${point.y} %' }} chartMouseClick={onChartMouseClick.bind(this)} textRender={onTextRender.bind(this)} load={load.bind(this)} loaded={onChartLoad.bind(this)}>
<Inject services={[AccumulationDataLabel, AccumulationTooltip, PieSeries, AccumulationAnnotation]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data} xName='x' yName='y' dataLabel={dataLabel} radius='70%' explode={false} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
<div id="action-description">
<p>This sample demonstrates a drill down chart with a pie for automobiles sales by category. By clicking one category, you can navigate to other sub-categories where companies are differentiated.</p>
</div>
<div id="description">
<p>
In this example, you can see how to achieve the drilldown concept using a pie chart. Automobile sales are shown in different categories. By clicking each category, you can navigate to the next level, which shows the sales by categories made by each company. <code>Datalabels</code> are used in this sample to show information about the data points.
</p>
<p style={{ fontWeight: 500 }}><b>Injecting Module</b></p>
<p>
Accumulation chart component features are segregated into individual feature-wise modules. To use datalabel, we need to inject DataLabel module <code>AccumulationDataLabel</code> into services
</p>
<p>
More information on the pie series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/accumulation-chart/pie-dough-nut/#pie-chart">documentation section</a>.
</p>
</div>
</div>
)
}
export default Drilldown;

2
src/chart/drilldown.tsx
Просмотреть файл

@ -171,7 +171,7 @@ export class Drilldown extends SampleBase<{}, {}> {
replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as AccumulationTheme;
if (selectedTheme === 'highcontrast' || selectedTheme.indexOf('dark') > -1){
args.accumulation.series[0].dataLabel.font.color="white";
if (args.accumulation.annotations[0] && !this.isparent) {
if (args.accumulation.annotations[0]) {
args.accumulation.annotations[0].content = '<div id= "white" style="cursor:pointer;padding:3px;width:30px; height:30px;"><img src="./src/chart/images/white.png" id="back" /><div>';
}
}

124
src/chart/ema-functional.tsx
Просмотреть файл

@ -1,63 +1,63 @@
/**
* Sample for EMA Indicator
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, ChartTheme, Crosshair, LineSeries, EmaIndicator, IndicatorsDirective, IndicatorDirective } from '@syncfusion/ej2-react-charts';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const EMA = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
chart.setAttribute('align', 'center');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style> {SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', majorGridLines: { width: 0 }, zoomFactor: 0.2, zoomPosition: 0.6, crosshairTooltip: { enable: true } }} primaryYAxis={{ title: 'Price (in Million) ', labelFormat: '${value}M', minimum: 50, maximum: 170, interval: 30, majorGridLines: { width: 1 }, lineStyle: { width: 0 } }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true }} crosshair={{ enable: true, lineType: 'Vertical' }} width={Browser.isDevice ? '100%' : '75%'} legendSettings={{ visible: false }} zoomSettings={{ enableSelectionZooming: true, mode: 'X', enablePan: true }} title='AAPL Stock Price 2012-2017' loaded={onChartLoad.bind(this)}>
<Inject services={[CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, EmaIndicator]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartValues} width={2} xName='period' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={{ enable: false }} />
</SeriesCollectionDirective>
<IndicatorsDirective>
<IndicatorDirective type='Ema' field='Close' seriesName='Apple Inc' fill='#606eff' period={14} animation={{ enable: true }} />
</IndicatorsDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates a chart with candle series and an exponential moving average indicator. The trackball shows information about each day’s stock rates and signal values.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure an exponential moving average indicator. This indicator tracks the price of an investment over time and is used to define the direction of the trend.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use EMA Indicator, we need to inject
<code>EmaIndicator</code> module into <code>services</code>.
</p>
<p>
More information on the EMA Indicator can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/technical-indicators/#exponential-moving-average-ema">documentation section</a>.
</p>
</div>
</div >
)
}
/**
* Sample for EMA Indicator
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, ChartTheme, Crosshair, LineSeries, EmaIndicator, IndicatorsDirective, IndicatorDirective } from '@syncfusion/ej2-react-charts';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const EMA = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
chart.setAttribute('align', 'center');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style> {SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', majorGridLines: { width: 0 }, zoomFactor: 0.2, zoomPosition: 0.6, crosshairTooltip: { enable: true } }} primaryYAxis={{ title: 'Price (in Million) ', labelFormat: '${value}M', minimum: 50, maximum: 170, interval: 30, majorGridLines: { width: 1 }, lineStyle: { width: 0 } }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true }} crosshair={{ enable: true, lineType: 'Vertical' }} width={Browser.isDevice ? '100%' : '75%'} legendSettings={{ visible: false }} zoomSettings={{ enableSelectionZooming: true, mode: 'X', enablePan: true }} title='AAPL Stock Price 2012-2017' loaded={onChartLoad.bind(this)}>
<Inject services={[CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, EmaIndicator]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartValues} width={2} xName='period' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={{ enable: false }} />
</SeriesCollectionDirective>
<IndicatorsDirective>
<IndicatorDirective type='Ema' field='Close' seriesName='Apple Inc' fill='#606eff' period={14} animation={{ enable: true }} />
</IndicatorsDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates a chart with candle series and an exponential moving average indicator. The trackball shows information about each day’s stock rates and signal values.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure an exponential moving average indicator. This indicator tracks the price of an investment over time and is used to define the direction of the trend.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use EMA Indicator, we need to inject
<code>EmaIndicator</code> module into <code>services</code>.
</p>
<p>
More information on the EMA Indicator can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/technical-indicators/#exponential-moving-average-ema">documentation section</a>.
</p>
</div>
</div >
)
}
export default EMA;

242
src/chart/empty-point-functional.tsx
Просмотреть файл

@ -1,122 +1,122 @@
/**
* Sample for Empty Point
*/
import * as React from "react";
import { useEffect, useRef, useState } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, ChartTheme, SplineSeries, AreaSeries, ChartSeriesType, EmptyPointMode, Category, Legend, Tooltip, ILoadedEventArgs, Inject, SplineAreaSeries } from '@syncfusion/ej2-react-charts';
import { PropertyPane } from '../common/property-pane';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
export let data1: any[] = [
{ x: 'Rice', y: 80 }, { x: 'Wheat', y: null }, { x: 'Oil', y: 70 },
{ x: 'Corn', y: 60 }, { x: 'Gram', y: null },
{ x: 'Milk', y: 70 }, { x: 'Peas', y: 80 },
{ x: 'Fruit', y: 60 }, { x: 'Butter', y: null }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const EmptyPoint = () => {
useEffect(() => {
updateSampleSection();
}, [])
const [isVisible, setIsVisible] = useState<boolean>(false);
const [emptyPointMode, setEmptyPointMode] = useState<EmptyPointMode>('Gap');
const [chartType, setchartType] = useState<ChartSeriesType>('Column');
let chartInstance = useRef<ChartComponent>(null);
let dropElement = useRef<DropDownListComponent>(null);
let modeElement = useRef<DropDownListComponent>(null);
let droplist: { [key: string]: Object }[] = [
{ value: 'Column' },
{ value: 'SplineArea' },
{ value: 'Spline' },
];
let modelist: { [key: string]: Object }[] = [
{ value: 'Gap' },
{ value: 'Drop' },
{ value: 'Average' },
{ value: 'Zero' }
];
const change = (): void => {
setchartType(dropElement.current.value as ChartSeriesType);
if (chartInstance.current.series[0].type == 'Spline') {
setIsVisible(true);
}
else {
setIsVisible(false);
}
chartInstance.current.refresh();
};
const mode = (): void => {
setEmptyPointMode(modeElement.current.value as EmptyPointMode);
chartInstance.current.refresh();
};
const onChartLoad = (args: ILoadedEventArgs): void => {
document.getElementById('charts').setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/light/i, "Light").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section row'>
<div className='col-md-8'>
<ChartComponent id='charts' ref={chartInstance} primaryXAxis={{ valueType: 'Category', interval: 1, labelIntersectAction: Browser.isDevice ? 'None' : 'Rotate45', labelRotation: Browser.isDevice ? -45: 0, majorTickLines: {width : 0}, title:'Product', minorTickLines: {width: 0} }} chartArea={{ border: { width: 0 } }} primaryYAxis={{ title: 'Profit' , minimum: 0, maximum: 100, interval: 20, labelFormat: '{value}%' }} load={load.bind(this)} legendSettings={{ visible: false }} title="Annual Product-Wise Profit Analysis" loaded={onChartLoad.bind(this)} tooltip={{ enable: true, header: '' }}>
<Inject services={[ColumnSeries, Category, Legend, Tooltip, SplineSeries, SplineAreaSeries]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' width={2} name='Profit' type={chartType} marker={{ visible: isVisible, height: 10, width: 10 }} emptyPointSettings={{ fill: '#e6e6e6', mode: emptyPointMode }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div className='col-md-4 property-section'>
<PropertyPane title='Properties'>
<table id='property' title='Properties' className='property-panel-table' style={{ width: '100%' }}>
<tr style={{ height: '50px' }}>
<td style={{ width: '60%' }}>
<div>Series Type: </div>
</td>
<td style={{ width: '40%' }}>
<div>
<DropDownListComponent width="120px" id="selmode" change={change.bind(this)} ref={dropElement} dataSource={droplist} fields={{ text: 'value', value: 'value' }} value={chartType} />
</div>
</td>
</tr>
<tr style={{ height: '50px' }}>
<td style={{ width: '60%' }}>
<div>Empty Point Mode: </div></td>
<td style={{ width: '40%' }}>
<div>
<DropDownListComponent width="120px" id="selmode" change={mode.bind(this)} ref={modeElement} dataSource={modelist} fields={{ text: 'value', value: 'value' }} value={emptyPointMode} />
</div>
</td>
</tr>
</table>
</PropertyPane>
</div>
</div>
<div id="action-description">
<p>This sample illustrates the annual profit by product analysis of an organization with empty point functionality.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure empty points for a chart. Users can customize the empty points using <code>ChartEmptyPointSettings</code> in series. Default empty point Mode is <b>Gap</b>.
</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<p>
More information on the empty points can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/working-with-data/#empty-points">documentation section</a>.
</p>
</div>
</div >
)
}
/**
* Sample for Empty Point
*/
import * as React from "react";
import { useEffect, useRef, useState } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, ChartTheme, SplineSeries, AreaSeries, ChartSeriesType, EmptyPointMode, Category, Legend, Tooltip, ILoadedEventArgs, Inject, SplineAreaSeries } from '@syncfusion/ej2-react-charts';
import { PropertyPane } from '../common/property-pane';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
export let data1: any[] = [
{ x: 'Rice', y: 80 }, { x: 'Wheat', y: null }, { x: 'Oil', y: 70 },
{ x: 'Corn', y: 60 }, { x: 'Gram', y: null },
{ x: 'Milk', y: 70 }, { x: 'Peas', y: 80 },
{ x: 'Fruit', y: 60 }, { x: 'Butter', y: null }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const EmptyPoint = () => {
useEffect(() => {
updateSampleSection();
}, [])
const [isVisible, setIsVisible] = useState<boolean>(false);
const [emptyPointMode, setEmptyPointMode] = useState<EmptyPointMode>('Gap');
const [chartType, setchartType] = useState<ChartSeriesType>('Column');
let chartInstance = useRef<ChartComponent>(null);
let dropElement = useRef<DropDownListComponent>(null);
let modeElement = useRef<DropDownListComponent>(null);
let droplist: { [key: string]: Object }[] = [
{ value: 'Column' },
{ value: 'SplineArea' },
{ value: 'Spline' },
];
let modelist: { [key: string]: Object }[] = [
{ value: 'Gap' },
{ value: 'Drop' },
{ value: 'Average' },
{ value: 'Zero' }
];
const change = (): void => {
setchartType(dropElement.current.value as ChartSeriesType);
if (chartInstance.current.series[0].type == 'Spline') {
setIsVisible(true);
}
else {
setIsVisible(false);
}
chartInstance.current.refresh();
};
const mode = (): void => {
setEmptyPointMode(modeElement.current.value as EmptyPointMode);
chartInstance.current.refresh();
};
const onChartLoad = (args: ILoadedEventArgs): void => {
document.getElementById('charts').setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/light/i, "Light").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section row'>
<div className='col-md-8'>
<ChartComponent id='charts' ref={chartInstance} primaryXAxis={{ valueType: 'Category', interval: 1, labelIntersectAction: Browser.isDevice ? 'None' : 'Rotate45', labelRotation: Browser.isDevice ? -45: 0, majorTickLines: {width : 0}, title:'Product', minorTickLines: {width: 0} }} chartArea={{ border: { width: 0 } }} primaryYAxis={{ title: 'Profit' , minimum: 0, maximum: 100, interval: 20, labelFormat: '{value}%' }} load={load.bind(this)} legendSettings={{ visible: false }} title="Annual Product-Wise Profit Analysis" loaded={onChartLoad.bind(this)} tooltip={{ enable: true, header: '' }}>
<Inject services={[ColumnSeries, Category, Legend, Tooltip, SplineSeries, SplineAreaSeries]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' width={2} name='Profit' type={chartType} marker={{ visible: isVisible, height: 10, width: 10 }} emptyPointSettings={{ fill: '#e6e6e6', mode: emptyPointMode }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div className='col-md-4 property-section'>
<PropertyPane title='Properties'>
<table id='property' title='Properties' className='property-panel-table' style={{ width: '100%' }}>
<tr style={{ height: '50px' }}>
<td style={{ width: '60%' }}>
<div>Series Type: </div>
</td>
<td style={{ width: '40%' }}>
<div>
<DropDownListComponent width="120px" id="selmode" change={change.bind(this)} ref={dropElement} dataSource={droplist} fields={{ text: 'value', value: 'value' }} value={chartType} />
</div>
</td>
</tr>
<tr style={{ height: '50px' }}>
<td style={{ width: '60%' }}>
<div>Empty Point Mode: </div></td>
<td style={{ width: '40%' }}>
<div>
<DropDownListComponent width="120px" id="selmode" change={mode.bind(this)} ref={modeElement} dataSource={modelist} fields={{ text: 'value', value: 'value' }} value={emptyPointMode} />
</div>
</td>
</tr>
</table>
</PropertyPane>
</div>
</div>
<div id="action-description">
<p>This sample illustrates the annual profit by product analysis of an organization with empty point functionality.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure empty points for a chart. Users can customize the empty points using <code>ChartEmptyPointSettings</code> in series. Default empty point Mode is <b>Gap</b>.
</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<p>
More information on the empty points can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/working-with-data/#empty-points">documentation section</a>.
</p>
</div>
</div >
)
}
export default EmptyPoint;

180
src/chart/error-bar-functional.tsx
Просмотреть файл

@ -1,91 +1,91 @@
/**
* Sample for error bar
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ErrorBar, ScatterSeries, Tooltip, Category, ILoadedEventArgs, ErrorBarMode, ErrorBarType, ErrorBarDirection, ChartTheme, ColumnSeries, Inject, IPointRenderEventArgs } from '@syncfusion/ej2-react-charts';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { createBrowserHistory } from "history";
export let data1: any[] = [
{ x: 'Printer', y: 750, error: 50}, { x: 'Desktop', y: 500, error: 70 }, { x: 'Charger', y: 550, error: 60 },
{ x: 'Mobile', y: 575, error: 80 }, { x: 'Keyboard', y: 400, error: 20 },
{ x: 'Power Bank', y: 450, error: 90 }, { x: 'Laptop', y: 650, error: 40 }, { x: 'Battery', y: 525, error: 84 },
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const ErrorBarChart = () => {
useEffect(() => {
updateSampleSection();
}, [])
const pointRender = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'material';
if (selectedTheme === 'bootstrap5' || selectedTheme === 'fluent') {
args.fill = '#81ccbb';
}
};
const onChartLoad = (args: ILoadedEventArgs): void => {
document.getElementById('charts').setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/light/i, "Light").replace(/contrast/i,'Contrast') as ChartTheme;
if (selectedTheme === 'bootstrap5' || selectedTheme === 'fluent') {
args.chart.highlightColor = '#c7e9b6';
}
};
const tooltipRender = (args): void => {
args.text = '<b>'+args.data.pointX + ' Count' + ': ' + args.data.pointY + '</b> (error range: ' + (args.data.pointY - args.series.visiblePoints[args.data.pointIndex].verticalError / 2 ) + '-' + (args.data.pointY + args.series.visiblePoints[args.data.pointIndex].verticalError / 2 ) + ')';
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section ' style={{ textAlign: "center" }}>
<ChartComponent id='charts' primaryXAxis={{ valueType: 'Category', interval: 1, majorTickLines: {width : 0}, minorTickLines: {width: 0}, majorGridLines: { width: 0 }, labelRotation: Browser.isDevice ? -45 : 0, labelIntersectAction: Browser.isDevice ? 'None' : 'Trim' }} chartArea={{ border: { width: 0 } }} primaryYAxis={{ minimum: 0, maximum: 1250, interval: 250, lineStyle: { width: 0 }, title: 'Quantity' }} load={load.bind(this)} tooltipRender={tooltipRender.bind(this)} highlightColor= '' width={Browser.isDevice ? '100%' : '75%'} pointRender={pointRender.bind(this)} title="Quantity vs Items" loaded={onChartLoad.bind(this)} tooltip={{ enable: true, enableMarker: false }}>
<Inject services={[ScatterSeries, Category, ColumnSeries, ErrorBar, Tooltip]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' type='Column' marker={{ height: 10, width: 10 }} errorBar={{ visible: true, verticalError: 'error'}} width={2} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample shows the errors in the quantity of different items with an error bar chart.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure the error bar chart. An error bar chart is used to indicate the error or uncertainty in the reported measurement.</p>
<p>Chart supports the following error bar types.</p>
<ul>
<li><code>Fixed</code> - Renders a fixed type error bar.</li>
<li><code>Percentage</code> - Renders a percentage type error bar.</li>
<li><code>StandardDeviation</code> - Renders a standard deviation type error bar.</li>
<li><code>StandardError</code> - Renders a standard error type error bar.</li>
<li><code>Custom</code> - Renders a custom type error bar.</li>
</ul>
<br></br>
<p>
The <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/api/chart/tooltip/">tooltip</a> is enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.
</p>
<p><b>Injecting Module</b></p>
<p>
The Charts component’s features are segregated into individual feature modules. To use error bar, we need to inject <code>ErrorBar</code> into the <code>@services</code> section.
</p>
<p>
More information on the error bar can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/other-types/#error-bar-chart">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for error bar
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ErrorBar, ScatterSeries, Tooltip, Category, ILoadedEventArgs, ErrorBarMode, ErrorBarType, ErrorBarDirection, ChartTheme, ColumnSeries, Inject, IPointRenderEventArgs } from '@syncfusion/ej2-react-charts';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { createBrowserHistory } from "history";
export let data1: any[] = [
{ x: 'Printer', y: 750, error: 50}, { x: 'Desktop', y: 500, error: 70 }, { x: 'Charger', y: 550, error: 60 },
{ x: 'Mobile', y: 575, error: 80 }, { x: 'Keyboard', y: 400, error: 20 },
{ x: 'Power Bank', y: 450, error: 90 }, { x: 'Laptop', y: 650, error: 40 }, { x: 'Battery', y: 525, error: 84 },
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const ErrorBarChart = () => {
useEffect(() => {
updateSampleSection();
}, [])
const pointRender = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'material';
if (selectedTheme === 'bootstrap5' || selectedTheme === 'fluent') {
args.fill = '#81ccbb';
}
};
const onChartLoad = (args: ILoadedEventArgs): void => {
document.getElementById('charts').setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/light/i, "Light").replace(/contrast/i,'Contrast') as ChartTheme;
if (selectedTheme === 'bootstrap5' || selectedTheme === 'fluent') {
args.chart.highlightColor = '#c7e9b6';
}
};
const tooltipRender = (args): void => {
args.text = '<b>'+args.data.pointX + ' Count' + ': ' + args.data.pointY + '</b> (error range: ' + (args.data.pointY - args.series.visiblePoints[args.data.pointIndex].verticalError / 2 ) + '-' + (args.data.pointY + args.series.visiblePoints[args.data.pointIndex].verticalError / 2 ) + ')';
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section ' style={{ textAlign: "center" }}>
<ChartComponent id='charts' primaryXAxis={{ valueType: 'Category', interval: 1, majorTickLines: {width : 0}, minorTickLines: {width: 0}, majorGridLines: { width: 0 }, labelRotation: Browser.isDevice ? -45 : 0, labelIntersectAction: Browser.isDevice ? 'None' : 'Trim' }} chartArea={{ border: { width: 0 } }} primaryYAxis={{ minimum: 0, maximum: 1250, interval: 250, lineStyle: { width: 0 }, title: 'Quantity' }} load={load.bind(this)} tooltipRender={tooltipRender.bind(this)} highlightColor= '' width={Browser.isDevice ? '100%' : '75%'} pointRender={pointRender.bind(this)} title="Quantity vs Items" loaded={onChartLoad.bind(this)} tooltip={{ enable: true, enableMarker: false }}>
<Inject services={[ScatterSeries, Category, ColumnSeries, ErrorBar, Tooltip]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' type='Column' marker={{ height: 10, width: 10 }} errorBar={{ visible: true, verticalError: 'error'}} width={2} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample shows the errors in the quantity of different items with an error bar chart.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure the error bar chart. An error bar chart is used to indicate the error or uncertainty in the reported measurement.</p>
<p>Chart supports the following error bar types.</p>
<ul>
<li><code>Fixed</code> - Renders a fixed type error bar.</li>
<li><code>Percentage</code> - Renders a percentage type error bar.</li>
<li><code>StandardDeviation</code> - Renders a standard deviation type error bar.</li>
<li><code>StandardError</code> - Renders a standard error type error bar.</li>
<li><code>Custom</code> - Renders a custom type error bar.</li>
</ul>
<br></br>
<p>
The <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/api/chart/tooltip/">tooltip</a> is enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.
</p>
<p><b>Injecting Module</b></p>
<p>
The Charts component’s features are segregated into individual feature modules. To use error bar, we need to inject <code>ErrorBar</code> into the <code>@services</code> section.
</p>
<p>
More information on the error bar can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/other-types/#error-bar-chart">documentation section</a>.
</p>
</div>
</div>
)
}
export default ErrorBarChart;

336
src/chart/export-functional.tsx
Просмотреть файл

@ -1,164 +1,174 @@
/**
* Sample for chart export
*/
import * as React from "react";
import { useEffect, useRef } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ChartTheme, ILoadedEventArgs, Category, ColumnSeries, Inject, IPointRenderEventArgs, Legend, ExportType, Export, DataLabel } from '@syncfusion/ej2-react-charts';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { } from '@syncfusion/ej2-react-inputs';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { pointFabricColors, pointMaterialDarkColors, pointMaterialColors, pointBootstrap5DarkColors, pointBootstrapColors, pointHighContrastColors, pointFluentDarkColors, pointFluentColors, pointTailwindDarkColors, pointTailwindColors, bubbleBootstrap5Colors, pointBootstrap5Colors, pointMaterial3DarkColors, pointMaterial3Colors } from './theme-color';
import { PropertyPane } from '../common/property-pane';
import { EmitType, Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1: any[] = [
{ x: 'India', y: 35.5, DataLabelMappingName: Browser.isDevice ? "35.5" : "35.5GW" }, { x: 'China', y: 18.3, DataLabelMappingName: Browser.isDevice ?"18.3" : "18.3GW" }, { x: 'Italy', y: 17.6, DataLabelMappingName: Browser.isDevice ? "17.6" : "17.6GW" }, { x: 'Japan', y: 13.6, DataLabelMappingName: Browser.isDevice ? "13.6" :"13.6GW" },
{ x: 'United state', y: 12, DataLabelMappingName: Browser.isDevice ? "12" : "12GW" }, { x: 'Spain', y: 5.6, DataLabelMappingName: Browser.isDevice ? "5.6" : "5.6GW" }, { x: 'France', y: 4.6, DataLabelMappingName: Browser.isDevice ? "4.6" : "4.6GW" }, { x: 'Australia', y: 3.3, DataLabelMappingName: Browser.isDevice ? "3.3" :"3.3GW" },
{ x: 'Belgium', y: 3, DataLabelMappingName: Browser.isDevice ? "3" : "3GW" }, { x: 'United Kingdom', y: 2.9, DataLabelMappingName: Browser.isDevice ? "2.9" : "2.9GW" }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
#btn-control {
width: 100%;
text-align: center;
}
.e-export-icon::before {
content: '\\e728';
}
.e-view.fabric .e-export-icon::before, .e-view.fabric-dark .e-export-icon::before {
content: '\\e710';
}
.e-view.bootstrap4 .e-export-icon::before {
content: '\\e780';
}
.e-view.tailwind-dark .e-export-icon::before, .e-view.tailwind .e-export-icon::before {
content: '\\e7bf';
}
.e-view.highcontrast .e-export-icon::before {
content: '\\e710';
}
.e-view.bootstrap5 .e-export-icon::before, .e-view.bootstrap5-dark .e-export-icon::before {
content: '\\e72e';
}`;
const ChartExport = () => {
useEffect(() => {
updateSampleSection();
}, [])
let chartInstance = useRef<ChartComponent>(null);
let mode = useRef<DropDownListComponent>(null);
let inputObj = useRef(null);
let type: { [key: string]: Object }[] = [
{ value: 'JPEG' },
{ value: 'PNG' },
{ value: 'SVG' },
{ value: 'PDF' }
];
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/light/i, "Light").replace(/contrast/i,'Contrast') as ChartTheme;
};
const labelRender = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = pointFabricColors[args.point.index % 10];;
} else if (selectedTheme === 'material-dark') {
args.fill = pointMaterialDarkColors[args.point.index % 10];;
} else if (selectedTheme === 'material') {
args.fill = pointMaterialColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5-dark') {
args.fill = pointBootstrap5DarkColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5') {
args.fill = pointBootstrap5Colors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap4') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap-dark') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'highcontrast') {
args.fill = pointHighContrastColors[args.point.index % 10];
} else if (selectedTheme === 'fluent-dark') {
args.fill = pointFluentDarkColors[args.point.index % 10];
} else if (selectedTheme === 'fluent') {
args.fill = pointFluentColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind-dark') {
args.fill = pointTailwindDarkColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind') {
args.fill = pointTailwindColors[args.point.index % 10];
} else if (selectedTheme === 'material3-dark') {
args.fill = pointMaterial3DarkColors[args.point.index % 10];
} else if (selectedTheme === 'material3') {
args.fill = pointMaterial3Colors[args.point.index % 10];
}
}
const onClick = (e: Event): void => {
chartInstance.current.exportModule.export((mode.current.value as ExportType), inputObj.current.value);
}
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section row'>
<div className='col-md-8'>
<ChartComponent id='charts' ref={chartInstance} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 }, majorTickLines: {width : 0}, minorTickLines: {width: 0}, labelIntersectAction: "None", labelRotation: -45, interval: 1 }} chartArea={{ border: { width: 0 } }} primaryYAxis={{ title: 'Measurements (in Gigawatt)', labelFormat: '{value}GW', minimum: 0, maximum: 40, interval: 10, lineStyle: {width : 0}, majorGridLines: { width: 2 }, minorTickLines: {width: 0}, majorTickLines: {width : 0} }} pointRender={labelRender.bind(this)} load={load.bind(this)} title="Top 10 Countries Using Solar Power" loaded={onChartLoad.bind(this)} tooltip={{ enable: true }}>
<Inject services={[ColumnSeries, Category, Legend, Export, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' width={2} marker={{ dataLabel: { visible: true, name: 'DataLabelMappingName', enableRotation: Browser.isDevice ? true : false, angle: -90, position: 'Top', font: { fontWeight: '600', color: '#ffffff', size: '9px' } } }} type='Column' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div className='col-md-4 property-section'>
<PropertyPane title='Properties'>
<table id='property' title='Properties' className='property-panel-table' style={{ width: '100%' }}>
<tr style={{ height: "50px" }}>
<td style={{ width: "30%" }}>Export Type:</td>
<td style={{ width: "30%" }}>
<DropDownListComponent width={120} id="etype" value="JPEG" ref={mode} dataSource={type} fields={{ text: 'value', value: 'value' }} placeholder="JPEG" />
</td>
</tr>
<tr style={{ height: "50px" }}>
<td style={{ width: "40%" }}>File Name:</td>
<td style={{ width: "40%" }}>
<div className="e-float-input" style={{ width: 120, 'marginTop': '0px' }}>
<input type="text" ref={inputObj} defaultValue="Chart" id="fileName" style={{ "marginLeft": "-10px" }} />
</div>
</td>
</tr>
<tr style={{ height: '50px' }}>
<td>
<div id="btn-control" style={{ 'marginLeft': '60px' }}>
<ButtonComponent onClick={onClick.bind(this)} iconCss='e-icons e-export-icon' cssClass='e-flat' isPrimary={true}>Export</ButtonComponent>
</div>
</td>
</tr>
</table>
</PropertyPane>
</div>
</div>
<div id="action-description">
<p>This example demonstrates how to save the chart as a PDF file and in image formats including JPEG, PNG, and SVG.</p>
</div>
<div id="description">
<p>By clicking on Export button, you can <b>export</b> the chart to the specific type using ExportAsync method. To be more precise, define parameters such as the export type and the file name while exporting.</p>
<p>
More information on the export can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/chart-print/#export">documentation section</a>.
</p>
</div>
</div >
)
}
/**
* Sample for chart export
*/
import * as React from "react";
import { useEffect, useRef } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ChartTheme, ILoadedEventArgs, Category, ColumnSeries, Inject, IPointRenderEventArgs, Legend, ExportType, Export, DataLabel } from '@syncfusion/ej2-react-charts';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { } from '@syncfusion/ej2-react-inputs';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { pointFabricColors, pointMaterialDarkColors, pointMaterialColors, pointBootstrap5DarkColors, pointBootstrapColors, pointHighContrastColors, pointFluentDarkColors, pointFluentColors, pointTailwindDarkColors, pointTailwindColors, bubbleBootstrap5Colors, pointBootstrap5Colors, pointMaterial3DarkColors, pointMaterial3Colors } from './theme-color';
import { PropertyPane } from '../common/property-pane';
import { EmitType, Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1: any[] = [
{ x: 'India', y: 35.5, DataLabelMappingName: Browser.isDevice ? "35.5" : "35.5GW" }, { x: 'China', y: 18.3, DataLabelMappingName: Browser.isDevice ?"18.3" : "18.3GW" }, { x: 'Italy', y: 17.6, DataLabelMappingName: Browser.isDevice ? "17.6" : "17.6GW" }, { x: 'Japan', y: 13.6, DataLabelMappingName: Browser.isDevice ? "13.6" :"13.6GW" },
{ x: 'United state', y: 12, DataLabelMappingName: Browser.isDevice ? "12" : "12GW" }, { x: 'Spain', y: 5.6, DataLabelMappingName: Browser.isDevice ? "5.6" : "5.6GW" }, { x: 'France', y: 4.6, DataLabelMappingName: Browser.isDevice ? "4.6" : "4.6GW" }, { x: 'Australia', y: 3.3, DataLabelMappingName: Browser.isDevice ? "3.3" :"3.3GW" },
{ x: 'Belgium', y: 3, DataLabelMappingName: Browser.isDevice ? "3" : "3GW" }, { x: 'United Kingdom', y: 2.9, DataLabelMappingName: Browser.isDevice ? "2.9" : "2.9GW" }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
#btn-control {
width: 100%;
text-align: center;
}
.e-export-icon::before {
content: '\\e728';
}
.e-view.fabric .e-export-icon::before, .e-view.fabric-dark .e-export-icon::before {
content: '\\e710';
}
.e-view.bootstrap4 .e-export-icon::before {
content: '\\e780';
}
.e-view.tailwind-dark .e-export-icon::before, .e-view.tailwind .e-export-icon::before {
content: '\\e7bf';
}
.e-view.highcontrast .e-export-icon::before {
content: '\\e710';
}
.e-view.bootstrap5 .e-export-icon::before, .e-view.bootstrap5-dark .e-export-icon::before {
content: '\\e72e';
}`;
const ChartExport = () => {
useEffect(() => {
updateSampleSection();
const button = document.getElementById('chart-export');
button.addEventListener('click', onClick);
}, [])
let chartInstance = useRef<ChartComponent>(null);
let mode = useRef<DropDownListComponent>(null);
let inputObj = useRef(null);
let type: { [key: string]: Object }[] = [
{ value: 'JPEG' },
{ value: 'PNG' },
{ value: 'SVG' },
{ value: 'PDF' },
{ value: 'XLSX' },
{ value: 'CSV' }
];
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/light/i, "Light").replace(/contrast/i,'Contrast') as ChartTheme;
};
const labelRender = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = pointFabricColors[args.point.index % 10];;
} else if (selectedTheme === 'material-dark') {
args.fill = pointMaterialDarkColors[args.point.index % 10];;
} else if (selectedTheme === 'material') {
args.fill = pointMaterialColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5-dark') {
args.fill = pointBootstrap5DarkColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5') {
args.fill = pointBootstrap5Colors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap4') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap-dark') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'highcontrast') {
args.fill = pointHighContrastColors[args.point.index % 10];
} else if (selectedTheme === 'fluent-dark') {
args.fill = pointFluentDarkColors[args.point.index % 10];
} else if (selectedTheme === 'fluent') {
args.fill = pointFluentColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind-dark') {
args.fill = pointTailwindDarkColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind') {
args.fill = pointTailwindColors[args.point.index % 10];
} else if (selectedTheme === 'material3-dark') {
args.fill = pointMaterial3DarkColors[args.point.index % 10];
} else if (selectedTheme === 'material3') {
args.fill = pointMaterial3Colors[args.point.index % 10];
}
}
const onClick = (e: Event): void => {
chartInstance.current.exportModule.export((mode.current.value as ExportType), inputObj.current.value);
}
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section row'>
<div className='col-lg-9'>
<ChartComponent id='charts' ref={chartInstance} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 }, majorTickLines: {width : 0}, minorTickLines: {width: 0}, labelIntersectAction: "None", labelRotation: -45, interval: 1 }} chartArea={{ border: { width: 0 } }} primaryYAxis={{ labelFormat: '{value}GW', minimum: 0, maximum: 40, interval: 10, lineStyle: {width : 0}, majorGridLines: { width: 2 }, minorTickLines: {width: 0}, majorTickLines: {width : 0} }} pointRender={labelRender.bind(this)} load={load.bind(this)} legendSettings={{ visible: false }} title="Top 10 Countries Using Solar Power" loaded={onChartLoad.bind(this)}>
<Inject services={[ColumnSeries, Category, Legend, Export, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} name='Measurements (in Gigawatt)' xName='x' yName='y' width={2} marker={{ dataLabel: { visible: true, name: 'DataLabelMappingName', enableRotation: Browser.isDevice ? true : false, angle: -90, position: 'Top', font: { fontWeight: '600', color: '#ffffff', size: '9px' } } }} type='Column' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div className='col-lg-3 property-section'>
<PropertyPane title='Properties'>
<table id='property' title='Properties' className='property-panel-table' style={{ width: '100%' }}>
<tr style={{ height: "50px" }}>
<td style={{ width: "40%" }}>Export Type:</td>
<td style={{ width: "60%" }}>
<div style={{ "marginLeft": "-10px" }}>
<DropDownListComponent id="etype" value="JPEG" width={90} ref={mode} dataSource={type} fields={{ text: 'value', value: 'value' }} placeholder="JPEG" />
</div>
</td>
</tr>
<tr style={{ height: "50px" }}>
<td style={{ width: "40%" }}>File Name:</td>
<td style={{ width: "40%" }}>
<div className="e-float-input" style={{ 'marginTop': '0px', "marginLeft": "-10px" }}>
<input type="text" ref={inputObj} defaultValue="Chart" id="fileName" style={{ "width": "90px" }} />
</div>
</td>
</tr>
<tr style={{ height: '50px' }}>
<td>
<div id="btn-control" style={{ 'marginLeft': '50%' }}>
<ButtonComponent id="chart-export" iconCss='e-icons e-export icon' isPrimary={true}>Export</ButtonComponent>
</div>
</td>
</tr>
</table>
</PropertyPane>
</div>
</div>
<div id="action-description">
<p>This sample demonstrates client-side exporting of the chart, enabling you to export its data to Excel, PDF, and CSV formats. Additionally, it allows you to save the chart in image formats such as JPEG, PNG, and SVG.</p>
</div>
<div id="description">
<p>In this example, you can see how the export functionality is configured. The rendered chart can be exported in JPEG, PNG, SVG, and PDF file types. Data from the chart can also be exported to Excel and CSV files.</p>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use export, we need to inject <code>export</code> module into <code>services</code>.
</p>
<p>
More information on the export can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/chart-print/#export">documentation section</a>.
</p>
</div>
</div >
)
}
export default ChartExport;

40
src/chart/export.tsx
Просмотреть файл

@ -60,7 +60,9 @@ export class ChartExport extends SampleBase<{}, {}> {
{ value: 'JPEG' },
{ value: 'PNG' },
{ value: 'SVG' },
{ value: 'PDF' }
{ value: 'PDF' },
{ value: 'XLSX' },
{ value: 'CSV' }
];
render() {
return (
@ -69,7 +71,7 @@ export class ChartExport extends SampleBase<{}, {}> {
{SAMPLE_CSS}
</style>
<div className='control-section row'>
<div className='col-md-8'>
<div className='col-md-9'>
<ChartComponent id='charts' ref={chart => this.chartInstance = chart} style={{ textAlign: "center" }}
primaryXAxis={{
title: 'Countries',
@ -77,8 +79,8 @@ export class ChartExport extends SampleBase<{}, {}> {
majorGridLines: { width: 0 }
}}
chartArea={{ border: { width: 0 } }}
legendSettings={{ visible: false }}
primaryYAxis={{
title: 'Measurements',
labelFormat: '{value}GW',
minimum: 0,
maximum: 40,
@ -87,17 +89,16 @@ export class ChartExport extends SampleBase<{}, {}> {
}}
pointRender={this.labelRender.bind(this)}
load={this.load.bind(this)}
title="Top 10 Countries Using Solar Power" loaded={this.onChartLoad.bind(this)}
tooltip={{ enable: true }}>
title="Top 10 Countries Using Solar Power" loaded={this.onChartLoad.bind(this)}>
<Inject services={[ColumnSeries, Category, Legend, Export]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' width={2}
<SeriesDirective dataSource={data1} xName='x' yName='y' width={2} name='Measurements (in Gigawatt)'
type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div className='col-md-4 property-section'>
<div className='col-md-3 property-section'>
<PropertyPane title='Properties'>
<table id='property' title='Properties' className='property-panel-table' style={{ width: '100%' }}>
<tr style={{ height: "50px" }}>
@ -105,7 +106,9 @@ export class ChartExport extends SampleBase<{}, {}> {
Export Type:
</td>
<td style={{ width: "30%" }}>
<DropDownListComponent width={120} id="etype" value="JPEG" ref={d => this.mode = d} dataSource={this.type} fields={{ text: 'value', value: 'value' }} placeholder="JPEG" />
<div style={{ "marginLeft": "-10px", width: "100%"}}>
<DropDownListComponent id="etype" value="JPEG" ref={d => this.mode = d} dataSource={this.type} fields={{ text: 'value', value: 'value' }} placeholder="JPEG" />
</div>
</td>
</tr>
<tr style={{ height: "50px" }}>
@ -113,14 +116,14 @@ export class ChartExport extends SampleBase<{}, {}> {
File Name:
</td>
<td style={{ width: "40%" }}>
<div className="e-float-input" style={{ width: 120, 'marginTop': '0px' }}>
<div className="e-float-input" style={{ 'marginTop': '0px' }}>
<input type="text" defaultValue="Chart" id="fileName" style={{ "marginLeft": "-10px" }} />
</div>
</td>
</tr>
<tr style={{ height: '50px' }}>
<td>
<div id="btn-control" style={{ 'marginLeft': '60px' }}>
<div id="btn-control" style={{ 'marginLeft': '40%'}}>
<ButtonComponent onClick={this.onClick.bind(this)} iconCss='e-icons e-export-icon' cssClass='e-flat' isPrimary={true}>Export</ButtonComponent>
</div>
</td>
@ -130,18 +133,17 @@ export class ChartExport extends SampleBase<{}, {}> {
</div>
</div>
<div id="action-description">
<p>
This sample illustrates the export feature in chart. By clicking <code>Export</code>, you can export the chart in PNG or JPEG format.
</p>
<p>This sample demonstrates client-side exporting of the chart, enabling you to export its data to Excel, PDF, and CSV formats. Additionally, it allows you to save the chart in image formats such as JPEG, PNG, and SVG.</p>
</div>
<div id="description">
<p>In this example, you can see how the export functionality is configured. The rendered chart can be exported in JPEG, PNG, SVG, and PDF file types. Data from the chart can also be exported to Excel and CSV files.</p>
<p><b>Injecting Module</b></p>
<p>
In this example, you can see how to render and configure the export. The rendered chart can be exported as either JPEG or PNG format. It can be achieved using Blob and it's supported only in modern browsers.
</p>
Chart component features are segregated into individual feature-wise modules. To use export, we need to inject <code>export</code> module into <code>services</code>.
</p>
<p>
More information on the export can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/chart-print/#export">documentation section</a>.
</p>
More information on the export can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/chart-print/#export">documentation section</a>.
</p>
</div>
</div >
)
@ -155,7 +157,7 @@ export class ChartExport extends SampleBase<{}, {}> {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").
replace(/light/i, "Light").replace(/contrast/i,'Contrast') as ChartTheme;
replace(/light/i, "Light").replace(/contrast/i, 'Contrast') as ChartTheme;
};
public labelRender(args: IPointRenderEventArgs): void {

1278
src/chart/financial-data.ts
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

156
src/chart/funnel-functional.tsx
Просмотреть файл

@ -1,79 +1,79 @@
/**
* Sample for Funnel Series
*/
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useEffect, useRef } from 'react';
import { updateSampleSection } from '../common/sample-base';
import { Browser} from '@syncfusion/ej2-base';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, FunnelSeries, AccumulationTooltip, IAccLoadedEventArgs, AccumulationDataLabel, IAccResizeEventArgs, AccumulationTheme } from '@syncfusion/ej2-react-charts';
export let data1: any[] = [
{ x: "Hired", y: 50, text: "Hired: 50" },
{ x: "Personal Interview", y: 58, text: Browser.isDevice ? "Personal <br> Interview: 58" : "Personal Interview: 58" },
{ x: "Telephonic Interview", y: 85, text: "Telephonic <br> Interview: 85" },
{ x: "Screening", y: 105, text: "Screening: 105" },
{ x: "Initial Validation", y: 145, text: Browser.isDevice ? "Initial <br> Validation: 145" : "Initial Validation: 145" },
{ x: "Candidates Applied", y: 250, text: "Candidates Applied: 250" },
];
const Funnel = () => {
useEffect(() => {
updateSampleSection();
}, [])
let funnelObj = useRef<AccumulationChartComponent>(null);
const onChartLoad = (args: IAccLoadedEventArgs): void => {
document.getElementById('funnel-chart').setAttribute('title', '');
};
const load = (args: IAccLoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as AccumulationTheme;
if (args.accumulation.availableSize.width < args.accumulation.availableSize.height) {
args.accumulation.series[0].width = '80%';
args.accumulation.series[0].height = '70%';
}
};
const onChartResized = (args: IAccResizeEventArgs): void => {
let bounds: ClientRect = funnelObj.current.element.getBoundingClientRect();
if (bounds.width < bounds.height) {
args.accumulation.series[0].width = '80%';
args.accumulation.series[0].height = '70%';
} else {
args.accumulation.series[0].width = '60%';
args.accumulation.series[0].height = '80%';
}
}
return (
<div className='control-pane'>
<div className='control-section row'>
<AccumulationChartComponent ref={funnelObj} legendSettings={{ visible: false }} id='funnel-chart' title='Recruitment Process' load={load.bind(this)} tooltip={{ enable: false, format: '${point.x} : <b>${point.y}</b>' }} resized={onChartResized.bind(this)} loaded={onChartLoad.bind(this)}>
<Inject services={[FunnelSeries, AccumulationTooltip, AccumulationDataLabel, AccumulationLegend]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data1} xName='x' yName='y' type='Funnel' width='45%' height='80%' neckWidth='15%' gapRatio={0.03} neckHeight='18%' explode={false} dataLabel={{ connectorStyle: {length:'20px'},name: 'text', visible: true, position: 'Inside', font: { fontWeight: '600' } }} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
<div id="action-description">
<p>This React Funnel Chart example shows a funnel chart for recruitment process. Datalabels show information about the points.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure a funnel chart. The labels are smartly arranged to avoid overlapping. The width and height of the funnel chart can be customized using the <code>NeckWidth</code> and <code>NeckHeight</code> properties.
</p>
<p>
<code>Tooltips</code> are enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Funnel series, we need to inject
<code>FunnelSeries</code> module into <code>services</code>.
</p>
<p>
More information about the funnel series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/accumulation-chart/funnel/">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Funnel Series
*/
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useEffect, useRef } from 'react';
import { updateSampleSection } from '../common/sample-base';
import { Browser} from '@syncfusion/ej2-base';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, FunnelSeries, AccumulationTooltip, IAccLoadedEventArgs, AccumulationDataLabel, IAccResizeEventArgs, AccumulationTheme } from '@syncfusion/ej2-react-charts';
export let data1: any[] = [
{ x: "Hired", y: 50, text: "Hired: 50" },
{ x: "Personal Interview", y: 58, text: Browser.isDevice ? "Personal <br> Interview: 58" : "Personal Interview: 58" },
{ x: "Telephonic Interview", y: 85, text: "Telephonic <br> Interview: 85" },
{ x: "Screening", y: 105, text: "Screening: 105" },
{ x: "Initial Validation", y: 145, text: Browser.isDevice ? "Initial <br> Validation: 145" : "Initial Validation: 145" },
{ x: "Candidates Applied", y: 250, text: "Candidates Applied: 250" },
];
const Funnel = () => {
useEffect(() => {
updateSampleSection();
}, [])
let funnelObj = useRef<AccumulationChartComponent>(null);
const onChartLoad = (args: IAccLoadedEventArgs): void => {
document.getElementById('funnel-chart').setAttribute('title', '');
};
const load = (args: IAccLoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as AccumulationTheme;
if (args.accumulation.availableSize.width < args.accumulation.availableSize.height) {
args.accumulation.series[0].width = '80%';
args.accumulation.series[0].height = '70%';
}
};
const onChartResized = (args: IAccResizeEventArgs): void => {
let bounds: ClientRect = funnelObj.current.element.getBoundingClientRect();
if (bounds.width < bounds.height) {
args.accumulation.series[0].width = '80%';
args.accumulation.series[0].height = '70%';
} else {
args.accumulation.series[0].width = '60%';
args.accumulation.series[0].height = '80%';
}
}
return (
<div className='control-pane'>
<div className='control-section row'>
<AccumulationChartComponent ref={funnelObj} legendSettings={{ visible: false }} id='funnel-chart' title='Recruitment Process' load={load.bind(this)} tooltip={{ enable: false, format: '${point.x} : <b>${point.y}</b>' }} resized={onChartResized.bind(this)} loaded={onChartLoad.bind(this)}>
<Inject services={[FunnelSeries, AccumulationTooltip, AccumulationDataLabel, AccumulationLegend]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data1} xName='x' yName='y' type='Funnel' width='45%' height='80%' neckWidth='15%' gapRatio={0.03} neckHeight='18%' explode={false} dataLabel={{ connectorStyle: {length:'20px'},name: 'text', visible: true, position: 'Inside', font: { fontWeight: '600' } }} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
<div id="action-description">
<p>This React Funnel Chart example shows a funnel chart for recruitment process. Datalabels show information about the points.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure a funnel chart. The labels are smartly arranged to avoid overlapping. The width and height of the funnel chart can be customized using the <code>NeckWidth</code> and <code>NeckHeight</code> properties.
</p>
<p>
<code>Tooltips</code> are enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Funnel series, we need to inject
<code>FunnelSeries</code> module into <code>services</code>.
</p>
<p>
More information about the funnel series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/accumulation-chart/funnel/">documentation section</a>.
</p>
</div>
</div>
)
}
export default Funnel;

202
src/chart/grouped-column-functional.tsx
Просмотреть файл

@ -1,101 +1,101 @@
/**
* Sample for grouped Column series
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme, Legend, Category, Tooltip, ColumnSeries, ILoadedEventArgs, DataLabel } from '@syncfusion/ej2-react-charts';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1 = [
{ x: '2012', y: 104 },
{ x: '2016', y: 121 },
{ x: '2020', y: 113 },
];
export let data2 = [
{ x: '2012', y: 46 },
{ x: '2016', y: 46 },
{ x: '2020', y: 39 },
];
export let data3 = [
{ x: '2012', y: 65 },
{ x: '2016', y: 67 },
{ x: '2020', y: 65 },
];
export let data4 = [
{ x: '2012', y: 29 },
{ x: '2016', y: 27 },
{ x: '2020', y: 22 },
];
export let data5 = [
{ x: '2012', y: 91 },
{ x: '2016', y: 70 },
{ x: '2020', y: 88 },
];
export let data6 = [
{ x: '2012', y: 38 },
{ x: '2016', y: 26 },
{ x: '2020', y: 38 },
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const GroupedColumn = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id="charts" style={{ textAlign: 'center' }} load={load.bind(this)} primaryXAxis={{ valueType: 'Category', interval: 1, majorGridLines: { width: 0 }, majorTickLines: { width: 0 } }} primaryYAxis={{ majorTickLines: { width: 0 }, lineStyle: { width: 0 }, title: 'Medal Count'}} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true }} width={Browser.isDevice ? '100%' : '75%'} title="Olympics Medal Tally" loaded={onChartLoad.bind(this)}>
<Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName="x" yName="y" name="USA Gold Medals" type="Column" groupName="USA" columnWidth={0.7} columnSpacing={0.1} marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff'} } }} ></SeriesDirective>
<SeriesDirective dataSource={data2} xName="x" yName="y" name="USA Total Medals" type="Column" groupName="USA" columnWidth={0.5} columnSpacing={0.1} marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}></SeriesDirective>
<SeriesDirective dataSource={data3} xName="x" yName="y" name="UK Total Medals" type="Column" groupName="UK" columnWidth={0.7} columnSpacing={0.1} marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}></SeriesDirective>
<SeriesDirective dataSource={data4} xName="x" yName="y" name="UK Gold Medals" type="Column" groupName="UK" columnWidth={0.5} columnSpacing={0.1} marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}></SeriesDirective>
<SeriesDirective dataSource={data5} xName="x" yName="y" name="China Total Medals" type="Column" groupName="China" columnWidth={0.7} columnSpacing={0.1} marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}></SeriesDirective>
<SeriesDirective dataSource={data6} xName="x" yName="y" name="China Gold Medals" type="Column" groupName="China" columnWidth={0.5} columnSpacing={0.1} marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample visualizes the Olympics medal count using a grouped column series. Data labels are used to display the values of data points.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the column type charts.
Column type charts are used for comparing the frequency, count, total or average of data in different categories.
You can group the column series by using <code>groupName</code> property.
</p>
<p>
<code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject
<code>ColumnSeries</code> module using <code>services</code>.
</p>
<br />
<p>
More information about the column series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#column-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default GroupedColumn;
/**
* Sample for grouped Column series
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme, Legend, Category, Tooltip, ColumnSeries, ILoadedEventArgs, DataLabel } from '@syncfusion/ej2-react-charts';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1 = [
{ x: '2012', y: 104 },
{ x: '2016', y: 121 },
{ x: '2020', y: 113 },
];
export let data2 = [
{ x: '2012', y: 46 },
{ x: '2016', y: 46 },
{ x: '2020', y: 39 },
];
export let data3 = [
{ x: '2012', y: 65 },
{ x: '2016', y: 67 },
{ x: '2020', y: 65 },
];
export let data4 = [
{ x: '2012', y: 29 },
{ x: '2016', y: 27 },
{ x: '2020', y: 22 },
];
export let data5 = [
{ x: '2012', y: 91 },
{ x: '2016', y: 70 },
{ x: '2020', y: 88 },
];
export let data6 = [
{ x: '2012', y: 38 },
{ x: '2016', y: 26 },
{ x: '2020', y: 38 },
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const GroupedColumn = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id="charts" style={{ textAlign: 'center' }} load={load.bind(this)} primaryXAxis={{ valueType: 'Category', interval: 1, majorGridLines: { width: 0 }, majorTickLines: { width: 0 } }} primaryYAxis={{ majorTickLines: { width: 0 }, lineStyle: { width: 0 }, title: 'Medal Count'}} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true }} width={Browser.isDevice ? '100%' : '75%'} title="Olympics Medal Tally" loaded={onChartLoad.bind(this)}>
<Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName="x" yName="y" name="USA Gold Medals" type="Column" groupName="USA" columnWidth={0.7} columnSpacing={0.1} marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff'} } }} ></SeriesDirective>
<SeriesDirective dataSource={data2} xName="x" yName="y" name="USA Total Medals" type="Column" groupName="USA" columnWidth={0.5} columnSpacing={0.1} marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}></SeriesDirective>
<SeriesDirective dataSource={data3} xName="x" yName="y" name="UK Total Medals" type="Column" groupName="UK" columnWidth={0.7} columnSpacing={0.1} marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}></SeriesDirective>
<SeriesDirective dataSource={data4} xName="x" yName="y" name="UK Gold Medals" type="Column" groupName="UK" columnWidth={0.5} columnSpacing={0.1} marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}></SeriesDirective>
<SeriesDirective dataSource={data5} xName="x" yName="y" name="China Total Medals" type="Column" groupName="China" columnWidth={0.7} columnSpacing={0.1} marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}></SeriesDirective>
<SeriesDirective dataSource={data6} xName="x" yName="y" name="China Gold Medals" type="Column" groupName="China" columnWidth={0.5} columnSpacing={0.1} marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample visualizes the Olympics medal count using a grouped column series. Data labels are used to display the values of data points.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the column type charts.
Column type charts are used for comparing the frequency, count, total or average of data in different categories.
You can group the column series by using <code>groupName</code> property.
</p>
<p>
<code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject
<code>ColumnSeries</code> module using <code>services</code>.
</p>
<br />
<p>
More information about the column series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#column-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default GroupedColumn;

260
src/chart/grouping-functional.tsx
Просмотреть файл

@ -1,131 +1,131 @@
/**
* Sample for grouping in Pie chart
*/
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import { Browser} from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { PropertyPane } from '../common/property-pane';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, AccumulationLegend, PieSeries, AccumulationTooltip, IAccTextRenderEventArgs, AccumulationTheme, Inject, AccumulationDataLabel, IAccPointRenderEventArgs, IAccLoadedEventArgs, GroupModes } from '@syncfusion/ej2-react-charts';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
export let data1: any[] = [
{ 'x': 'Australia', y: 26, text: 'Australia: 26' },
{ 'x': 'Russia', y: 19, text: 'Russia: 19' },
{ 'x': 'Germany', y: 17, text: 'Germany: 17' },
{ 'x': 'Japan', y: 12, text: 'Japan: 12' },
{ 'x': 'China', y: 10, text: 'China: 10' },
{ 'x': 'South Korea', y: 9, text: 'South Korea: 9' },
{ 'x': 'Great Britain', y: 27, text: 'Great Britain: 27' },
{ 'x': 'Italy', y: 8, text: 'Italy: 8' },
{ 'x': 'France', y: 8, text: 'France: 8' },
{ 'x': 'Spain', y: 7, text: 'Spain: 7' },
{ 'x': 'Hungary', y: 8, text: 'Hungary: 8' },
{ 'x': 'Brazil', y: 7, text: 'Brazil: 7' },
{ 'x': 'Netherlands', y: 8, text: 'Netherlands: 8' },
{ 'x': 'Kenya', y: 6, text: 'Kenya: 6' },
];
const Grouping = () => {
useEffect(() => {
updateSampleSection();
}, [])
const [clubText, setClubText] = useState<string>('9');
let pie = useRef<AccumulationChartComponent>(null);
let slider = useRef<HTMLInputElement>(null);
let dropElement = useRef<DropDownListComponent>(null);
let droplist: { [key: string]: Object }[] = [
{ value: 'Point' },
{ value: 'Value' }
];
const change = (): void => {
pie.current.series[0].groupMode = dropElement.current.value as GroupModes;
let currentValue: number = dropElement.current.value === 'Point' ? 9 : 8;
pie.current.series[0].groupTo = currentValue.toString();
pie.current.series[0].animation.enable = false;
setClubText(currentValue.toString());
slider.current.value = currentValue.toString();
pie.current.removeSvg();
pie.current.refreshSeries();
pie.current.refreshChart();
};
const onTextRender = (args: IAccTextRenderEventArgs): void => {
args.text = args.point.x + ' ' + args.point.y;
};
const onPointRender = (args: IAccPointRenderEventArgs): void => {
if (args.point.isClubbed || args.point.isSliced) {
args.fill = '#D3D3D3';
}
};
const onChartLoad = (args: IAccLoadedEventArgs): void => {
document.getElementById('pie-chart').setAttribute('title', '');
};
const onClubValue = (e: Event): void => {
let clubvalue: string = slider.current.value;
pie.current.series[0].groupTo = clubvalue;
pie.current.series[0].animation.enable = false;
setClubText(clubvalue);
pie.current.removeSvg();
pie.current.refreshSeries();
pie.current.refreshChart();
};
const load = (args: IAccLoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as AccumulationTheme;
};
return (
<div className='control-pane'>
<div className='control-section row'>
<div className='col-lg-9'>
<AccumulationChartComponent id='pie-chart' ref={pie} title='Rio Olympic Gold Medals' load={load.bind(this)} tooltip={{ enable: true, format: "<b>${point.x}</b><br> Gold Medals: <b>${point.y}</b>" }} legendSettings={{ visible: false }} textRender={onTextRender.bind(this)} pointRender={onPointRender.bind(this)} enableSmartLabels={true} loaded={onChartLoad.bind(this)} enableBorderOnMouseMove={false}>
<Inject services={[AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data1} xName='x' yName='y' animation={{ enable: true }} explode={true} radius={Browser.isDevice ? '40%' : '70%' } groupTo='9' groupMode='Point' startAngle={0} endAngle={360} innerRadius='0%' dataLabel={{ visible: true, position: 'Outside', connectorStyle: { type: 'Curve', length: '20px' }, font: { fontWeight: '600' } }} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
<div className='col-lg-3 property-section'>
<PropertyPane title='Properties'>
<table id='property' title='Properties' className='property-panel-table' style={{ width: '100%' }}>
<tr style={{ height: '50px' }}>
<td style={{ width: '50%' }}>
<div>Mode: </div>
</td>
<td style={{ padding: 10, width: '50%' }}>
<DropDownListComponent width={120} id="modes" change={change.bind(this)} ref={dropElement} dataSource={droplist} fields={{ text: 'value', value: 'value' }} value="Point" />
</td>
</tr>
<tr style={{ height: '50px' }}>
<td style={{ width: '60%' }}>
<div>Group To:
<p id="clubtext" style={{ fontWeight: 'normal' }}>{clubText}</p>
</div>
</td>
<td style={{ width: '40%' }}>
<div>
<input type="range" name="clubvalue" onChange={onClubValue.bind(this)} ref={slider} defaultValue="9" min="0" max="27" id="clubvalue" style={{ marginLeft: '-5px' }} />
</div>
</td>
</tr>
</table>
</PropertyPane>
</div>
</div>
<div id="action-description">
<p>This sample shows the gold medal count scored by each country at the Rio Olympic Games, along with the pie series grouping functionality.</p>
</div>
<div id="description">
<p>
In this example, you can see how to group points based on count and values. The slice can be grouped based on the number of points by specifying the <code>GroupMode</code> to Point. For example, if the <code>GroupTo</code> property is set to 10, the chart will display the first 10 points and the remaining entries from the collection will be grouped as a single point. The slice can also be grouped based on values by specifying the <code>GroupMode</code> to Value. For example, if the <code>GroupTo</code> is set to 10, the first 10 points with a lower value will be grouped together and shown as a single point while the others as a slice.
</p>
<p> A tooltip is enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.</p>
<p>
More information on the pie series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/accumulation-chart/pie-dough-nut/#pie-chart">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for grouping in Pie chart
*/
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import { Browser} from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { PropertyPane } from '../common/property-pane';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, AccumulationLegend, PieSeries, AccumulationTooltip, IAccTextRenderEventArgs, AccumulationTheme, Inject, AccumulationDataLabel, IAccPointRenderEventArgs, IAccLoadedEventArgs, GroupModes } from '@syncfusion/ej2-react-charts';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
export let data1: any[] = [
{ 'x': 'Australia', y: 26, text: 'Australia: 26' },
{ 'x': 'Russia', y: 19, text: 'Russia: 19' },
{ 'x': 'Germany', y: 17, text: 'Germany: 17' },
{ 'x': 'Japan', y: 12, text: 'Japan: 12' },
{ 'x': 'China', y: 10, text: 'China: 10' },
{ 'x': 'South Korea', y: 9, text: 'South Korea: 9' },
{ 'x': 'Great Britain', y: 27, text: 'Great Britain: 27' },
{ 'x': 'Italy', y: 8, text: 'Italy: 8' },
{ 'x': 'France', y: 8, text: 'France: 8' },
{ 'x': 'Spain', y: 7, text: 'Spain: 7' },
{ 'x': 'Hungary', y: 8, text: 'Hungary: 8' },
{ 'x': 'Brazil', y: 7, text: 'Brazil: 7' },
{ 'x': 'Netherlands', y: 8, text: 'Netherlands: 8' },
{ 'x': 'Kenya', y: 6, text: 'Kenya: 6' },
];
const Grouping = () => {
useEffect(() => {
updateSampleSection();
}, [])
const [clubText, setClubText] = useState<string>('9');
let pie = useRef<AccumulationChartComponent>(null);
let slider = useRef<HTMLInputElement>(null);
let dropElement = useRef<DropDownListComponent>(null);
let droplist: { [key: string]: Object }[] = [
{ value: 'Point' },
{ value: 'Value' }
];
const change = (): void => {
pie.current.series[0].groupMode = dropElement.current.value as GroupModes;
let currentValue: number = dropElement.current.value === 'Point' ? 9 : 8;
pie.current.series[0].groupTo = currentValue.toString();
pie.current.series[0].animation.enable = false;
setClubText(currentValue.toString());
slider.current.value = currentValue.toString();
pie.current.removeSvg();
pie.current.refreshSeries();
pie.current.refreshChart();
};
const onTextRender = (args: IAccTextRenderEventArgs): void => {
args.text = args.point.x + ' ' + args.point.y;
};
const onPointRender = (args: IAccPointRenderEventArgs): void => {
if (args.point.isClubbed || args.point.isSliced) {
args.fill = '#D3D3D3';
}
};
const onChartLoad = (args: IAccLoadedEventArgs): void => {
document.getElementById('pie-chart').setAttribute('title', '');
};
const onClubValue = (e: Event): void => {
let clubvalue: string = slider.current.value;
pie.current.series[0].groupTo = clubvalue;
pie.current.series[0].animation.enable = false;
setClubText(clubvalue);
pie.current.removeSvg();
pie.current.refreshSeries();
pie.current.refreshChart();
};
const load = (args: IAccLoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as AccumulationTheme;
};
return (
<div className='control-pane'>
<div className='control-section row'>
<div className='col-lg-9'>
<AccumulationChartComponent id='pie-chart' ref={pie} title='Rio Olympic Gold Medals' load={load.bind(this)} tooltip={{ enable: true, format: "<b>${point.x}</b><br> Gold Medals: <b>${point.y}</b>" }} legendSettings={{ visible: false }} textRender={onTextRender.bind(this)} pointRender={onPointRender.bind(this)} enableSmartLabels={true} loaded={onChartLoad.bind(this)} enableBorderOnMouseMove={false}>
<Inject services={[AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={data1} xName='x' yName='y' animation={{ enable: true }} explode={true} radius={Browser.isDevice ? '40%' : '70%' } groupTo='9' groupMode='Point' startAngle={0} endAngle={360} innerRadius='0%' dataLabel={{ visible: true, position: 'Outside', connectorStyle: { type: 'Curve', length: '20px' }, font: { fontWeight: '600' } }} />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
<div className='col-lg-3 property-section'>
<PropertyPane title='Properties'>
<table id='property' title='Properties' className='property-panel-table' style={{ width: '100%' }}>
<tr style={{ height: '50px' }}>
<td style={{ width: '50%' }}>
<div>Mode: </div>
</td>
<td style={{ padding: 10, width: '50%' }}>
<DropDownListComponent width={120} id="modes" change={change.bind(this)} ref={dropElement} dataSource={droplist} fields={{ text: 'value', value: 'value' }} value="Point" />
</td>
</tr>
<tr style={{ height: '50px' }}>
<td style={{ width: '60%' }}>
<div>Group To:
<p id="clubtext" style={{ fontWeight: 'normal' }}>{clubText}</p>
</div>
</td>
<td style={{ width: '40%' }}>
<div>
<input type="range" name="clubvalue" onChange={onClubValue.bind(this)} ref={slider} defaultValue="9" min="0" max="27" id="clubvalue" style={{ marginLeft: '-5px' }} />
</div>
</td>
</tr>
</table>
</PropertyPane>
</div>
</div>
<div id="action-description">
<p>This sample shows the gold medal count scored by each country at the Rio Olympic Games, along with the pie series grouping functionality.</p>
</div>
<div id="description">
<p>
In this example, you can see how to group points based on count and values. The slice can be grouped based on the number of points by specifying the <code>GroupMode</code> to Point. For example, if the <code>GroupTo</code> property is set to 10, the chart will display the first 10 points and the remaining entries from the collection will be grouped as a single point. The slice can also be grouped based on values by specifying the <code>GroupMode</code> to Value. For example, if the <code>GroupTo</code> is set to 10, the first 10 points with a lower value will be grouped together and shown as a single point while the others as a slice.
</p>
<p> A tooltip is enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.</p>
<p>
More information on the pie series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/accumulation-chart/pie-dough-nut/#pie-chart">documentation section</a>.
</p>
</div>
</div>
)
}
export default Grouping;

118
src/chart/hilo-functional.tsx
Просмотреть файл

@ -1,59 +1,59 @@
/**
* Sample for Hilo Series
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, HiloSeries, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, Crosshair, ChartTheme } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const Hilo = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', crosshairTooltip: { enable: true }, edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 } }} primaryYAxis={{ title: 'Price', minimum: 10, maximum: 180, interval: 20, labelFormat: '${value}', lineStyle: { width: 0 }, majorTickLines: { width: 0 } }} legendSettings={{ visible: false }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true, enableMarker: false, header: "", format: "<b>Apple Inc.(AAPL)</b> <br> High : <b>${point.high}</b> <br> Low : <b>${point.low}</b>" }} crosshair={{ enable: false, lineType: 'Vertical', line: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} title='AAPL Historical' loaded={onChartLoad.bind(this)}>
<Inject services={[HiloSeries, Tooltip, DateTime, Logarithmic, Crosshair, Zoom]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartValues} xName='period' yName='low' name='Apple Inc' type='Hilo' low='low' high='high' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This React Hilo Chart example visualizes the AAPL stock price with a default Hilo series in the chart. The tooltip and crosshair show information about the stock price.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure the HILO series. This series shows the high and low stock values over a given period of time.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Hilo series, we need to inject
<code>HiloSeries</code> module into <code>services</code>.
</p>
<p>
More information on the Hilo series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/financial-types/#hilo">documentation section</a>.
</p>
</div>
</div >
)
}
export default Hilo;
/**
* Sample for Hilo Series
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, HiloSeries, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, Crosshair, ChartTheme } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const Hilo = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', crosshairTooltip: { enable: true }, edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 } }} primaryYAxis={{ title: 'Price', minimum: 10, maximum: 180, interval: 20, labelFormat: '${value}', lineStyle: { width: 0 }, majorTickLines: { width: 0 } }} legendSettings={{ visible: false }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true, enableMarker: false, header: "", format: "<b>Apple Inc.(AAPL)</b> <br> High : <b>${point.high}</b> <br> Low : <b>${point.low}</b>" }} crosshair={{ enable: false, lineType: 'Vertical', line: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} title='AAPL Historical' loaded={onChartLoad.bind(this)}>
<Inject services={[HiloSeries, Tooltip, DateTime, Logarithmic, Crosshair, Zoom]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartValues} xName='period' yName='low' name='Apple Inc' type='Hilo' low='low' high='high' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This React Hilo Chart example visualizes the AAPL stock price with a default Hilo series in the chart. The tooltip and crosshair show information about the stock price.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure the HILO series. This series shows the high and low stock values over a given period of time.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Hilo series, we need to inject
<code>HiloSeries</code> module into <code>services</code>.
</p>
<p>
More information on the Hilo series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/financial-types/#hilo">documentation section</a>.
</p>
</div>
</div >
)
}
export default Hilo;

122
src/chart/hiloopenclose-functional.tsx
Просмотреть файл

@ -1,62 +1,62 @@
/**
* Sample for Hilo Open Close Series
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, HiloOpenCloseSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, ChartTheme, Crosshair, ILoadedEventArgs } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
export let zoomFactor : number;
export let zoomPosition :number;
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const HiloOpenClose = () => {
useEffect(() => {
updateSampleSection();
}, [])
const load = (args: ILoadedEventArgs): void => {
args.chart.primaryXAxis.zoomFactor = zoomFactor;
args.chart.primaryXAxis.zoomPosition = zoomPosition;
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<div className="row">
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', crosshairTooltip: { enable: true }, majorGridLines: { width: 0 } }} primaryYAxis={{ title: 'Price', rangePadding: 'None', labelFormat: 'n0', lineStyle: { width: 0 }, majorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true, header:"", format: "<b>Apple Inc.(AAPL)</b> <br> High : <b>${point.high}</b> <br> Low : <b>${point.low}</b> <br> Open : <b>${point.open}</b> <br> Close : <b>${point.close}</b>" }} width={Browser.isDevice ? '100%' : '75%'} legendSettings={{ visible: false }} crosshair={{ enable: true, lineType: 'Vertical'}} title="AAPL Historical">
<Inject services={[HiloOpenCloseSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair]} />
<SeriesCollectionDirective>
<SeriesDirective type='HiloOpenClose' dataSource={chartValues} animation={{ enable: true }} bearFillColor='#2ecd71' bullFillColor='#e74c3d' xName='period' low='low' high='high' open='open' close='close' name='Apple Inc' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
<div id="action-description">
<p>This sample visualizes the AAPL stock price with default HILO Open Close series in the chart. The tooltip and the crosshairs display the data and period information.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure the HILO Open Close series. The horizontal lines on the left and the right are used to show the opening and closing values of the stock, and the vertical line represents both high and low values.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use HiloOpenClose series, we need to inject
<code>HiloOpenCloseSeries</code> module into <code>services</code>.
</p>
<p>
More information on the column series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/financial-types/#high-low-open-close">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Hilo Open Close Series
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, HiloOpenCloseSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, ChartTheme, Crosshair, ILoadedEventArgs } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
export let zoomFactor : number;
export let zoomPosition :number;
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const HiloOpenClose = () => {
useEffect(() => {
updateSampleSection();
}, [])
const load = (args: ILoadedEventArgs): void => {
args.chart.primaryXAxis.zoomFactor = zoomFactor;
args.chart.primaryXAxis.zoomPosition = zoomPosition;
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<div className="row">
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', crosshairTooltip: { enable: true }, majorGridLines: { width: 0 } }} primaryYAxis={{ title: 'Price', rangePadding: 'None', labelFormat: 'n0', lineStyle: { width: 0 }, majorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true, header:"", format: "<b>Apple Inc.(AAPL)</b> <br> High : <b>${point.high}</b> <br> Low : <b>${point.low}</b> <br> Open : <b>${point.open}</b> <br> Close : <b>${point.close}</b>" }} width={Browser.isDevice ? '100%' : '75%'} legendSettings={{ visible: false }} crosshair={{ enable: true, lineType: 'Vertical'}} title="AAPL Historical">
<Inject services={[HiloOpenCloseSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair]} />
<SeriesCollectionDirective>
<SeriesDirective type='HiloOpenClose' dataSource={chartValues} animation={{ enable: true }} bearFillColor='#2ecd71' bullFillColor='#e74c3d' xName='period' low='low' high='high' open='open' close='close' name='Apple Inc' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
<div id="action-description">
<p>This sample visualizes the AAPL stock price with default HILO Open Close series in the chart. The tooltip and the crosshairs display the data and period information.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure the HILO Open Close series. The horizontal lines on the left and the right are used to show the opening and closing values of the stock, and the vertical line represents both high and low values.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use HiloOpenClose series, we need to inject
<code>HiloOpenCloseSeries</code> module into <code>services</code>.
</p>
<p>
More information on the column series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/financial-types/#high-low-open-close">documentation section</a>.
</p>
</div>
</div>
)
}
export default HiloOpenClose;

148
src/chart/histogram-functional.tsx
Просмотреть файл

@ -1,74 +1,74 @@
/**
* Sample for Histogram series
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme, Legend, Category, Tooltip, ILoadedEventArgs, DataLabel, HistogramSeries } from '@syncfusion/ej2-react-charts';
import { PropertyPane } from '../common/property-pane';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let chartData: Object[] = [];
let points: number[] = [
5.250 , 7.750 , 0 , 8.275 , 9.750 ,7.750 ,8.275 ,6.250 ,5.750 ,5.250 ,23.000 ,26.500 ,27.750 ,25.025 ,26.500 ,28.025 ,29.250 ,26.750 ,27.250 ,26.250 ,25.250 , 34.500 ,25.625 ,25.500 ,26.625 ,36.275 ,36.250 ,26.875 ,40.000 ,43.000 ,46.500 ,47.750 ,45.025 ,56.500 ,58.025,59.250,56.750,57.250,46.250,55.250,44.500,45.525,55.500,46.625,46.275,56.250,46.875,43.000,46.250,55.250,44.500,45.425,55.500,56.625,46.275,56.250,46.875,43.000,46.250,55.250,44.500,45.425,55.500,46.625,56.275,46.250,56.875,41.000,63.000,66.500,67.750,65.025,66.500,76.500,78.025,79.250,76.750,77.250,66.250,75.250,74.500,65.625,75.500,76.625,76.275,66.250,66.875,80.000,85.250,87.750,89.000,88.275,89.750,97.750,98.275,96.250,95.750,95.250
];
points.map((value: number) => {
chartData.push({
y: value
});
});
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const Histogram = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
if (selectedTheme === 'highcontrast') {
args.chart.series[0].marker.dataLabel.font.color = '#000000';
}
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} load={load.bind(this)} primaryXAxis={{ majorGridLines: { width: 0 }, title: 'Score of Final Examination', minimum: 0, maximum: 100, edgeLabelPlacement: 'Shift' }} primaryYAxis={{ title: 'Number of Students', minimum: 0, maximum: 50, interval: 10, majorTickLines: { width: 0 }, lineStyle: { width: 0 } }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, header: " " }} width={Browser.isDevice ? '100%' : '75%'} legendSettings={{ visible: false }} title='Examination Result' loaded={onChartLoad.bind(this)}>
<Inject services={[HistogramSeries, Legend, Tooltip, Category, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData} yName='y' name='Score' type='Histogram' marker={{ visible: true, height: 7, width: 7, dataLabel: { visible: true, position: 'Top', font: {color: '#ffffff', fontWeight: "600"} } }} showNormalDistribution={true} columnWidth={0.99} binInterval={20} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This React Histogram Chart example visualizes final examination results. The number of students between each interval is shown in data labels.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure the histogram chart. The histogram chart is a bar (column) chart used for frequency distribution in which the widths of the bars are proportional to classes into which variables have been divided and the heights of the bars are proportional to class frequencies. The DataLabel property is used to present details on individual data points.</p>
<p>
Tooltip is enabled in this example.
To see the tooltip in action, hover the mouse over a point or tap a point in touch enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules.
To use histogram series, you should inject the <code>HistogramSeries</code> module using the <code>Chart.Inject(HistogramSeries)</code> method.
</p>
<p>
More information on the histogram series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/other-types/#histogram-series">documentation section</a>.
</p>
</div>
</div>
)
}
export default Histogram;
/**
* Sample for Histogram series
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme, Legend, Category, Tooltip, ILoadedEventArgs, DataLabel, HistogramSeries } from '@syncfusion/ej2-react-charts';
import { PropertyPane } from '../common/property-pane';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let chartData: Object[] = [];
let points: number[] = [
5.250 , 7.750 , 0 , 8.275 , 9.750 ,7.750 ,8.275 ,6.250 ,5.750 ,5.250 ,23.000 ,26.500 ,27.750 ,25.025 ,26.500 ,28.025 ,29.250 ,26.750 ,27.250 ,26.250 ,25.250 , 34.500 ,25.625 ,25.500 ,26.625 ,36.275 ,36.250 ,26.875 ,40.000 ,43.000 ,46.500 ,47.750 ,45.025 ,56.500 ,58.025,59.250,56.750,57.250,46.250,55.250,44.500,45.525,55.500,46.625,46.275,56.250,46.875,43.000,46.250,55.250,44.500,45.425,55.500,56.625,46.275,56.250,46.875,43.000,46.250,55.250,44.500,45.425,55.500,46.625,56.275,46.250,56.875,41.000,63.000,66.500,67.750,65.025,66.500,76.500,78.025,79.250,76.750,77.250,66.250,75.250,74.500,65.625,75.500,76.625,76.275,66.250,66.875,80.000,85.250,87.750,89.000,88.275,89.750,97.750,98.275,96.250,95.750,95.250
];
points.map((value: number) => {
chartData.push({
y: value
});
});
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const Histogram = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
if (selectedTheme === 'highcontrast') {
args.chart.series[0].marker.dataLabel.font.color = '#000000';
}
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} load={load.bind(this)} primaryXAxis={{ majorGridLines: { width: 0 }, title: 'Score of Final Examination', minimum: 0, maximum: 100, edgeLabelPlacement: 'Shift' }} primaryYAxis={{ title: 'Number of Students', minimum: 0, maximum: 50, interval: 10, majorTickLines: { width: 0 }, lineStyle: { width: 0 } }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, header: " " }} width={Browser.isDevice ? '100%' : '75%'} legendSettings={{ visible: false }} title='Examination Result' loaded={onChartLoad.bind(this)}>
<Inject services={[HistogramSeries, Legend, Tooltip, Category, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData} yName='y' name='Score' type='Histogram' marker={{ visible: true, height: 7, width: 7, dataLabel: { visible: true, position: 'Top', font: {color: '#ffffff', fontWeight: "600"} } }} showNormalDistribution={true} columnWidth={0.99} binInterval={20} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This React Histogram Chart example visualizes final examination results. The number of students between each interval is shown in data labels.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure the histogram chart. The histogram chart is a bar (column) chart used for frequency distribution in which the widths of the bars are proportional to classes into which variables have been divided and the heights of the bars are proportional to class frequencies. The DataLabel property is used to present details on individual data points.</p>
<p>
Tooltip is enabled in this example.
To see the tooltip in action, hover the mouse over a point or tap a point in touch enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules.
To use histogram series, you should inject the <code>HistogramSeries</code> module using the <code>Chart.Inject(HistogramSeries)</code> method.
</p>
<p>
More information on the histogram series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/other-types/#histogram-series">documentation section</a>.
</p>
</div>
</div>
)
}
export default Histogram;

228
src/chart/indexed-axis-functional.tsx
Просмотреть файл

@ -1,115 +1,115 @@
/**
* Sample for Indexed Category Axis
*/
import * as React from "react";
import { useEffect, useRef, useState } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, ILoadedEventArgs, LineSeries, ColumnSeries, Crosshair, ChartTheme, DataLabel } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1: any[] = [
{ x: 'India', y: 7.3 },
{ x: 'Myanmar', y: 7.9 },
{ x: 'Bangladesh', y: 6.0 },
{ x: 'Cambodia', y: 7.0 },
{ x: 'China', y: 6.9 },];
export let data2: any[] = [
{ x: 'Australia', y: 2.7 },
{ x: 'Poland', y: 2.5 },
{ x: 'Singapore', y: 2.0 },
{ x: 'Canada', y: 1.4 },
{ x: 'Germany', y: 1.8 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
#isIndexed:hover {
cursor: pointer;
}`;
const IndexedAxis = () => {
useEffect(() => {
updateSampleSection();
}, [])
let chartInstance = useRef<ChartComponent>(null);
let dropElement = useRef<HTMLInputElement>(null);
let loaded: EmitType<ILoadedEventArgs>;
const onChange = (): void =>{
chartInstance.current.primaryXAxis.isIndexed = dropElement.current.checked;
if (chartInstance.current.primaryXAxis.isIndexed) {
chartInstance.current.tooltip.shared = false;
chartInstance.current.series[0].type = 'Column';
chartInstance.current.series[1].type = 'Column';
chartInstance.current.series[0].marker.visible = false;
chartInstance.current.series[1].marker.visible = false;
chartInstance.current.primaryXAxis.labelRotation = 0;
chartInstance.current.crosshair.line.width = 1;
} else {
chartInstance.current.series[0].type = 'Line';
chartInstance.current.series[1].type = 'Line';
chartInstance.current.series[0].marker.visible = true;
chartInstance.current.series[1].marker.visible = true;
chartInstance.current.primaryXAxis.labelRotation = 90;
chartInstance.current.crosshair.line.width = 0;
chartInstance.current.tooltip.enable = false;
chartInstance.current.tooltip.shared = false;
}
chartInstance.current.refresh();
};
const onChartLoad = (args: ILoadedEventArgs): void => {
document.getElementById('charts').setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section row'>
<div className='col-md-9'>
<ChartComponent id='charts' ref={chartInstance} primaryXAxis={{ valueType: 'Category', interval: 1, crosshairTooltip: { enable: false }, isIndexed: true, labelRotation: Browser.isDevice ? -45 : 0, labelIntersectAction: Browser.isDevice ? 'None' : 'Rotate45', majorTickLines: {width : 0}, minorTickLines: {width: 0} }} primaryYAxis={{ labelFormat: '{value}%', title: 'GDP Growth Rate' }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} title="GDP by Countries" loaded={onChartLoad.bind(this)} tooltip={{ enable: false}} crosshair={{ enable: false, lineType: 'Vertical' }}>
<Inject services={[Legend, Category, LineSeries, ColumnSeries, Crosshair, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' name='2015' width={2} type='Column' marker={{ height: 10, width: 10, dataLabel: { visible: true, position: 'Top', enableRotation : Browser.isDevice ? true : false, angle: -90, font: { fontWeight: '600' } } }} />
<SeriesDirective dataSource={data2} xName='x' yName='y' name='2016' width={2} type='Column' marker={{ height: 10, width: 10, dataLabel: { visible: true, position: 'Top', enableRotation : Browser.isDevice ? true : false, angle: -90, font: { fontWeight: '600' } } }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div className='col-md-3 property-section'>
<PropertyPane title='Properties'>
<table id='property' title='Properties' className='property-panel-table' style={{ width: '100%' }}>
<tr style={{ height: '50px' }}>
<td style={{ width: '60%' }}>
<div>Indexed:</div>
</td>
<td style={{ width: '40%' }}>
<div>
<input type="checkbox" id="isIndexed" defaultChecked={true} onChange={onChange.bind(this)} style={{ marginLeft: '-5px' }} ref={dropElement} />
</div>
</td>
</tr>
</table>
</PropertyPane>
</div>
</div>
<div id="action-description">
<p>
This sample shows an indexed category axis in a chart with details about GDP growth across different countries.
</p>
</div>
<div id="description">
<p>
The category axis is also rendered on the basis of the index values in the data source. To render the indexed category axis, set <code>ValueType</code> to Category and <code>IsIndexed</code> property to <b>true</b>.
</p>
<p>
More information on the indexed axis can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/category-axis/#indexed-category-axis">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Indexed Category Axis
*/
import * as React from "react";
import { useEffect, useRef, useState } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, ILoadedEventArgs, LineSeries, ColumnSeries, Crosshair, ChartTheme, DataLabel } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1: any[] = [
{ x: 'India', y: 7.3 },
{ x: 'Myanmar', y: 7.9 },
{ x: 'Bangladesh', y: 6.0 },
{ x: 'Cambodia', y: 7.0 },
{ x: 'China', y: 6.9 },];
export let data2: any[] = [
{ x: 'Australia', y: 2.7 },
{ x: 'Poland', y: 2.5 },
{ x: 'Singapore', y: 2.0 },
{ x: 'Canada', y: 1.4 },
{ x: 'Germany', y: 1.8 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
#isIndexed:hover {
cursor: pointer;
}`;
const IndexedAxis = () => {
useEffect(() => {
updateSampleSection();
}, [])
let chartInstance = useRef<ChartComponent>(null);
let dropElement = useRef<HTMLInputElement>(null);
let loaded: EmitType<ILoadedEventArgs>;
const onChange = (): void =>{
chartInstance.current.primaryXAxis.isIndexed = dropElement.current.checked;
if (chartInstance.current.primaryXAxis.isIndexed) {
chartInstance.current.tooltip.shared = false;
chartInstance.current.series[0].type = 'Column';
chartInstance.current.series[1].type = 'Column';
chartInstance.current.series[0].marker.visible = false;
chartInstance.current.series[1].marker.visible = false;
chartInstance.current.primaryXAxis.labelRotation = 0;
chartInstance.current.crosshair.line.width = 1;
} else {
chartInstance.current.series[0].type = 'Line';
chartInstance.current.series[1].type = 'Line';
chartInstance.current.series[0].marker.visible = true;
chartInstance.current.series[1].marker.visible = true;
chartInstance.current.primaryXAxis.labelRotation = 90;
chartInstance.current.crosshair.line.width = 0;
chartInstance.current.tooltip.enable = false;
chartInstance.current.tooltip.shared = false;
}
chartInstance.current.refresh();
};
const onChartLoad = (args: ILoadedEventArgs): void => {
document.getElementById('charts').setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section row'>
<div className='col-md-9'>
<ChartComponent id='charts' ref={chartInstance} primaryXAxis={{ valueType: 'Category', interval: 1, crosshairTooltip: { enable: false }, isIndexed: true, labelRotation: Browser.isDevice ? -45 : 0, labelIntersectAction: Browser.isDevice ? 'None' : 'Rotate45', majorTickLines: {width : 0}, minorTickLines: {width: 0} }} primaryYAxis={{ labelFormat: '{value}%', title: 'GDP Growth Rate' }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} title="GDP by Countries" loaded={onChartLoad.bind(this)} tooltip={{ enable: false}} crosshair={{ enable: false, lineType: 'Vertical' }}>
<Inject services={[Legend, Category, LineSeries, ColumnSeries, Crosshair, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' name='2015' width={2} type='Column' marker={{ height: 10, width: 10, dataLabel: { visible: true, position: 'Top', enableRotation : Browser.isDevice ? true : false, angle: -90, font: { fontWeight: '600' } } }} />
<SeriesDirective dataSource={data2} xName='x' yName='y' name='2016' width={2} type='Column' marker={{ height: 10, width: 10, dataLabel: { visible: true, position: 'Top', enableRotation : Browser.isDevice ? true : false, angle: -90, font: { fontWeight: '600' } } }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div className='col-md-3 property-section'>
<PropertyPane title='Properties'>
<table id='property' title='Properties' className='property-panel-table' style={{ width: '100%' }}>
<tr style={{ height: '50px' }}>
<td style={{ width: '60%' }}>
<div>Indexed:</div>
</td>
<td style={{ width: '40%' }}>
<div>
<input type="checkbox" id="isIndexed" defaultChecked={true} onChange={onChange.bind(this)} style={{ marginLeft: '-5px' }} ref={dropElement} />
</div>
</td>
</tr>
</table>
</PropertyPane>
</div>
</div>
<div id="action-description">
<p>
This sample shows an indexed category axis in a chart with details about GDP growth across different countries.
</p>
</div>
<div id="description">
<p>
The category axis is also rendered on the basis of the index values in the data source. To render the indexed category axis, set <code>ValueType</code> to Category and <code>IsIndexed</code> property to <b>true</b>.
</p>
<p>
More information on the indexed axis can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/category-axis/#indexed-category-axis">documentation section</a>.
</p>
</div>
</div>
)
}
export default IndexedAxis;

270
src/chart/inversed-functional.tsx
Просмотреть файл

@ -1,136 +1,136 @@
/**
* Sample for Inversed axis
*/
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
ColumnSeries, Category, Legend, IPointRenderEventArgs,
Tooltip, DataLabel, ILoadedEventArgs, ChartTheme
} from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { Browser, EmitType } from '@syncfusion/ej2-base';
import {fabricColors, bootstrapColors, materialColors, highContrastColors, fluentColors, fluentDarkColors, bubbleFabricColors, bubbleMaterialDarkColors, bubbleMaterialColors, bubbleBootstrap5DarkColors, bubbleBootstrapColors, bubbleHighContrastColors, bubbleFluentDarkColors, bubbleFluentColors, bubbleTailwindDarkColors, bubbleTailwindColors, pointFabricColors, pointMaterialDarkColors, pointMaterialColors, pointBootstrap5DarkColors, pointBootstrapColors, pointHighContrastColors, pointFluentDarkColors, pointFluentColors, pointTailwindDarkColors, pointTailwindColors, bubbleBootstrap5Colors, pointBootstrap5Colors, pointMaterial3DarkColors, pointMaterial3Colors } from './theme-color';
export let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = pointFabricColors[args.point.index % 10];;
} else if (selectedTheme === 'material-dark') {
args.fill = pointMaterialDarkColors[args.point.index % 10];;
} else if (selectedTheme === 'material') {
args.fill = pointMaterialColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5-dark') {
args.fill = pointBootstrap5DarkColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5') {
args.fill = pointBootstrap5Colors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap4') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap-dark') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'highcontrast') {
args.fill = pointHighContrastColors[args.point.index % 10];
} else if (selectedTheme === 'fluent-dark') {
args.fill = pointFluentDarkColors[args.point.index % 10];
} else if (selectedTheme === 'fluent') {
args.fill = pointFluentColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind-dark') {
args.fill = pointTailwindDarkColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind') {
args.fill = pointTailwindColors[args.point.index % 10];
} else if (selectedTheme === 'material3-dark') {
args.fill = pointMaterial3DarkColors[args.point.index % 10];
} else if (selectedTheme === 'material3') {
args.fill = pointMaterial3Colors[args.point.index % 10];
}
};
export let data: any[] = [
{ x: '2008', y: 1.5 }, { x: '2009', y: 7.6 }, { x: '2010', y: 11 },
{ x: '2011', y: 16.2 }, { x: '2012', y: 18 }, { x: '2013', y: 21.4 },
{ x: '2014', y: 16 }, { x: '2015', y: 17.1 }
]
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
function InversedAxis() {
React.useEffect(() => {
updateSampleSection();
}, [])
return (
<div className='control-pane'>
<style>
{SAMPLE_CSS}
</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }}
primaryXAxis={{
valueType: 'Category',
opposedPosition: true,
isInversed: true,
majorGridLines: { width: 0 },
majorTickLines : {width : 0},
minorTickLines : {width : 0}
}}
load={load.bind(this)}
primaryYAxis={{
edgeLabelPlacement: 'Shift',
labelIntersectAction: 'Rotate45',
isInversed: true,
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
labelStyle: {
color: 'transparent'
}
}}
pointRender={labelRender}
chartArea={{ border: { width: 0 } }}
legendSettings={{ visible: false }}
title='Exchange Rate (INR per USD)'
width={Browser.isDevice ? '100%' : '75%'} loaded={onChartLoad.bind(this)}
tooltip={{
enable: true
}}>
<Inject services={[ColumnSeries, Category, Legend,
Tooltip, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' type='Column' name='Rate'
marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>
This sample uses an inverse axis in a chart to plot an exchange rate over a period of time.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to inverse an axis in chart. Here both the X and Y axis are inversed using <code>isInversed</code> property.
</p>
<p> DataLabel are used to represent individual data and its value.</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<p>
More information on inversed axis can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/api-axis.html#isInversed">documentation section</a>.
</p>
</div>
</div>
)
function onChartLoad(args: ILoadedEventArgs): void {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
function load(args: ILoadedEventArgs): void {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
}
/**
* Sample for Inversed axis
*/
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
ColumnSeries, Category, Legend, IPointRenderEventArgs,
Tooltip, DataLabel, ILoadedEventArgs, ChartTheme
} from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { Browser, EmitType } from '@syncfusion/ej2-base';
import {fabricColors, bootstrapColors, materialColors, highContrastColors, fluentColors, fluentDarkColors, bubbleFabricColors, bubbleMaterialDarkColors, bubbleMaterialColors, bubbleBootstrap5DarkColors, bubbleBootstrapColors, bubbleHighContrastColors, bubbleFluentDarkColors, bubbleFluentColors, bubbleTailwindDarkColors, bubbleTailwindColors, pointFabricColors, pointMaterialDarkColors, pointMaterialColors, pointBootstrap5DarkColors, pointBootstrapColors, pointHighContrastColors, pointFluentDarkColors, pointFluentColors, pointTailwindDarkColors, pointTailwindColors, bubbleBootstrap5Colors, pointBootstrap5Colors, pointMaterial3DarkColors, pointMaterial3Colors } from './theme-color';
export let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = pointFabricColors[args.point.index % 10];;
} else if (selectedTheme === 'material-dark') {
args.fill = pointMaterialDarkColors[args.point.index % 10];;
} else if (selectedTheme === 'material') {
args.fill = pointMaterialColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5-dark') {
args.fill = pointBootstrap5DarkColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5') {
args.fill = pointBootstrap5Colors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap4') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap-dark') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'highcontrast') {
args.fill = pointHighContrastColors[args.point.index % 10];
} else if (selectedTheme === 'fluent-dark') {
args.fill = pointFluentDarkColors[args.point.index % 10];
} else if (selectedTheme === 'fluent') {
args.fill = pointFluentColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind-dark') {
args.fill = pointTailwindDarkColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind') {
args.fill = pointTailwindColors[args.point.index % 10];
} else if (selectedTheme === 'material3-dark') {
args.fill = pointMaterial3DarkColors[args.point.index % 10];
} else if (selectedTheme === 'material3') {
args.fill = pointMaterial3Colors[args.point.index % 10];
}
};
export let data: any[] = [
{ x: '2008', y: 1.5 }, { x: '2009', y: 7.6 }, { x: '2010', y: 11 },
{ x: '2011', y: 16.2 }, { x: '2012', y: 18 }, { x: '2013', y: 21.4 },
{ x: '2014', y: 16 }, { x: '2015', y: 17.1 }
]
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
function InversedAxis() {
React.useEffect(() => {
updateSampleSection();
}, [])
return (
<div className='control-pane'>
<style>
{SAMPLE_CSS}
</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }}
primaryXAxis={{
valueType: 'Category',
opposedPosition: true,
isInversed: true,
majorGridLines: { width: 0 },
majorTickLines : {width : 0},
minorTickLines : {width : 0}
}}
load={load.bind(this)}
primaryYAxis={{
edgeLabelPlacement: 'Shift',
labelIntersectAction: 'Rotate45',
isInversed: true,
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
labelStyle: {
color: 'transparent'
}
}}
pointRender={labelRender}
chartArea={{ border: { width: 0 } }}
legendSettings={{ visible: false }}
title='Exchange Rate (INR per USD)'
width={Browser.isDevice ? '100%' : '75%'} loaded={onChartLoad.bind(this)}
tooltip={{
enable: true
}}>
<Inject services={[ColumnSeries, Category, Legend,
Tooltip, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' type='Column' name='Rate'
marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>
This sample uses an inverse axis in a chart to plot an exchange rate over a period of time.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to inverse an axis in chart. Here both the X and Y axis are inversed using <code>isInversed</code> property.
</p>
<p> DataLabel are used to represent individual data and its value.</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<p>
More information on inversed axis can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/api-axis.html#isInversed">documentation section</a>.
</p>
</div>
</div>
)
function onChartLoad(args: ILoadedEventArgs): void {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
function load(args: ILoadedEventArgs): void {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
}
export default InversedAxis;

606
src/chart/keyboard-functional.tsx
Просмотреть файл

@ -1,304 +1,304 @@
/**
* Sample for RangeColumn series
*/
import * as React from "react";
import { useEffect, useRef } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StripLine, ColumnSeries, Category, ILegendClickEventArgs, Zoom, Selection, DataLabel, Tooltip, ILoadedEventArgs, Legend, ChartTheme } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { Browser, EmitType } from '@syncfusion/ej2-base';
let materialColors: string[] = ["#00bdae", "#404041", "#357cd2", "#e56590", "#f8b883", "#70ad47", "#dd8abd", "#7f84e8", "#7bb4eb", "#ea7a57", "#404041", "#00bdae"];
let materialDarkColors: string[] = ["#9ECB08", "#56AEFF", "#C57AFF", "#61EAA9", "#EBBB3E", "#F45C5C", "#8A77FF", "#63C7FF", "#FF84B0", "#F7C928"];
let fabricColors: string[] = ["#4472c4", "#ed7d31", "#ffc000", "#70ad47", "#5b9bd5", "#c1c1c1", "#6f6fe2", "#e269ae", "#9e480e", "#997300", "#4472c4", "#70ad47", "#ffc000", "#ed7d31"];
let bootstrapColors: string[] = ["#a16ee5", "#f7ce69", "#55a5c2", "#7ddf1e", "#ff6ea6", "#7953ac", "#b99b4f", "#407c92", "#5ea716", "#b91c52"];
let highContrastColors: string[] = ["#79ECE4", "#E98272", "#DFE6B6", "#C6E773", "#BA98FF", "#FA83C3", "#00C27A", "#43ACEF", "#D681EF", "#D8BC6E"];
let bootstrap5Colors: string[] = ['#6355C7', '#FFB400', '#2196F5', '#F7523F', '#963C70', '#4BE0BC', '#FD7400', '#C9E422', '#DE3D8A', '#162F88'];
let bootstrap5DarkColors: string[] = ['#8F80F4', '#FFD46D', '#6CBDFF', '#FF7F71', '#FF6DB3', '#63F5D2', '#FCAA65', '#ECFF77', '#EF8EFF', '#5F82FD'];
let fluentColors: string[] = ['#1AC9E6', '#DA4CB2', '#EDBB40', '#AF4BCF', '#FF7266', '#1BD565', '#EE993D', '#5887FF', '#EC548D', '#7D39C0'];
let fluentDarkColors: string[] = ['#1AC9E6', '#DA4CB2', '#EDBB40', '#AF4BCF', '#FF7266', '#1BD565', '#EE993D', '#5887FF', '#EC548D', '#7D39C0'];
let tailwindColors: string[] = ["#5A61F6", "#65A30D", "#334155", "#14B8A6", "#8B5CF6", "#0369A1", "#F97316", "#9333EA", "#F59E0B", "#15803D"];
let tailwindDarkColors: string[] = ["#8B5CF6", "#22D3EE", "#F87171", "#4ADE80", "#E879F9", "#FCD34D", "#F97316", "#2DD4BF", "#F472B6", "#10B981"];
let material3Colors: string[] = ["#6355C7", "#00AEE0", "#FFB400", "#F7523F", "#963C70", "#FD7400", "#4BE0BC", "#2196F5", "#DE3D8A", "#162F88"];
let material3DarkColors: string[] = ["#4EAAFF", "#FA4EAB", "#FFF500", "#17EA58", "#38FFE7", "#FF9E45", "#B3F32F", "#B93CE4", "#FC5664", "#9B55FF"];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const KeyboardNavigation = () => {
useEffect(() => {
updateSampleSection();
}, [])
let chartInstance = useRef<ChartComponent>(null);
let data: any[] = [
{ xValue: "Jan 15", yValue: 10 },
{ xValue: "Jan 31", yValue: 15 },
{ xValue: "Feb 15", yValue: 15 },
{ xValue: "Feb 28", yValue: 20 },
{ xValue: "March 15", yValue: 20 },
{ xValue: "March 31", yValue: 25 },
{ xValue: "March", yValue: null }
];
let data1: any[] = [
{ xValue: "Apr 15", yValue: 36 },
{ xValue: "Apr 30", yValue: 48 },
{ xValue: "May 15", yValue: 43 },
{ xValue: "May 31", yValue: 59 },
{ xValue: "Jun 15", yValue: 35 },
{ xValue: "Jun 30", yValue: 50 },
{ xValue: "Jun", yValue: null }
];
let data2: any[] = [
{ xValue: "Jul 15", yValue: 30 },
{ xValue: "Jul 31", yValue: 45 },
{ xValue: "Aug 15", yValue: 30 },
{ xValue: "Aug 31", yValue: 55 },
{ xValue: "Sep 15", yValue: 57 },
{ xValue: "Sep 30", yValue: 60 },
{ xValue: "Sep", yValue: null }
];
let data3: any[] = [
{ xValue: "Oct 15", yValue: 60 },
{ xValue: "Oct 31", yValue: 70 },
{ xValue: "Nov 15", yValue: 70 },
{ xValue: "Nov 30", yValue: 70 },
{ xValue: "Dec 15", yValue: 90 },
{ xValue: "Dec 31", yValue: 100 }
];
let FontColor: string = "#353535";
let seriesIndex: number = 0;
let Segments: any = [[0, 5], [7, 12], [14, 19], [21, 26]];
const legendClick = (args: ILegendClickEventArgs): void => {
seriesIndex = 0;
getStriplineValues(args.series.name);
}
const getStriplineValues = (legendClickedName): void => {
let chart: any = chartInstance.current;
for (var i = 0; i < chart.series.length; i++) {
var name = chart.series[i].name;
var visible = name === legendClickedName ? !chart.series[i].visible : chart.series[i].visible;
if (seriesIndex > 3) {
seriesIndex = 0;
}
if (name == "Quarter 1") {
chart.primaryYAxis.stripLines[0].visible = chart.primaryYAxis.stripLines[1].visible = visible;
if (chart.primaryYAxis.stripLines[0].visible) {
chart.primaryYAxis.stripLines[0].segmentStart = chart.primaryYAxis.stripLines[1].segmentStart = Segments[seriesIndex][0];
chart.primaryYAxis.stripLines[0].segmentEnd = chart.primaryYAxis.stripLines[1].segmentEnd = Segments[seriesIndex][1];
seriesIndex++;
}
}
else if (name == "Quarter 2") {
chart.primaryYAxis.stripLines[2].visible = chart.primaryYAxis.stripLines[3].visible = visible;
if (chart.primaryYAxis.stripLines[2].visible) {
chart.primaryYAxis.stripLines[2].segmentStart = chart.primaryYAxis.stripLines[3].segmentStart = Segments[seriesIndex][0];
chart.primaryYAxis.stripLines[2].segmentEnd = chart.primaryYAxis.stripLines[3].segmentEnd = Segments[seriesIndex][1];
seriesIndex++;
}
}
else if (name == "Quarter 3") {
chart.primaryYAxis.stripLines[4].visible = chart.primaryYAxis.stripLines[5].visible = visible;
if (chart.primaryYAxis.stripLines[4].visible) {
chart.primaryYAxis.stripLines[4].segmentStart = chart.primaryYAxis.stripLines[5].segmentStart = Segments[seriesIndex][0];
chart.primaryYAxis.stripLines[4].segmentEnd = chart.primaryYAxis.stripLines[5].segmentEnd = Segments[seriesIndex][1];
seriesIndex++;
}
}
else {
chart.primaryYAxis.stripLines[6].visible = chart.primaryYAxis.stripLines[7].visible = visible;
if (chart.primaryYAxis.stripLines[6].visible) {
chart.primaryYAxis.stripLines[6].segmentStart = chart.primaryYAxis.stripLines[7].segmentStart = Segments[seriesIndex][0];
chart.primaryYAxis.stripLines[6].segmentEnd = chart.primaryYAxis.stripLines[7].segmentEnd = Segments[seriesIndex][1];
seriesIndex++;
}
}
}
chart.refresh();
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
FontColor = args.chart.theme.indexOf("Dark") > -1 || args.chart.theme.indexOf("HighContrast") > -1 ? "#F3F2F1" : "#353535";
let FillColors: any;
if (args.chart.theme === 'MaterialDark') {
FillColors = materialDarkColors;
}
else if (args.chart.theme === 'Material') {
FillColors = materialColors;
}
else if (args.chart.theme.indexOf("Fabric") > -1) {
FillColors = fabricColors;
}
else if (args.chart.theme === 'Bootstrap5Dark') {
FillColors = bootstrap5DarkColors;
}
else if (args.chart.theme === 'Bootstrap5') {
FillColors = bootstrap5Colors;
}
else if (args.chart.theme.indexOf("Bootstrap") > -1) {
FillColors = bootstrapColors;
}
else if (args.chart.theme === 'TailwindDark') {
FillColors = tailwindDarkColors;
}
else if (args.chart.theme === 'Tailwind') {
FillColors = tailwindColors;
}
else if (args.chart.theme.indexOf("HighContrast") > -1) {
FillColors = highContrastColors;
}
else if (args.chart.theme === 'FluentDark') {
FillColors = fluentDarkColors;
}
else if (args.chart.theme === 'FabricDark') {
FillColors = fabricColors;
}
else if (args.chart.theme === 'Bootstrap4') {
FillColors = bootstrapColors;
}
else if (args.chart.theme === 'Material3') {
FillColors = material3Colors;
FontColor = "#000000";
}
else if (args.chart.theme === 'Material3Dark') {
FillColors = material3DarkColors;
FontColor = "#FFFFFF";
}
else {
FillColors = fluentColors;
}
args.chart.primaryYAxis.stripLines[0].color = FillColors[0 % 10];
args.chart.primaryYAxis.stripLines[2].color = FillColors[1 % 10];
args.chart.primaryYAxis.stripLines[4].color = FillColors[2 % 10];
args.chart.primaryYAxis.stripLines[6].color = FillColors[3 % 10];
args.chart.primaryYAxis.stripLines[1].textStyle.color = FontColor;
args.chart.primaryYAxis.stripLines[3].textStyle.color = FontColor;
args.chart.primaryYAxis.stripLines[5].textStyle.color = FontColor;
args.chart.primaryYAxis.stripLines[7].textStyle.color = FontColor;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='keyboard_charts' ref={chartInstance} style={{ textAlign: "center" }} selectionMode='Point' selectionPattern='DiagonalForward' enableSideBySidePlacement={false} enableAnimation={false} legendClick={legendClick.bind(this)} load={load.bind(this)} primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 }, labelStyle: { size: "0px" }, majorTickLines: { width: 0 } }} primaryYAxis={{ maximum: 120, title: "Sales in Percentage", labelFormat: "{value}%", lineStyle: { width: 0 }, majorTickLines: { width: 0 }, stripLines: [{ isSegmented: true, start: 33, end: 35.5, visible: true, segmentStart: 0, segmentEnd: 5 }, { isSegmented: true, start: 39, end: 39.2, visible: true, text: "Jan - Mar", color: "transparent", segmentStart: 0, segmentEnd: 5 }, { isSegmented: true, start: 65, end: 67.5, visible: true, segmentStart: 7, segmentEnd: 12 }, { isSegmented: true, start: 70, end: 70.2, visible: true, text: "Apr - Jun", segmentStart: 7, segmentEnd: 12, color: "transparent" }, { isSegmented: true, start: 65, end: 67.5, visible: true, segmentStart: 14, segmentEnd: 19 }, { isSegmented: true, start: 70, end: 70.2, visible: true, text: "Jul - Sep", segmentStart: 14, segmentEnd: 19, color: "transparent" }, { isSegmented: true, start: 104, end: 106.5, visible: true, segmentStart: 21, segmentEnd: 26 }, { isSegmented: true, start: 109, end: 109.2, visible: true, text: "Oct - Dec", segmentStart: 21, segmentEnd: 26, color: "transparent" } ] }} zoomSettings={{ enableSelectionZooming: true }} title="Quarterly Sales Chart" chartArea={{ border: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} tooltip={{ enable: true }}>
<Inject services={[ColumnSeries, Selection, StripLine, DataLabel, Tooltip, Zoom, Category, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} name='Quarter 1' xName='xValue' yName='yValue' type='Column' />
<SeriesDirective dataSource={data1} name='Quarter 2' xName='xValue' yName='yValue' type='Column' />
<SeriesDirective dataSource={data2} name='Quarter 3' xName='xValue' yName='yValue' type='Column' />
<SeriesDirective dataSource={data3} name='Quarter 4' xName='xValue' yName='yValue' type='Column' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>Keyboard shortcuts can be used to interact with chart functionality. In the example below, various key combinations can be used to interact with the chart.</p>
</div>
<div id="description">
<i>The key combinations listed below can be used in the chart to initiate various actions.</i>
<ul>
<li>
<b>FOCUS ELEMENTS</b>
<ul>
<li>
<span className="key-class"><kbd>Alt</kbd> + <kbd>J</kbd></span>
<span> - Moves the focus to the chart element.</span>
</li>
<li>
<span className="key-class"><kbd>Tab</kbd></span>
<span> - Moves the focus to the next element in the chart.</span>
</li>
<li>
<span className="key-class"><kbd>Shift</kbd> + <kbd>Tab</kbd></span>
<span> - Moves the focus to the previous element in the chart.</span>
</li>
</ul>
</li>
<li>
<b>SERIES</b>
<ul>
<li>
<span className="key-class"><kbd>Down arrow</kbd></span>
<span> - Moves the focus to the data point left side from the selected point.</span>
</li>
<li>
<span className="key-class"><kbd>Up arrow</kbd></span>
<span> - Moves the focus to the data point right side from the selected point.</span>
</li>
<li>
<span className="key-class"><kbd>Left arrow</kbd></span>
<span> - Moves the focus to the next series in our chart.</span>
</li>
<li>
<span className="key-class"><kbd>Right arrow</kbd></span>
<span> - Moves the focus to the previous series in our chart.</span>
</li>
<li>
<span className="key-class"><kbd>ESC</kbd></span>
<span> - Cancel the tooltip for the data point.</span>
</li>
<li>
<span className="key-class"><kbd>Enter</kbd>/<kbd>Space</kbd></span>
<span> - Selects the data point in the series.</span>
</li>
</ul>
</li>
<li>
<b>Legend </b>
<ul>
<li>
<span className="key-class"><kbd>Down</kbd>/<kbd>Left arrow</kbd></span>
<span> - Moves the focus to the legend left side from the selected legend.</span>
</li>
<li>
<span className="key-class"><kbd>Up</kbd>/<kbd>Right arrow</kbd></span>
<span> - Moves the focus to the legend right side from the selected legend.</span>
</li>
<li>
<span className="key-class"><kbd>Enter</kbd>/<kbd>Space</kbd></span>
<span> - Toggles the visibility of the corresponding series.</span>
</li>
</ul>
</li>
<li>
<b>ZOOMING AND PANNING</b>
<ul>
<li>
<span className="key-class"><kbd>Ctrl</kbd> + <kbd>+</kbd></span>
<span> - Zoom in the chart.</span>
</li>
<li>
<span className="key-class"><kbd>Ctrl</kbd> + <kbd>-</kbd></span>
<span> - Zoom out the chart.</span>
</li>
<li>
<span className="key-class"><kbd>Down</kbd>/<kbd>Up arrow</kbd></span>
<span> - Pans the chart vertically.</span>
</li>
<li>
<span className="key-class"><kbd>Left</kbd>/<kbd>Right arrow</kbd></span>
<span> - Pans the chart horizontally.</span>
</li>
<li>
<span className="key-class"><kbd>R</kbd></span>
<span> - Reset the zoomed chart.</span>
</li>
</ul>
</li>
<li>
<b>PRINT</b>
<ul>
<li>
<span className="key-class"><kbd>Ctrl</kbd> + <kbd>P</kbd></span>
<span> - Prints the chart.</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
)
}
/**
* Sample for RangeColumn series
*/
import * as React from "react";
import { useEffect, useRef } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, StripLine, ColumnSeries, Category, ILegendClickEventArgs, Zoom, Selection, DataLabel, Tooltip, ILoadedEventArgs, Legend, ChartTheme } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { Browser, EmitType } from '@syncfusion/ej2-base';
let materialColors: string[] = ["#00bdae", "#404041", "#357cd2", "#e56590", "#f8b883", "#70ad47", "#dd8abd", "#7f84e8", "#7bb4eb", "#ea7a57", "#404041", "#00bdae"];
let materialDarkColors: string[] = ["#9ECB08", "#56AEFF", "#C57AFF", "#61EAA9", "#EBBB3E", "#F45C5C", "#8A77FF", "#63C7FF", "#FF84B0", "#F7C928"];
let fabricColors: string[] = ["#4472c4", "#ed7d31", "#ffc000", "#70ad47", "#5b9bd5", "#c1c1c1", "#6f6fe2", "#e269ae", "#9e480e", "#997300", "#4472c4", "#70ad47", "#ffc000", "#ed7d31"];
let bootstrapColors: string[] = ["#a16ee5", "#f7ce69", "#55a5c2", "#7ddf1e", "#ff6ea6", "#7953ac", "#b99b4f", "#407c92", "#5ea716", "#b91c52"];
let highContrastColors: string[] = ["#79ECE4", "#E98272", "#DFE6B6", "#C6E773", "#BA98FF", "#FA83C3", "#00C27A", "#43ACEF", "#D681EF", "#D8BC6E"];
let bootstrap5Colors: string[] = ['#6355C7', '#FFB400', '#2196F5', '#F7523F', '#963C70', '#4BE0BC', '#FD7400', '#C9E422', '#DE3D8A', '#162F88'];
let bootstrap5DarkColors: string[] = ['#8F80F4', '#FFD46D', '#6CBDFF', '#FF7F71', '#FF6DB3', '#63F5D2', '#FCAA65', '#ECFF77', '#EF8EFF', '#5F82FD'];
let fluentColors: string[] = ['#1AC9E6', '#DA4CB2', '#EDBB40', '#AF4BCF', '#FF7266', '#1BD565', '#EE993D', '#5887FF', '#EC548D', '#7D39C0'];
let fluentDarkColors: string[] = ['#1AC9E6', '#DA4CB2', '#EDBB40', '#AF4BCF', '#FF7266', '#1BD565', '#EE993D', '#5887FF', '#EC548D', '#7D39C0'];
let tailwindColors: string[] = ["#5A61F6", "#65A30D", "#334155", "#14B8A6", "#8B5CF6", "#0369A1", "#F97316", "#9333EA", "#F59E0B", "#15803D"];
let tailwindDarkColors: string[] = ["#8B5CF6", "#22D3EE", "#F87171", "#4ADE80", "#E879F9", "#FCD34D", "#F97316", "#2DD4BF", "#F472B6", "#10B981"];
let material3Colors: string[] = ["#6355C7", "#00AEE0", "#FFB400", "#F7523F", "#963C70", "#FD7400", "#4BE0BC", "#2196F5", "#DE3D8A", "#162F88"];
let material3DarkColors: string[] = ["#4EAAFF", "#FA4EAB", "#FFF500", "#17EA58", "#38FFE7", "#FF9E45", "#B3F32F", "#B93CE4", "#FC5664", "#9B55FF"];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const KeyboardNavigation = () => {
useEffect(() => {
updateSampleSection();
}, [])
let chartInstance = useRef<ChartComponent>(null);
let data: any[] = [
{ xValue: "Jan 15", yValue: 10 },
{ xValue: "Jan 31", yValue: 15 },
{ xValue: "Feb 15", yValue: 15 },
{ xValue: "Feb 28", yValue: 20 },
{ xValue: "March 15", yValue: 20 },
{ xValue: "March 31", yValue: 25 },
{ xValue: "March", yValue: null }
];
let data1: any[] = [
{ xValue: "Apr 15", yValue: 36 },
{ xValue: "Apr 30", yValue: 48 },
{ xValue: "May 15", yValue: 43 },
{ xValue: "May 31", yValue: 59 },
{ xValue: "Jun 15", yValue: 35 },
{ xValue: "Jun 30", yValue: 50 },
{ xValue: "Jun", yValue: null }
];
let data2: any[] = [
{ xValue: "Jul 15", yValue: 30 },
{ xValue: "Jul 31", yValue: 45 },
{ xValue: "Aug 15", yValue: 30 },
{ xValue: "Aug 31", yValue: 55 },
{ xValue: "Sep 15", yValue: 57 },
{ xValue: "Sep 30", yValue: 60 },
{ xValue: "Sep", yValue: null }
];
let data3: any[] = [
{ xValue: "Oct 15", yValue: 60 },
{ xValue: "Oct 31", yValue: 70 },
{ xValue: "Nov 15", yValue: 70 },
{ xValue: "Nov 30", yValue: 70 },
{ xValue: "Dec 15", yValue: 90 },
{ xValue: "Dec 31", yValue: 100 }
];
let FontColor: string = "#353535";
let seriesIndex: number = 0;
let Segments: any = [[0, 5], [7, 12], [14, 19], [21, 26]];
const legendClick = (args: ILegendClickEventArgs): void => {
seriesIndex = 0;
getStriplineValues(args.series.name);
}
const getStriplineValues = (legendClickedName): void => {
let chart: any = chartInstance.current;
for (var i = 0; i < chart.series.length; i++) {
var name = chart.series[i].name;
var visible = name === legendClickedName ? !chart.series[i].visible : chart.series[i].visible;
if (seriesIndex > 3) {
seriesIndex = 0;
}
if (name == "Quarter 1") {
chart.primaryYAxis.stripLines[0].visible = chart.primaryYAxis.stripLines[1].visible = visible;
if (chart.primaryYAxis.stripLines[0].visible) {
chart.primaryYAxis.stripLines[0].segmentStart = chart.primaryYAxis.stripLines[1].segmentStart = Segments[seriesIndex][0];
chart.primaryYAxis.stripLines[0].segmentEnd = chart.primaryYAxis.stripLines[1].segmentEnd = Segments[seriesIndex][1];
seriesIndex++;
}
}
else if (name == "Quarter 2") {
chart.primaryYAxis.stripLines[2].visible = chart.primaryYAxis.stripLines[3].visible = visible;
if (chart.primaryYAxis.stripLines[2].visible) {
chart.primaryYAxis.stripLines[2].segmentStart = chart.primaryYAxis.stripLines[3].segmentStart = Segments[seriesIndex][0];
chart.primaryYAxis.stripLines[2].segmentEnd = chart.primaryYAxis.stripLines[3].segmentEnd = Segments[seriesIndex][1];
seriesIndex++;
}
}
else if (name == "Quarter 3") {
chart.primaryYAxis.stripLines[4].visible = chart.primaryYAxis.stripLines[5].visible = visible;
if (chart.primaryYAxis.stripLines[4].visible) {
chart.primaryYAxis.stripLines[4].segmentStart = chart.primaryYAxis.stripLines[5].segmentStart = Segments[seriesIndex][0];
chart.primaryYAxis.stripLines[4].segmentEnd = chart.primaryYAxis.stripLines[5].segmentEnd = Segments[seriesIndex][1];
seriesIndex++;
}
}
else {
chart.primaryYAxis.stripLines[6].visible = chart.primaryYAxis.stripLines[7].visible = visible;
if (chart.primaryYAxis.stripLines[6].visible) {
chart.primaryYAxis.stripLines[6].segmentStart = chart.primaryYAxis.stripLines[7].segmentStart = Segments[seriesIndex][0];
chart.primaryYAxis.stripLines[6].segmentEnd = chart.primaryYAxis.stripLines[7].segmentEnd = Segments[seriesIndex][1];
seriesIndex++;
}
}
}
chart.refresh();
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
FontColor = args.chart.theme.indexOf("Dark") > -1 || args.chart.theme.indexOf("HighContrast") > -1 ? "#F3F2F1" : "#353535";
let FillColors: any;
if (args.chart.theme === 'MaterialDark') {
FillColors = materialDarkColors;
}
else if (args.chart.theme === 'Material') {
FillColors = materialColors;
}
else if (args.chart.theme.indexOf("Fabric") > -1) {
FillColors = fabricColors;
}
else if (args.chart.theme === 'Bootstrap5Dark') {
FillColors = bootstrap5DarkColors;
}
else if (args.chart.theme === 'Bootstrap5') {
FillColors = bootstrap5Colors;
}
else if (args.chart.theme.indexOf("Bootstrap") > -1) {
FillColors = bootstrapColors;
}
else if (args.chart.theme === 'TailwindDark') {
FillColors = tailwindDarkColors;
}
else if (args.chart.theme === 'Tailwind') {
FillColors = tailwindColors;
}
else if (args.chart.theme.indexOf("HighContrast") > -1) {
FillColors = highContrastColors;
}
else if (args.chart.theme === 'FluentDark') {
FillColors = fluentDarkColors;
}
else if (args.chart.theme === 'FabricDark') {
FillColors = fabricColors;
}
else if (args.chart.theme === 'Bootstrap4') {
FillColors = bootstrapColors;
}
else if (args.chart.theme === 'Material3') {
FillColors = material3Colors;
FontColor = "#000000";
}
else if (args.chart.theme === 'Material3Dark') {
FillColors = material3DarkColors;
FontColor = "#FFFFFF";
}
else {
FillColors = fluentColors;
}
args.chart.primaryYAxis.stripLines[0].color = FillColors[0 % 10];
args.chart.primaryYAxis.stripLines[2].color = FillColors[1 % 10];
args.chart.primaryYAxis.stripLines[4].color = FillColors[2 % 10];
args.chart.primaryYAxis.stripLines[6].color = FillColors[3 % 10];
args.chart.primaryYAxis.stripLines[1].textStyle.color = FontColor;
args.chart.primaryYAxis.stripLines[3].textStyle.color = FontColor;
args.chart.primaryYAxis.stripLines[5].textStyle.color = FontColor;
args.chart.primaryYAxis.stripLines[7].textStyle.color = FontColor;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='keyboard_charts' ref={chartInstance} style={{ textAlign: "center" }} selectionMode='Point' selectionPattern='DiagonalForward' enableSideBySidePlacement={false} enableAnimation={false} legendClick={legendClick.bind(this)} load={load.bind(this)} primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 }, labelStyle: { size: "0px" }, majorTickLines: { width: 0 } }} primaryYAxis={{ maximum: 120, title: "Sales in Percentage", labelFormat: "{value}%", lineStyle: { width: 0 }, majorTickLines: { width: 0 }, stripLines: [{ isSegmented: true, start: 33, end: 35.5, visible: true, segmentStart: 0, segmentEnd: 5 }, { isSegmented: true, start: 39, end: 39.2, visible: true, text: "Jan - Mar", color: "transparent", segmentStart: 0, segmentEnd: 5 }, { isSegmented: true, start: 65, end: 67.5, visible: true, segmentStart: 7, segmentEnd: 12 }, { isSegmented: true, start: 70, end: 70.2, visible: true, text: "Apr - Jun", segmentStart: 7, segmentEnd: 12, color: "transparent" }, { isSegmented: true, start: 65, end: 67.5, visible: true, segmentStart: 14, segmentEnd: 19 }, { isSegmented: true, start: 70, end: 70.2, visible: true, text: "Jul - Sep", segmentStart: 14, segmentEnd: 19, color: "transparent" }, { isSegmented: true, start: 104, end: 106.5, visible: true, segmentStart: 21, segmentEnd: 26 }, { isSegmented: true, start: 109, end: 109.2, visible: true, text: "Oct - Dec", segmentStart: 21, segmentEnd: 26, color: "transparent" } ] }} zoomSettings={{ enableSelectionZooming: true }} title="Quarterly Sales Chart" chartArea={{ border: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} tooltip={{ enable: true }}>
<Inject services={[ColumnSeries, Selection, StripLine, DataLabel, Tooltip, Zoom, Category, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} name='Quarter 1' xName='xValue' yName='yValue' type='Column' />
<SeriesDirective dataSource={data1} name='Quarter 2' xName='xValue' yName='yValue' type='Column' />
<SeriesDirective dataSource={data2} name='Quarter 3' xName='xValue' yName='yValue' type='Column' />
<SeriesDirective dataSource={data3} name='Quarter 4' xName='xValue' yName='yValue' type='Column' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>Keyboard shortcuts can be used to interact with chart functionality. In the example below, various key combinations can be used to interact with the chart.</p>
</div>
<div id="description">
<i>The key combinations listed below can be used in the chart to initiate various actions.</i>
<ul>
<li>
<b>FOCUS ELEMENTS</b>
<ul>
<li>
<span className="key-class"><kbd>Alt</kbd> + <kbd>J</kbd></span>
<span> - Moves the focus to the chart element.</span>
</li>
<li>
<span className="key-class"><kbd>Tab</kbd></span>
<span> - Moves the focus to the next element in the chart.</span>
</li>
<li>
<span className="key-class"><kbd>Shift</kbd> + <kbd>Tab</kbd></span>
<span> - Moves the focus to the previous element in the chart.</span>
</li>
</ul>
</li>
<li>
<b>SERIES</b>
<ul>
<li>
<span className="key-class"><kbd>Down arrow</kbd></span>
<span> - Moves the focus to the data point left side from the selected point.</span>
</li>
<li>
<span className="key-class"><kbd>Up arrow</kbd></span>
<span> - Moves the focus to the data point right side from the selected point.</span>
</li>
<li>
<span className="key-class"><kbd>Left arrow</kbd></span>
<span> - Moves the focus to the next series in our chart.</span>
</li>
<li>
<span className="key-class"><kbd>Right arrow</kbd></span>
<span> - Moves the focus to the previous series in our chart.</span>
</li>
<li>
<span className="key-class"><kbd>ESC</kbd></span>
<span> - Cancel the tooltip for the data point.</span>
</li>
<li>
<span className="key-class"><kbd>Enter</kbd>/<kbd>Space</kbd></span>
<span> - Selects the data point in the series.</span>
</li>
</ul>
</li>
<li>
<b>Legend </b>
<ul>
<li>
<span className="key-class"><kbd>Down</kbd>/<kbd>Left arrow</kbd></span>
<span> - Moves the focus to the legend left side from the selected legend.</span>
</li>
<li>
<span className="key-class"><kbd>Up</kbd>/<kbd>Right arrow</kbd></span>
<span> - Moves the focus to the legend right side from the selected legend.</span>
</li>
<li>
<span className="key-class"><kbd>Enter</kbd>/<kbd>Space</kbd></span>
<span> - Toggles the visibility of the corresponding series.</span>
</li>
</ul>
</li>
<li>
<b>ZOOMING AND PANNING</b>
<ul>
<li>
<span className="key-class"><kbd>Ctrl</kbd> + <kbd>+</kbd></span>
<span> - Zoom in the chart.</span>
</li>
<li>
<span className="key-class"><kbd>Ctrl</kbd> + <kbd>-</kbd></span>
<span> - Zoom out the chart.</span>
</li>
<li>
<span className="key-class"><kbd>Down</kbd>/<kbd>Up arrow</kbd></span>
<span> - Pans the chart vertically.</span>
</li>
<li>
<span className="key-class"><kbd>Left</kbd>/<kbd>Right arrow</kbd></span>
<span> - Pans the chart horizontally.</span>
</li>
<li>
<span className="key-class"><kbd>R</kbd></span>
<span> - Reset the zoomed chart.</span>
</li>
</ul>
</li>
<li>
<b>PRINT</b>
<ul>
<li>
<span className="key-class"><kbd>Ctrl</kbd> + <kbd>P</kbd></span>
<span> - Prints the chart.</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
)
}
export default KeyboardNavigation;

414
src/chart/lazy-loading-functional.tsx
Просмотреть файл

@ -1,208 +1,208 @@
/**
* Sample for Lazy Loading
*/
import * as React from "react";
import { useEffect, useRef } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme, ScrollBar, Zoom, IScrollEventArgs, LineSeries, Tooltip, DateTime, ILoadedEventArgs, Chart, Crosshair, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { Browser, Internationalization, DateFormatOptions } from '@syncfusion/ej2-base';
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import { DatePickerComponent, ChangedEventArgs } from '@syncfusion/ej2-react-calendars';
import { NumericTextBoxComponent, ChangeEventArgs as NumericChange } from '@syncfusion/ej2-react-inputs';
import { updateSampleSection } from '../common/sample-base';
import { PropertyPane } from '../common/property-pane';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
`;
const LazyLoading = () => {
useEffect(() => {
updateSampleSection();
}, [])
let chart = useRef<ChartComponent>(null);
let lazymode = useRef<DropDownListComponent>(null);
let intl: Internationalization = new Internationalization();
let minDate: DatePickerComponent; let maxDate: DatePickerComponent;
let pointslength: NumericTextBoxComponent;
let droplist: { [key: string]: Object }[] = [
{ value: 'Range' },
{ value: 'Points Length' }
];
const scrollEnd = (args: IScrollEventArgs): void => {
if (lazymode.current.value === 'Range') {
chart.current.series[0].dataSource = GetDateTimeData(args.currentRange.minimum as Date, args.currentRange.maximum as Date);
} else {
chart.current.series[0].dataSource = GetNumericData(args.currentRange.minimum as number, args.currentRange.maximum as number);
}
chart.current.dataBind();
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
const minChange = (args: ChangedEventArgs): void => {
chart.current.primaryXAxis.scrollbarSettings.range.minimum = args.value;
chart.current.refresh();
};
const maxChange = (args: ChangedEventArgs): void => {
chart.current.primaryXAxis.scrollbarSettings.range.maximum = args.value;
chart.current.refresh();
};
const pointChange = (args: NumericChange): void => {
chart.current.primaryXAxis.scrollbarSettings.pointsLength = args.value;
chart.current.refresh();
};
const modeChange = (arg: ChangeEventArgs): void => {
let min: number | Date;
let max: number | Date;
if (arg.value === 'Range') {
chart.current.primaryXAxis.valueType = 'DateTime';
min = chart.current.primaryXAxis.scrollbarSettings.range.minimum = new Date(2009, 0, 1);
max = chart.current.primaryXAxis.scrollbarSettings.range.maximum = new Date(2014, 0, 1);
chart.current.series[0].dataSource = GetDateTimeData(new Date(2009, 0, 1), new Date(2009, 8, 1));
chart.current.refresh();
minDate.enabled = true;
maxDate.enabled = true;
pointslength.enabled = false;
} else {
chart.current.primaryXAxis.valueType = 'Double';
chart.current.primaryXAxis.scrollbarSettings.range.minimum = null;
chart.current.primaryXAxis.scrollbarSettings.range.maximum = null;
chart.current.primaryXAxis.scrollbarSettings.pointsLength = 1000;
chart.current.series[0].dataSource = GetNumericData(1, 200);
chart.current.refresh();
minDate.enabled = false;
maxDate.enabled = false;
pointslength.enabled = true;
}
};
const GetDateTimeData = (start: Date, end: Date): { x: Date, y: number }[] => {
let series1: { x: Date, y: number }[] = [];
let date: number;
let value: number = 30;
let option: DateFormatOptions = {
skeleton: 'full',
type: 'dateTime'
};
let dateParser: Function = intl.getDateParser(option);
let dateFormatter: Function = intl.getDateFormat(option);
for (let i: number = 0; start <= end; i++) {
date = Date.parse(dateParser(dateFormatter(start)));
if (Math.random() > .5) {
value += (Math.random() * 10 - 5);
} else {
value -= (Math.random() * 10 - 5);
}
if (value < 0) {
value = getRandomInt(20, 40);
}
let point1: { x: Date, y: number } = { x: new Date(date), y: Math.round(value) };
new Date(start.setDate(start.getDate() + 1));
series1.push(point1);
}
return series1;
}
const GetNumericData = (start: number, end: number): { x: number, y: number }[] => {
let series1: { x: number, y: number }[] = [];
let value: number = 30;
for (let i: number = start; i <= end; i++) {
if (Math.random() > .5) {
value += (Math.random() * 10 - 5);
} else {
value -= (Math.random() * 10 - 5);
}
if (value < 0) {
value = getRandomInt(20, 40);
}
let point: { x: number, y: number } = { x: i, y: Math.round(value) };
series1.push(point);
}
return series1;
}
const getRandomInt = (min: number, max: number): number => {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
return (
<div className='control-pane' >
<style>{SAMPLE_CSS}</style>
<div className='control-section' >
<div className='col-md-8'>
<ChartComponent id='charts' ref={chart} primaryXAxis={{ valueType: 'DateTime', edgeLabelPlacement: 'Shift', skeleton: 'yMMM', skeletonType: 'Date', scrollbarSettings: { range: { minimum: new Date(2009, 0, 1), maximum: new Date(2014, 0, 1) }, enable: true, pointsLength: 1000, enableZoom: false, height: 14 } }} primaryYAxis={{ title: 'Server Load', labelFormat: '{value}MB' }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true, header: '<b>${point.x}</b>', format: 'Server load : <b>${point.y}</b>' }} legendSettings={{ visible: true }} scrollEnd={scrollEnd.bind(this)} load={load.bind(this)} title='Network Load' height='450' width='100%' >
<Inject services={[LineSeries, DateTime, Tooltip, ScrollBar, Zoom, Crosshair]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={GetDateTimeData(new Date(2009, 0, 1), new Date(2009, 8, 1))} xName='x' yName='y'
type='Line' animation={{ enable: false }}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div className='col-md-4 property-section'>
<PropertyPane title='Properties'>
<table id="property" title="Properties" style={{ width: '100%' }}>
<tr style={{ height: '50px' }}>
<td style={{ width: '40%' }}>
<div>Lazy Load </div>
</td>
<td style={{ width: '40%' }}>
<div>
<DropDownListComponent index={0} width={120} id="lazymode" ref={lazymode} style={{ "width": "auto" }} change={modeChange.bind(this)} dataSource={droplist} fields={{ text: 'value', value: 'value' }} value="Range" />
</div>
</td>
</tr>
<tr style={{ height: '50px' }}>
<td>
<div>Min </div>
</td>
<td style={{ width: '40%' }}>
<div>
<DatePickerComponent width={120} ref={min => minDate = min} id="datepickermin" style={{ "width": "auto" }} change={minChange.bind(this)} value={new Date(2009, 0, 1)} />
</div>
</td>
</tr>
<tr style={{ height: '50px' }}>
<td>
<div>Max </div>
</td>
<td style={{ width: '40%' }}>
<div>
<DatePickerComponent width={120} ref={max => maxDate = max} id="datepickermax" style={{ "width": "auto" }} change={maxChange.bind(this)} value={new Date(2014, 0, 1)} />
</div>
</td>
</tr>
<tr style={{ width: '40%' }}>
<td>
<div>Point Length </div>
</td>
<td style={{ width: '40%' }}>
<div>
<NumericTextBoxComponent min={1000} max={10000} value={1000} step={100} enabled={false} format={'n'} width={120} ref={point => pointslength = point} id="pointslength" style={{ "width": "auto" }} change={pointChange.bind(this)} />
</div>
</td>
</tr>
</table>
</PropertyPane>
</div>
</div>
<div id="action-description">
<p>This sample illustrates lazy loading feature in chart which loads data on demand.</p>
</div>
<div id="description">
<p>
In this example, you can see how to load data for the chart on demand. The chart will fire the <code>scrollEnd</code> event, and in that event, we can update the chart with the required data based on the point length and axis range. The scrollbar in the chart can be customized using the <code>height</code>, <code>trackColor</code>, <code>trackRadius</code>, <code>scrollbarRadius</code>, <code>scrollbarColor</code>, <code>enableZoom</code>, and <code>gripColor</code> properties in <code>scrollbarSettings</code>.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use lazy loading need to
inject <code>ScrollBar</code> and <code>Zoom</code> modules into <code>services</code>.
</p>
<p>
More information about the lazy loading can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/working-with-data/#lazy-loading">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Lazy Loading
*/
import * as React from "react";
import { useEffect, useRef } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme, ScrollBar, Zoom, IScrollEventArgs, LineSeries, Tooltip, DateTime, ILoadedEventArgs, Chart, Crosshair, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { Browser, Internationalization, DateFormatOptions } from '@syncfusion/ej2-base';
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import { DatePickerComponent, ChangedEventArgs } from '@syncfusion/ej2-react-calendars';
import { NumericTextBoxComponent, ChangeEventArgs as NumericChange } from '@syncfusion/ej2-react-inputs';
import { updateSampleSection } from '../common/sample-base';
import { PropertyPane } from '../common/property-pane';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
`;
const LazyLoading = () => {
useEffect(() => {
updateSampleSection();
}, [])
let chart = useRef<ChartComponent>(null);
let lazymode = useRef<DropDownListComponent>(null);
let intl: Internationalization = new Internationalization();
let minDate: DatePickerComponent; let maxDate: DatePickerComponent;
let pointslength: NumericTextBoxComponent;
let droplist: { [key: string]: Object }[] = [
{ value: 'Range' },
{ value: 'Points Length' }
];
const scrollEnd = (args: IScrollEventArgs): void => {
if (lazymode.current.value === 'Range') {
chart.current.series[0].dataSource = GetDateTimeData(args.currentRange.minimum as Date, args.currentRange.maximum as Date);
} else {
chart.current.series[0].dataSource = GetNumericData(args.currentRange.minimum as number, args.currentRange.maximum as number);
}
chart.current.dataBind();
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
const minChange = (args: ChangedEventArgs): void => {
chart.current.primaryXAxis.scrollbarSettings.range.minimum = args.value;
chart.current.refresh();
};
const maxChange = (args: ChangedEventArgs): void => {
chart.current.primaryXAxis.scrollbarSettings.range.maximum = args.value;
chart.current.refresh();
};
const pointChange = (args: NumericChange): void => {
chart.current.primaryXAxis.scrollbarSettings.pointsLength = args.value;
chart.current.refresh();
};
const modeChange = (arg: ChangeEventArgs): void => {
let min: number | Date;
let max: number | Date;
if (arg.value === 'Range') {
chart.current.primaryXAxis.valueType = 'DateTime';
min = chart.current.primaryXAxis.scrollbarSettings.range.minimum = new Date(2009, 0, 1);
max = chart.current.primaryXAxis.scrollbarSettings.range.maximum = new Date(2014, 0, 1);
chart.current.series[0].dataSource = GetDateTimeData(new Date(2009, 0, 1), new Date(2009, 8, 1));
chart.current.refresh();
minDate.enabled = true;
maxDate.enabled = true;
pointslength.enabled = false;
} else {
chart.current.primaryXAxis.valueType = 'Double';
chart.current.primaryXAxis.scrollbarSettings.range.minimum = null;
chart.current.primaryXAxis.scrollbarSettings.range.maximum = null;
chart.current.primaryXAxis.scrollbarSettings.pointsLength = 1000;
chart.current.series[0].dataSource = GetNumericData(1, 200);
chart.current.refresh();
minDate.enabled = false;
maxDate.enabled = false;
pointslength.enabled = true;
}
};
const GetDateTimeData = (start: Date, end: Date): { x: Date, y: number }[] => {
let series1: { x: Date, y: number }[] = [];
let date: number;
let value: number = 30;
let option: DateFormatOptions = {
skeleton: 'full',
type: 'dateTime'
};
let dateParser: Function = intl.getDateParser(option);
let dateFormatter: Function = intl.getDateFormat(option);
for (let i: number = 0; start <= end; i++) {
date = Date.parse(dateParser(dateFormatter(start)));
if (Math.random() > .5) {
value += (Math.random() * 10 - 5);
} else {
value -= (Math.random() * 10 - 5);
}
if (value < 0) {
value = getRandomInt(20, 40);
}
let point1: { x: Date, y: number } = { x: new Date(date), y: Math.round(value) };
new Date(start.setDate(start.getDate() + 1));
series1.push(point1);
}
return series1;
}
const GetNumericData = (start: number, end: number): { x: number, y: number }[] => {
let series1: { x: number, y: number }[] = [];
let value: number = 30;
for (let i: number = start; i <= end; i++) {
if (Math.random() > .5) {
value += (Math.random() * 10 - 5);
} else {
value -= (Math.random() * 10 - 5);
}
if (value < 0) {
value = getRandomInt(20, 40);
}
let point: { x: number, y: number } = { x: i, y: Math.round(value) };
series1.push(point);
}
return series1;
}
const getRandomInt = (min: number, max: number): number => {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
return (
<div className='control-pane' >
<style>{SAMPLE_CSS}</style>
<div className='control-section' >
<div className='col-md-8'>
<ChartComponent id='charts' ref={chart} primaryXAxis={{ valueType: 'DateTime', edgeLabelPlacement: 'Shift', skeleton: 'yMMM', skeletonType: 'Date', scrollbarSettings: { range: { minimum: new Date(2009, 0, 1), maximum: new Date(2014, 0, 1) }, enable: true, pointsLength: 1000, enableZoom: false, height: 14 } }} primaryYAxis={{ title: 'Server Load', labelFormat: '{value}MB' }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true, header: '<b>${point.x}</b>', format: 'Server load : <b>${point.y}</b>' }} legendSettings={{ visible: true }} scrollEnd={scrollEnd.bind(this)} load={load.bind(this)} title='Network Load' height='450' width='100%' >
<Inject services={[LineSeries, DateTime, Tooltip, ScrollBar, Zoom, Crosshair]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={GetDateTimeData(new Date(2009, 0, 1), new Date(2009, 8, 1))} xName='x' yName='y'
type='Line' animation={{ enable: false }}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div className='col-md-4 property-section'>
<PropertyPane title='Properties'>
<table id="property" title="Properties" style={{ width: '100%' }}>
<tr style={{ height: '50px' }}>
<td style={{ width: '40%' }}>
<div>Lazy Load </div>
</td>
<td style={{ width: '40%' }}>
<div>
<DropDownListComponent index={0} width={120} id="lazymode" ref={lazymode} style={{ "width": "auto" }} change={modeChange.bind(this)} dataSource={droplist} fields={{ text: 'value', value: 'value' }} value="Range" />
</div>
</td>
</tr>
<tr style={{ height: '50px' }}>
<td>
<div>Min </div>
</td>
<td style={{ width: '40%' }}>
<div>
<DatePickerComponent width={120} ref={min => minDate = min} id="datepickermin" style={{ "width": "auto" }} change={minChange.bind(this)} value={new Date(2009, 0, 1)} />
</div>
</td>
</tr>
<tr style={{ height: '50px' }}>
<td>
<div>Max </div>
</td>
<td style={{ width: '40%' }}>
<div>
<DatePickerComponent width={120} ref={max => maxDate = max} id="datepickermax" style={{ "width": "auto" }} change={maxChange.bind(this)} value={new Date(2014, 0, 1)} />
</div>
</td>
</tr>
<tr style={{ width: '40%' }}>
<td>
<div>Point Length </div>
</td>
<td style={{ width: '40%' }}>
<div>
<NumericTextBoxComponent min={1000} max={10000} value={1000} step={100} enabled={false} format={'n'} width={120} ref={point => pointslength = point} id="pointslength" style={{ "width": "auto" }} change={pointChange.bind(this)} />
</div>
</td>
</tr>
</table>
</PropertyPane>
</div>
</div>
<div id="action-description">
<p>This sample illustrates lazy loading feature in chart which loads data on demand.</p>
</div>
<div id="description">
<p>
In this example, you can see how to load data for the chart on demand. The chart will fire the <code>scrollEnd</code> event, and in that event, we can update the chart with the required data based on the point length and axis range. The scrollbar in the chart can be customized using the <code>height</code>, <code>trackColor</code>, <code>trackRadius</code>, <code>scrollbarRadius</code>, <code>scrollbarColor</code>, <code>enableZoom</code>, and <code>gripColor</code> properties in <code>scrollbarSettings</code>.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use lazy loading need to
inject <code>ScrollBar</code> and <code>Zoom</code> modules into <code>services</code>.
</p>
<p>
More information about the lazy loading can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/working-with-data/#lazy-loading">documentation section</a>.
</p>
</div>
</div>
)
}
export default LazyLoading;

154
src/chart/line-functional.tsx
Просмотреть файл

@ -1,78 +1,78 @@
/**
* Sample for Line Series
*/
import * as React from 'react';
import { useEffect } from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ILoadedEventArgs, ChartTheme, LineSeries, Legend, DateTime, Tooltip,Highlight } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1 = [{ x: new Date(2012, 6, 11), y: 13.5 }, { x: new Date(2013, 6, 11), y: 12.4 }, { x: new Date(2014, 6, 11), y: 12.7 }, { x: new Date(2015, 6, 11), y: 12.5 }, { x: new Date(2016, 6, 11), y: 12.7 }, { x: new Date(2017, 6, 11), y: 13.7 }, { x: new Date(2018, 6, 11), y: 13.4 }, { x: new Date(2019, 6, 11), y: 12.9 }, { x: new Date(2020, 6, 11), y: 11.0 }];
export let data2 = [{ x: new Date(2012, 6, 11), y: 5.3 },{ x: new Date(2013, 6, 11), y: 5.6 },{ x: new Date(2014, 6, 11), y: 5.9 },{ x: new Date(2015, 6, 11), y: 5.7 },{ x: new Date(2016, 6, 11), y: 7.8 },{ x: new Date(2017, 6, 11), y: 10.3 }, { x: new Date(2018, 6, 11), y: 15.5 }, { x: new Date(2019, 6, 11), y: 17.5 }, { x: new Date(2020, 6, 11), y: 19.5 }];
export let data3 = [{ x: new Date(2012, 6, 11), y: 5.6 },{ x: new Date(2013, 6, 11), y: 4.7 }, { x: new Date(2014, 6, 11), y: 4.3 },{ x: new Date(2015, 6, 11), y: 3.8 }, { x: new Date(2016, 6, 11), y: 2.8 }, { x: new Date(2017, 6, 11), y: 2.8 }, { x: new Date(2018, 6, 11), y: 4.1 }, { x: new Date(2019, 6, 11), y: 6.8 }, { x: new Date(2020, 6, 11), y: 7.1 }];
export let data4 = [{ x: new Date(2012, 6, 11), y: 6.6 }, { x: new Date(2013, 6, 11), y: 6.8 }, { x: new Date(2014, 6, 11), y: 6.5 },{ x: new Date(2015, 6, 11), y: 5.5 }, { x: new Date(2016, 6, 11), y: 5.0 }, { x: new Date(2017, 6, 11), y: 6.8 }, { x: new Date(2018, 6, 11), y: 7.8 }, { x: new Date(2019, 6, 11), y: 7.3 }, { x: new Date(2020, 6, 11), y: 8.2 }];
export let data5 = [{ x: new Date(2012, 6, 11), y: 2.3 }, { x: new Date(2013, 6, 11), y: 2.6 },{ x: new Date(2014, 6, 11), y: 4.4 },{ x: new Date(2015, 6, 11), y: 4.9 },{ x: new Date(2016, 6, 11), y: 4.8 }, { x: new Date(2017, 6, 11), y: 5.3 }, { x: new Date(2018, 6, 11), y: 6.2 }, { x: new Date(2019, 6, 11), y: 7.8 }, { x: new Date(2020, 6, 11), y: 9.3 }];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
.charts {
align :center
}`;
const Line = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let  chart:  Element  =  document.getElementById('charts');
chart.setAttribute('title',  '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'DateTime', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 }, labelFormat: 'y'}} load={load.bind(this)} primaryYAxis={{ title: 'Million Metric Tons', rangePadding: 'None', minimum: 0, maximum: 20, interval: 4, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }}} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true }} legendSettings={{enableHighlight: true}} width={Browser.isDevice ? '100%' : '75%'} title="Crude Steel Production Annual Growth" loaded={onChartLoad.bind(this)}>
<Inject services={[LineSeries, DateTime, Legend, Tooltip,Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data2} xName="x" yName="y" name="Vietnam" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Circle', isFilled: true }} type="Line"></SeriesDirective>
<SeriesDirective dataSource={data1} xName="x" yName="y" name="Canada" width={2} marker={{ visible: true, width: 6, height: 6, shape: 'Triangle', isFilled: true }} type="Line"></SeriesDirective>
<SeriesDirective dataSource={data3} xName="x" yName="y" name="Malaysia" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Diamond', isFilled: true }} type="Line"></SeriesDirective>
<SeriesDirective dataSource={data4} xName="x" yName="y" name="Egypt" width={2} marker={{ visible: true, width: 5, height: 5, shape: 'Rectangle', isFilled: true }} type="Line"></SeriesDirective>
<SeriesDirective dataSource={data5} xName="x" yName="y" name="Indonesia" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Pentagon', isFilled: true }} type="Line"></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>
This React Line Chart example represents the crude steel production annual growth data with default line series in the chart.
Data points are enhanced with marker and tooltip.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the line type charts. Line type charts are used to represent time-dependent data, showing trends in data at equal intervals.
You can use <code>dashArray</code>, <code>width</code>, <code>fill</code> properties to customize the line. <code>marker</code> and <code>dataLabel</code> are used to represent individual data and its value.
</p>
<p>Tooltips are enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use line series, we need to inject
<code>LineSeries</code> module into <code>services</code>.
</p>
<p>
More information on the line series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#line-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default Line;
/**
* Sample for Line Series
*/
import * as React from 'react';
import { useEffect } from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ILoadedEventArgs, ChartTheme, LineSeries, Legend, DateTime, Tooltip,Highlight } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1 = [{ x: new Date(2012, 6, 11), y: 13.5 }, { x: new Date(2013, 6, 11), y: 12.4 }, { x: new Date(2014, 6, 11), y: 12.7 }, { x: new Date(2015, 6, 11), y: 12.5 }, { x: new Date(2016, 6, 11), y: 12.7 }, { x: new Date(2017, 6, 11), y: 13.7 }, { x: new Date(2018, 6, 11), y: 13.4 }, { x: new Date(2019, 6, 11), y: 12.9 }, { x: new Date(2020, 6, 11), y: 11.0 }];
export let data2 = [{ x: new Date(2012, 6, 11), y: 5.3 },{ x: new Date(2013, 6, 11), y: 5.6 },{ x: new Date(2014, 6, 11), y: 5.9 },{ x: new Date(2015, 6, 11), y: 5.7 },{ x: new Date(2016, 6, 11), y: 7.8 },{ x: new Date(2017, 6, 11), y: 10.3 }, { x: new Date(2018, 6, 11), y: 15.5 }, { x: new Date(2019, 6, 11), y: 17.5 }, { x: new Date(2020, 6, 11), y: 19.5 }];
export let data3 = [{ x: new Date(2012, 6, 11), y: 5.6 },{ x: new Date(2013, 6, 11), y: 4.7 }, { x: new Date(2014, 6, 11), y: 4.3 },{ x: new Date(2015, 6, 11), y: 3.8 }, { x: new Date(2016, 6, 11), y: 2.8 }, { x: new Date(2017, 6, 11), y: 2.8 }, { x: new Date(2018, 6, 11), y: 4.1 }, { x: new Date(2019, 6, 11), y: 6.8 }, { x: new Date(2020, 6, 11), y: 7.1 }];
export let data4 = [{ x: new Date(2012, 6, 11), y: 6.6 }, { x: new Date(2013, 6, 11), y: 6.8 }, { x: new Date(2014, 6, 11), y: 6.5 },{ x: new Date(2015, 6, 11), y: 5.5 }, { x: new Date(2016, 6, 11), y: 5.0 }, { x: new Date(2017, 6, 11), y: 6.8 }, { x: new Date(2018, 6, 11), y: 7.8 }, { x: new Date(2019, 6, 11), y: 7.3 }, { x: new Date(2020, 6, 11), y: 8.2 }];
export let data5 = [{ x: new Date(2012, 6, 11), y: 2.3 }, { x: new Date(2013, 6, 11), y: 2.6 },{ x: new Date(2014, 6, 11), y: 4.4 },{ x: new Date(2015, 6, 11), y: 4.9 },{ x: new Date(2016, 6, 11), y: 4.8 }, { x: new Date(2017, 6, 11), y: 5.3 }, { x: new Date(2018, 6, 11), y: 6.2 }, { x: new Date(2019, 6, 11), y: 7.8 }, { x: new Date(2020, 6, 11), y: 9.3 }];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
.charts {
align :center
}`;
const Line = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let  chart:  Element  =  document.getElementById('charts');
chart.setAttribute('title',  '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'DateTime', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 }, labelFormat: 'y'}} load={load.bind(this)} primaryYAxis={{ title: 'Million Metric Tons', rangePadding: 'None', minimum: 0, maximum: 20, interval: 4, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }}} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true }} legendSettings={{enableHighlight: true}} width={Browser.isDevice ? '100%' : '75%'} title="Crude Steel Production Annual Growth" loaded={onChartLoad.bind(this)}>
<Inject services={[LineSeries, DateTime, Legend, Tooltip,Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data2} xName="x" yName="y" name="Vietnam" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Circle', isFilled: true }} type="Line"></SeriesDirective>
<SeriesDirective dataSource={data1} xName="x" yName="y" name="Canada" width={2} marker={{ visible: true, width: 6, height: 6, shape: 'Triangle', isFilled: true }} type="Line"></SeriesDirective>
<SeriesDirective dataSource={data3} xName="x" yName="y" name="Malaysia" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Diamond', isFilled: true }} type="Line"></SeriesDirective>
<SeriesDirective dataSource={data4} xName="x" yName="y" name="Egypt" width={2} marker={{ visible: true, width: 5, height: 5, shape: 'Rectangle', isFilled: true }} type="Line"></SeriesDirective>
<SeriesDirective dataSource={data5} xName="x" yName="y" name="Indonesia" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Pentagon', isFilled: true }} type="Line"></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>
This React Line Chart example represents the crude steel production annual growth data with default line series in the chart.
Data points are enhanced with marker and tooltip.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the line type charts. Line type charts are used to represent time-dependent data, showing trends in data at equal intervals.
You can use <code>dashArray</code>, <code>width</code>, <code>fill</code> properties to customize the line. <code>marker</code> and <code>dataLabel</code> are used to represent individual data and its value.
</p>
<p>Tooltips are enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use line series, we need to inject
<code>LineSeries</code> module into <code>services</code>.
</p>
<p>
More information on the line series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#line-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default Line;

146
src/chart/line-multi-line-functional.tsx
Просмотреть файл

@ -1,74 +1,74 @@
/**
* Sample for Area series with empty points
*/
import * as React from 'react';
import { useEffect } from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ILoadedEventArgs, ChartTheme, Inject, Tooltip, DateTime, MultiColoredLineSeries, Highlight } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { rainFallData } from './financial-data';
export let dataValues = [];
let colors = ['red', 'green', '#ff0097', 'crimson', 'blue', 'darkorange', 'deepskyblue', 'mediumvioletred', 'violet', 'peru', 'gray', 'deeppink', 'navy'];
rainFallData.map((value, index) => {
dataValues.push({
XValue: new Date(2017, -index, 1),
YValue: value.toFixed(2),
color: colors[Math.floor(index / 16)],
});
});
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Area empty sample
*/
const LineMultiLine = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'DateTime', labelFormat: 'y', intervalType: 'Years', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 } }} primaryYAxis={{ rangePadding: 'None', minimum: 4, maximum: 10, title: 'Particulate Matter(PM)', lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} tooltip={{ enable: true, shared: true, enableAnimation: false, header: '<b>Rainfall</b>', format: '${point.x} : <b>${point.y}</b>' }} legendSettings={{ visible: false }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} title="Particulate Levels in Rainfall" loaded={onChartLoad.bind(this)}>
<Inject services={[MultiColoredLineSeries, DateTime, Tooltip, Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={dataValues} width={1.5} xName="XValue" yName="YValue" name="Rainfall" type="MultiColoredLine" pointColorMapping="color"></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample shows the particulate levels in rainfall with multi-colored line series in the chart. Data points are enhanced with individual color and tooltips.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure each point in line type series.
Multi colored line charts are used to represent time-dependent data to show the trends at equal intervals with their individual colors by using <code>pointColorMapping</code>.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use multi colored line series, we need to inject
<code>MultiColoredLineSeries</code> module using
<code>Chart.Inject(MultiColoredLineSeries)</code> method.
</p>
<p>
More information on the line series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#line-charts">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Area series with empty points
*/
import * as React from 'react';
import { useEffect } from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ILoadedEventArgs, ChartTheme, Inject, Tooltip, DateTime, MultiColoredLineSeries, Highlight } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { rainFallData } from './financial-data';
export let dataValues = [];
let colors = ['red', 'green', '#ff0097', 'crimson', 'blue', 'darkorange', 'deepskyblue', 'mediumvioletred', 'violet', 'peru', 'gray', 'deeppink', 'navy'];
rainFallData.map((value, index) => {
dataValues.push({
XValue: new Date(2017, -index, 1),
YValue: value.toFixed(2),
color: colors[Math.floor(index / 16)],
});
});
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
/**
* Area empty sample
*/
const LineMultiLine = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'DateTime', labelFormat: 'y', intervalType: 'Years', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 } }} primaryYAxis={{ rangePadding: 'None', minimum: 4, maximum: 10, title: 'Particulate Matter(PM)', lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} tooltip={{ enable: true, shared: true, enableAnimation: false, header: '<b>Rainfall</b>', format: '${point.x} : <b>${point.y}</b>' }} legendSettings={{ visible: false }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} title="Particulate Levels in Rainfall" loaded={onChartLoad.bind(this)}>
<Inject services={[MultiColoredLineSeries, DateTime, Tooltip, Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={dataValues} width={1.5} xName="XValue" yName="YValue" name="Rainfall" type="MultiColoredLine" pointColorMapping="color"></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample shows the particulate levels in rainfall with multi-colored line series in the chart. Data points are enhanced with individual color and tooltips.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure each point in line type series.
Multi colored line charts are used to represent time-dependent data to show the trends at equal intervals with their individual colors by using <code>pointColorMapping</code>.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use multi colored line series, we need to inject
<code>MultiColoredLineSeries</code> module using
<code>Chart.Inject(MultiColoredLineSeries)</code> method.
</p>
<p>
More information on the line series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#line-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default LineMultiLine;

178
src/chart/line-segments-functional.tsx
Просмотреть файл

@ -1,90 +1,90 @@
/**
* Sample for Area series with empty points
*/
import * as React from 'react';
import { useEffect} from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Tooltip, ILoadedEventArgs, ChartTheme, AnnotationsDirective, AnnotationDirective, DateTime, MultiColoredLineSeries, ChartAnnotation, SegmentsDirective, SegmentDirective, Highlight } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let dataValues = [];
[
380, 410, 310, 540, 510, 330, 490, 470, 472, 460, 550, 420, 380, 430, 385,
520, 580, 420, 350, 505, 535, 410, 204, 400, 415, 408, 415, 350, 375, 500,
390, 450, 440, 350, 400, 365, 490, 400, 520, 510, 395, 380, 404, 400, 500,
390, 610, 380, 390, 420, 440, 570, 600, 380, 410, 405, 480, 320, 420, 440,
320, 280, 320, 400, 390, 460, 470, 490, 420, 480, 410, 420, 580, 410, 380,
480, 360, 650, 680, 720, 580, 480, 520, 440, 420, 430, 380, 520, 410, 540,
400, 390, 460, 470, 490, 420, 480, 470, 490, 330, 520, 480, 580, 590, 600,
310, 480, 500, 400, 508, 480, 460, 700, 705, 480, 410, 480,
].map((value, index) => {
dataValues.push({ XValue: new Date(1900 + index, 1, 1), YValue: value });
});
let content = "<div style='color:green; font-weight:bold; font-size:14px'>Medium</div>";
let content1 = "<div style='color:blue; font-weight:bold;font-size:14px'>High</div>";
let content2 = "<div style='color:red; font-weight:bold; font-size:14px'>Low</div>";
/**
* Area empty sample
*/
const LineZone = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
if (selectedTheme === 'highcontrast') {
args.chart.series[0].segments[0].color = 'red';
args.chart.series[0].segments[1].color = 'green';
args.chart.series[0].segments[2].color = 'blue';
}
};
return (
<div className="control-pane">
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'DateTime', minimum : new Date(1910, 0, 1), maximum : new Date(2010, 0, 1), edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 } }} primaryYAxis={{ labelFormat: '{value}mm', rangePadding: 'None', minimum: 200, maximum: 800, interval: 100, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} tooltip={{ enable: true, shared: true, enableAnimation: false, header: '<b>Rainfall</b>', format: '${point.x} : <b>${point.y}</b>', }} legendSettings={{ visible: false }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} title="Annual Mean Rainfall in Australia" loaded={onChartLoad.bind(this)}>
<Inject services={[MultiColoredLineSeries, ChartAnnotation, DateTime, Tooltip, Highlight]} />
<AnnotationsDirective>
<AnnotationDirective content={content} region="Series" x="19%" y= {Browser.isDevice? "42.5%" : "47%"}></AnnotationDirective>
<AnnotationDirective content={content1} region="Series" x="69%" y="10%"></AnnotationDirective>
<AnnotationDirective content={content2} region="Series" x="95%" y="84%"></AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={dataValues} xName="XValue" width={2} yName="YValue" name="Australia" type="MultiColoredLine" segmentAxis="Y">
<SegmentsDirective>
<SegmentDirective value={450} color="red"></SegmentDirective>
<SegmentDirective value={500} color="green"></SegmentDirective>
<SegmentDirective color="blue"></SegmentDirective>
</SegmentsDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample visualizes the annual mean rainfall in Australia with multi-colored line series in the chart. Data points are enhanced with segments and tooltips.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the points in a particular range by using <code>MultiColoredLine</code> series.
Points under the range can be configured with <code>color</code> and <code>dashArray</code> properties in the ChartSegment.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use line series, we need to inject
<code>MultiColoredLineSeries</code> module using
<code>Chart.Inject(MultiColoredLineSeries)</code> method.
</p>
<p>
More information on the line series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#line-charts">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Area series with empty points
*/
import * as React from 'react';
import { useEffect} from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Tooltip, ILoadedEventArgs, ChartTheme, AnnotationsDirective, AnnotationDirective, DateTime, MultiColoredLineSeries, ChartAnnotation, SegmentsDirective, SegmentDirective, Highlight } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let dataValues = [];
[
380, 410, 310, 540, 510, 330, 490, 470, 472, 460, 550, 420, 380, 430, 385,
520, 580, 420, 350, 505, 535, 410, 204, 400, 415, 408, 415, 350, 375, 500,
390, 450, 440, 350, 400, 365, 490, 400, 520, 510, 395, 380, 404, 400, 500,
390, 610, 380, 390, 420, 440, 570, 600, 380, 410, 405, 480, 320, 420, 440,
320, 280, 320, 400, 390, 460, 470, 490, 420, 480, 410, 420, 580, 410, 380,
480, 360, 650, 680, 720, 580, 480, 520, 440, 420, 430, 380, 520, 410, 540,
400, 390, 460, 470, 490, 420, 480, 470, 490, 330, 520, 480, 580, 590, 600,
310, 480, 500, 400, 508, 480, 460, 700, 705, 480, 410, 480,
].map((value, index) => {
dataValues.push({ XValue: new Date(1900 + index, 1, 1), YValue: value });
});
let content = "<div style='color:green; font-weight:bold; font-size:14px'>Medium</div>";
let content1 = "<div style='color:blue; font-weight:bold;font-size:14px'>High</div>";
let content2 = "<div style='color:red; font-weight:bold; font-size:14px'>Low</div>";
/**
* Area empty sample
*/
const LineZone = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
if (selectedTheme === 'highcontrast') {
args.chart.series[0].segments[0].color = 'red';
args.chart.series[0].segments[1].color = 'green';
args.chart.series[0].segments[2].color = 'blue';
}
};
return (
<div className="control-pane">
<div className="control-section">
<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'DateTime', minimum : new Date(1910, 0, 1), maximum : new Date(2010, 0, 1), edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 } }} primaryYAxis={{ labelFormat: '{value}mm', rangePadding: 'None', minimum: 200, maximum: 800, interval: 100, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} tooltip={{ enable: true, shared: true, enableAnimation: false, header: '<b>Rainfall</b>', format: '${point.x} : <b>${point.y}</b>', }} legendSettings={{ visible: false }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} width={Browser.isDevice ? '100%' : '75%'} title="Annual Mean Rainfall in Australia" loaded={onChartLoad.bind(this)}>
<Inject services={[MultiColoredLineSeries, ChartAnnotation, DateTime, Tooltip, Highlight]} />
<AnnotationsDirective>
<AnnotationDirective content={content} region="Series" x="19%" y= {Browser.isDevice? "42.5%" : "47%"}></AnnotationDirective>
<AnnotationDirective content={content1} region="Series" x="69%" y="10%"></AnnotationDirective>
<AnnotationDirective content={content2} region="Series" x="95%" y="84%"></AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={dataValues} xName="XValue" width={2} yName="YValue" name="Australia" type="MultiColoredLine" segmentAxis="Y">
<SegmentsDirective>
<SegmentDirective value={450} color="red"></SegmentDirective>
<SegmentDirective value={500} color="green"></SegmentDirective>
<SegmentDirective color="blue"></SegmentDirective>
</SegmentsDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample visualizes the annual mean rainfall in Australia with multi-colored line series in the chart. Data points are enhanced with segments and tooltips.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the points in a particular range by using <code>MultiColoredLine</code> series.
Points under the range can be configured with <code>color</code> and <code>dashArray</code> properties in the ChartSegment.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use line series, we need to inject
<code>MultiColoredLineSeries</code> module using
<code>Chart.Inject(MultiColoredLineSeries)</code> method.
</p>
<p>
More information on the line series can be found in this <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/chart-types/#line-charts">documentation section</a>.
</p>
</div>
</div>
)
}
export default LineZone;

162
src/chart/local-data-functional.tsx
Просмотреть файл

@ -1,82 +1,82 @@
/**
* Sample for local data
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, DateTime, Legend, ILoadedEventArgs, ChartTheme, Tooltip, Crosshair, Highlight } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const LocalData = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
const GetLocalData = (): any => {
let series1: Object[] = [];
let series2: Object[] = [];
let point1: Object;
let point2: Object;
let value: number = 80;
let value1: number = 90;
let i: number;
for (i = 1; i < 500; i++) {
if (Math.random() > .5) {
value += Math.random();
value1 += Math.random();
} else {
value -= Math.random();
value1 -= Math.random();
}
point1 = { x: new Date(1960, (i + 1), i), y: Math.round(value) };
point2 = { x: new Date(1960, (i + 1), i), y: Math.round(value1) };
series1.push(point1);
series2.push(point2);
}
return { 'series1': series1, 'series2': series2 };
}
let data1: any[] = GetLocalData().series1;
let data2: any[] = GetLocalData().series2;
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ skeleton: 'y', majorGridLines: { width: 0 }, valueType: 'DateTime', edgeLabelPlacement: 'Shift' }} load={load.bind(this)} primaryYAxis={{ title: 'Price', labelFormat: '${value}', rangePadding: 'None', lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} crosshair={{ enable: true, line: { color: 'rgba(204,214,235,0.25)', width: Browser.isDevice ? 50 : 20 }, lineType: 'Vertical' }} legendSettings={{ visible: true, enableHighlight: true }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true }} width={Browser.isDevice ? '100%' : '75%'} title='Stock Price Analysis' loaded={onChartLoad.bind(this)}>
<Inject services={[LineSeries, DateTime, Legend, Crosshair, Highlight, Tooltip]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' width={2} name='Product X' animation={{ enable: true }} type='Line' />
<SeriesDirective dataSource={data2} xName='x' yName='y' width={2} name='Product Y' animation={{ enable: true }} type='Line' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample shows the plotting of local data in a stock price analysis of two products over a period of time.</p>
</div>
<div id="description">
<p>
The Charts control supports data binding. The <code>DataSource</code> property can be assigned either as list of objects or with instance of DataManager.
</p>
<p>In this demo, the list of objects is assigned as the data source to the Charts control. The chart can be bound to IEnumerable, IQueryable, and ObservableCollection data sources.</p>
<p>
More information about the local data binding can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/working-with-data/#local-data">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for local data
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, DateTime, Legend, ILoadedEventArgs, ChartTheme, Tooltip, Crosshair, Highlight } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const LocalData = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
const GetLocalData = (): any => {
let series1: Object[] = [];
let series2: Object[] = [];
let point1: Object;
let point2: Object;
let value: number = 80;
let value1: number = 90;
let i: number;
for (i = 1; i < 500; i++) {
if (Math.random() > .5) {
value += Math.random();
value1 += Math.random();
} else {
value -= Math.random();
value1 -= Math.random();
}
point1 = { x: new Date(1960, (i + 1), i), y: Math.round(value) };
point2 = { x: new Date(1960, (i + 1), i), y: Math.round(value1) };
series1.push(point1);
series2.push(point2);
}
return { 'series1': series1, 'series2': series2 };
}
let data1: any[] = GetLocalData().series1;
let data2: any[] = GetLocalData().series2;
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ skeleton: 'y', majorGridLines: { width: 0 }, valueType: 'DateTime', edgeLabelPlacement: 'Shift' }} load={load.bind(this)} primaryYAxis={{ title: 'Price', labelFormat: '${value}', rangePadding: 'None', lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} crosshair={{ enable: true, line: { color: 'rgba(204,214,235,0.25)', width: Browser.isDevice ? 50 : 20 }, lineType: 'Vertical' }} legendSettings={{ visible: true, enableHighlight: true }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true }} width={Browser.isDevice ? '100%' : '75%'} title='Stock Price Analysis' loaded={onChartLoad.bind(this)}>
<Inject services={[LineSeries, DateTime, Legend, Crosshair, Highlight, Tooltip]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' width={2} name='Product X' animation={{ enable: true }} type='Line' />
<SeriesDirective dataSource={data2} xName='x' yName='y' width={2} name='Product Y' animation={{ enable: true }} type='Line' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample shows the plotting of local data in a stock price analysis of two products over a period of time.</p>
</div>
<div id="description">
<p>
The Charts control supports data binding. The <code>DataSource</code> property can be assigned either as list of objects or with instance of DataManager.
</p>
<p>In this demo, the list of objects is assigned as the data source to the Charts control. The chart can be bound to IEnumerable, IQueryable, and ObservableCollection data sources.</p>
<p>
More information about the local data binding can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/working-with-data/#local-data">documentation section</a>.
</p>
</div>
</div>
)
}
export default LocalData;

148
src/chart/log-functional.tsx
Просмотреть файл

@ -1,75 +1,75 @@
/**
* Samples for Logarithmic Axis
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { EmitType } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, DateTime, Logarithmic, Legend, Tooltip, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data: any[] = [
{ x: new Date(1995, 0, 1), y: 80 },
{ x: new Date(1996, 0, 1), y: 200 },
{ x: new Date(1997, 0, 1), y: 400 },
{ x: new Date(1998, 0, 1), y: 600 },
{ x: new Date(1999, 0, 1), y: 700 },
{ x: new Date(2000, 0, 1), y: 1400 },
{ x: new Date(2001, 0, 1), y: 2000 },
{ x: new Date(2002, 0, 1), y: 4000 },
{ x: new Date(2003, 0, 1), y: 6000 },
{ x: new Date(2004, 0, 1), y: 8000 },
{ x: new Date(2005, 0, 1), y: 11000 }];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const LogAxis = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ labelFormat: 'y', valueType: 'DateTime', edgeLabelPlacement: 'Shift' }} load={load.bind(this)} primaryYAxis={{ valueType: 'Logarithmic', edgeLabelPlacement: 'Shift', title: 'Profit', minorTicksPerInterval: 5, majorGridLines: { width: 1.5 }, minorTickLines: { width: 0, height: 4 }, minimum: 0, maximum: 100000, interval: 1, labelFormat: '${value}' }} legendSettings={{ visible: false }} width={Browser.isDevice ? '100%' : '75%'} title='Product X Growth [1995-2005]' loaded={onChartLoad.bind(this)} tooltip={{ enable: true, header: '' }}>
<Inject services={[LineSeries, DateTime, Logarithmic, Legend, Tooltip]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' name='Product X' yName='y' type='Line' width={2} marker={{ visible: true, height: 7, width: 7, isFilled: true }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample shows a logarithmic axis in a chart with data about the sales of a product between 1995 and 2005.</p>
</div>
<div id="description">
<p>
Logarithmic axis uses logarithmic scale and it is very useful in visualizing when the data has values with both lower order of magnitude (eg: 10^-6) and higher order of magnitude (eg: 10^6).
To render Logarithmic axis, set <code>valueType</code> in axis to <b>Logarithmic</b>.
</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Logarithmic axis, we need to inject
<code>Logarithmic</code> module using <code>servives</code>.
</p>
<p>
More information on the Logarithmic axis can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/logarithmic-axis/">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Samples for Logarithmic Axis
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { EmitType } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, DateTime, Logarithmic, Legend, Tooltip, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data: any[] = [
{ x: new Date(1995, 0, 1), y: 80 },
{ x: new Date(1996, 0, 1), y: 200 },
{ x: new Date(1997, 0, 1), y: 400 },
{ x: new Date(1998, 0, 1), y: 600 },
{ x: new Date(1999, 0, 1), y: 700 },
{ x: new Date(2000, 0, 1), y: 1400 },
{ x: new Date(2001, 0, 1), y: 2000 },
{ x: new Date(2002, 0, 1), y: 4000 },
{ x: new Date(2003, 0, 1), y: 6000 },
{ x: new Date(2004, 0, 1), y: 8000 },
{ x: new Date(2005, 0, 1), y: 11000 }];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const LogAxis = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ labelFormat: 'y', valueType: 'DateTime', edgeLabelPlacement: 'Shift' }} load={load.bind(this)} primaryYAxis={{ valueType: 'Logarithmic', edgeLabelPlacement: 'Shift', title: 'Profit', minorTicksPerInterval: 5, majorGridLines: { width: 1.5 }, minorTickLines: { width: 0, height: 4 }, minimum: 0, maximum: 100000, interval: 1, labelFormat: '${value}' }} legendSettings={{ visible: false }} width={Browser.isDevice ? '100%' : '75%'} title='Product X Growth [1995-2005]' loaded={onChartLoad.bind(this)} tooltip={{ enable: true, header: '' }}>
<Inject services={[LineSeries, DateTime, Logarithmic, Legend, Tooltip]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' name='Product X' yName='y' type='Line' width={2} marker={{ visible: true, height: 7, width: 7, isFilled: true }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample shows a logarithmic axis in a chart with data about the sales of a product between 1995 and 2005.</p>
</div>
<div id="description">
<p>
Logarithmic axis uses logarithmic scale and it is very useful in visualizing when the data has values with both lower order of magnitude (eg: 10^-6) and higher order of magnitude (eg: 10^6).
To render Logarithmic axis, set <code>valueType</code> in axis to <b>Logarithmic</b>.
</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Logarithmic axis, we need to inject
<code>Logarithmic</code> module using <code>servives</code>.
</p>
<p>
More information on the Logarithmic axis can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/logarithmic-axis/">documentation section</a>.
</p>
</div>
</div>
)
}
export default LogAxis;

146
src/chart/macd-functional.tsx
Просмотреть файл

@ -1,73 +1,73 @@
/**
* Sample for MACD Indicator
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, StripLinesDirective, StripLineDirective, Crosshair, LineSeries, StripLine, MacdIndicator, ColumnSeries, ChartTheme, IndicatorsDirective, IndicatorDirective, Legend } from '@syncfusion/ej2-react-charts';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const Macd = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', majorGridLines: { width: 0 }, zoomFactor: 0.2, zoomPosition: 0.6, crosshairTooltip: { enable: true } }} primaryYAxis={{ title: 'Price', labelFormat: '${value}', plotOffset: 25, minimum: 50, maximum: 170, interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 } }} tooltip={{ enable: true, shared: true }} width={Browser.isDevice ? '100%' : '75%'} crosshair={{ enable: true, lineType: 'Vertical' }} chartArea={{ border: { width: 0 } }} zoomSettings={{ enableSelectionZooming: true, mode: 'X', enablePan: true }} title='AAPL Stock Price 2012-2017' legendSettings={{visible: false}} loaded={onChartLoad.bind(this)}>
<Inject services={[CandleSeries, Category, Tooltip, DateTime,Legend, Zoom, Logarithmic, Crosshair, LineSeries, MacdIndicator, StripLine, ColumnSeries]} />
<RowsDirective>
<RowDirective height={'40%'} />
<RowDirective height={'60%'} />
</RowsDirective>
<AxesDirective>
<AxisDirective opposedPosition={true} rowIndex={0} name='secondary' majorGridLines={{ width: 0 }} lineStyle={{ width: 0 }} minimum={-3.5} maximum={3.5} interval={3.5} majorTickLines={{ width: 0 }} title='MACD'>
<StripLinesDirective>
<StripLineDirective start={-3.5} end={3.5} text='' color='black' visible={true} opacity={0.03} zIndex={'Behind'} />
</StripLinesDirective>
</AxisDirective>
</AxesDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartValues} width={2} xName='period' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={{ enable: true }} />
</SeriesCollectionDirective>
<IndicatorsDirective>
<IndicatorDirective type='Macd' period={3} fastPeriod={8} slowPeriod={5} seriesName='Apple Inc' macdType='Both' width={2} macdPositiveColor='#2ecd71' macdNegativeColor='#e74c3d' fill='#6063ff' yAxisName='secondary' />
</IndicatorsDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates a chart with candle series and a moving average convergence divergence indicator. The trackball shows information about each day’s stock, MACD line, signal line, and MACD histogram values.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure a moving average convergence divergence indicator. The moving average is based on the difference between two EMA's. This indicator often provides valuable signals for trend analysis.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use MACD Indicator, we need to inject
<code>MacdIndicator</code> module into <code>services</code>.
</p>
<p>
More information on the MACD Indicator can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/technical-indicators/#moving-average-convergence-divergence-macd">documentation section</a>.
</p>
</div>
</div >
)
}
export default Macd;
/**
* Sample for MACD Indicator
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, StripLinesDirective, StripLineDirective, Crosshair, LineSeries, StripLine, MacdIndicator, ColumnSeries, ChartTheme, IndicatorsDirective, IndicatorDirective, Legend } from '@syncfusion/ej2-react-charts';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const Macd = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', majorGridLines: { width: 0 }, zoomFactor: 0.2, zoomPosition: 0.6, crosshairTooltip: { enable: true } }} primaryYAxis={{ title: 'Price', labelFormat: '${value}', plotOffset: 25, minimum: 50, maximum: 170, interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 } }} tooltip={{ enable: true, shared: true }} width={Browser.isDevice ? '100%' : '75%'} crosshair={{ enable: true, lineType: 'Vertical' }} chartArea={{ border: { width: 0 } }} zoomSettings={{ enableSelectionZooming: true, mode: 'X', enablePan: true }} title='AAPL Stock Price 2012-2017' legendSettings={{visible: false}} loaded={onChartLoad.bind(this)}>
<Inject services={[CandleSeries, Category, Tooltip, DateTime,Legend, Zoom, Logarithmic, Crosshair, LineSeries, MacdIndicator, StripLine, ColumnSeries]} />
<RowsDirective>
<RowDirective height={'40%'} />
<RowDirective height={'60%'} />
</RowsDirective>
<AxesDirective>
<AxisDirective opposedPosition={true} rowIndex={0} name='secondary' majorGridLines={{ width: 0 }} lineStyle={{ width: 0 }} minimum={-3.5} maximum={3.5} interval={3.5} majorTickLines={{ width: 0 }} title='MACD'>
<StripLinesDirective>
<StripLineDirective start={-3.5} end={3.5} text='' color='black' visible={true} opacity={0.03} zIndex={'Behind'} />
</StripLinesDirective>
</AxisDirective>
</AxesDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartValues} width={2} xName='period' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={{ enable: true }} />
</SeriesCollectionDirective>
<IndicatorsDirective>
<IndicatorDirective type='Macd' period={3} fastPeriod={8} slowPeriod={5} seriesName='Apple Inc' macdType='Both' width={2} macdPositiveColor='#2ecd71' macdNegativeColor='#e74c3d' fill='#6063ff' yAxisName='secondary' />
</IndicatorsDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates a chart with candle series and a moving average convergence divergence indicator. The trackball shows information about each day’s stock, MACD line, signal line, and MACD histogram values.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure a moving average convergence divergence indicator. The moving average is based on the difference between two EMA's. This indicator often provides valuable signals for trend analysis.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use MACD Indicator, we need to inject
<code>MacdIndicator</code> module into <code>services</code>.
</p>
<p>
More information on the MACD Indicator can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/technical-indicators/#moving-average-convergence-divergence-macd">documentation section</a>.
</p>
</div>
</div >
)
}
export default Macd;

146
src/chart/momentum-functional.tsx
Просмотреть файл

@ -1,73 +1,73 @@
/**
* Sample for Momentum Indicator
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, StripLinesDirective, StripLineDirective, Crosshair, LineSeries, MomentumIndicator, StripLine, ChartTheme, IndicatorsDirective, IndicatorDirective, Legend } from '@syncfusion/ej2-react-charts';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const Momentum = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', majorGridLines: { width: 0 }, zoomFactor: 0.2, zoomPosition: 0.6, crosshairTooltip: { enable: true } }} primaryYAxis={{ title: 'Price', labelFormat: '${value}', plotOffset: 25, minimum: 50, maximum: 170, interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 } }} tooltip={{ enable: true, shared: true }} crosshair={{ enable: true, lineType: 'Vertical' }} chartArea={{ border: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} zoomSettings={{ enablePinchZooming: true, enableSelectionZooming: true, mode: 'X', enablePan: true }} title='AAPL Stock Price 2012-2017' legendSettings={{ visible:false }} loaded={onChartLoad.bind(this)}>
<Inject services={[CandleSeries, Category, Tooltip, DateTime, Zoom,Legend, Logarithmic, Crosshair, LineSeries, MomentumIndicator, StripLine]} />
<RowsDirective>
<RowDirective height={'40%'} />
<RowDirective height={'60%'} />
</RowsDirective>
<AxesDirective>
<AxisDirective rowIndex={0} name='secondary' opposedPosition={true} majorGridLines={{ width: 0 }} majorTickLines={{ width: 0 }} minimum={80} maximum={120} interval={20} title='Momentum' lineStyle={{ width: 0 }}>
<StripLinesDirective>
<StripLineDirective start={80} end={120} text='' color='black' visible={true} opacity={0.03} zIndex='Behind' />
</StripLinesDirective>
</AxisDirective>
</AxesDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartValues} width={2} xName='period' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={{ enable: true }} />
</SeriesCollectionDirective>
<IndicatorsDirective>
<IndicatorDirective type='Momentum' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff' period={3} animation={{ enable: true }} upperLine={{ color: '#ffb735' }} />
</IndicatorsDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates a chart with candle series and a momentum indicator. The trackball shows information about each day’s stock, signal line, and upper line values.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure a momentum indicator. This indicator shows the speed at which the price of the stock is changing. It also identifies when the price is moving upwards or downwards.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Momentum Indicator, we need to inject
<code>MomentumIndicator</code> module into <code>services</code>.
</p>
<p>
More information on the Momentum Indicator can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/technical-indicators/#momentum">documentation section</a>.
</p>
</div>
</div >
)
}
export default Momentum;
/**
* Sample for Momentum Indicator
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, RowDirective, RowsDirective, SeriesDirective, Inject, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, StripLinesDirective, StripLineDirective, Crosshair, LineSeries, MomentumIndicator, StripLine, ChartTheme, IndicatorsDirective, IndicatorDirective, Legend } from '@syncfusion/ej2-react-charts';
import { chartValues } from './financial-data';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const Momentum = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' load={load.bind(this)} style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'DateTime', majorGridLines: { width: 0 }, zoomFactor: 0.2, zoomPosition: 0.6, crosshairTooltip: { enable: true } }} primaryYAxis={{ title: 'Price', labelFormat: '${value}', plotOffset: 25, minimum: 50, maximum: 170, interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 } }} tooltip={{ enable: true, shared: true }} crosshair={{ enable: true, lineType: 'Vertical' }} chartArea={{ border: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} zoomSettings={{ enablePinchZooming: true, enableSelectionZooming: true, mode: 'X', enablePan: true }} title='AAPL Stock Price 2012-2017' legendSettings={{ visible:false }} loaded={onChartLoad.bind(this)}>
<Inject services={[CandleSeries, Category, Tooltip, DateTime, Zoom,Legend, Logarithmic, Crosshair, LineSeries, MomentumIndicator, StripLine]} />
<RowsDirective>
<RowDirective height={'40%'} />
<RowDirective height={'60%'} />
</RowsDirective>
<AxesDirective>
<AxisDirective rowIndex={0} name='secondary' opposedPosition={true} majorGridLines={{ width: 0 }} majorTickLines={{ width: 0 }} minimum={80} maximum={120} interval={20} title='Momentum' lineStyle={{ width: 0 }}>
<StripLinesDirective>
<StripLineDirective start={80} end={120} text='' color='black' visible={true} opacity={0.03} zIndex='Behind' />
</StripLinesDirective>
</AxisDirective>
</AxesDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartValues} width={2} xName='period' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' bearFillColor='#2ecd71' bullFillColor='#e74c3d' type='Candle' animation={{ enable: true }} />
</SeriesCollectionDirective>
<IndicatorsDirective>
<IndicatorDirective type='Momentum' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='#6063ff' period={3} animation={{ enable: true }} upperLine={{ color: '#ffb735' }} />
</IndicatorsDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates a chart with candle series and a momentum indicator. The trackball shows information about each day’s stock, signal line, and upper line values.</p>
</div>
<div id="description">
<p>In this example, you can see how to render and configure a momentum indicator. This indicator shows the speed at which the price of the stock is changing. It also identifies when the price is moving upwards or downwards.</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Momentum Indicator, we need to inject
<code>MomentumIndicator</code> module into <code>services</code>.
</p>
<p>
More information on the Momentum Indicator can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/technical-indicators/#momentum">documentation section</a>.
</p>
</div>
</div >
)
}
export default Momentum;

230
src/chart/multi-level-label-functional.tsx
Просмотреть файл

@ -1,116 +1,116 @@
/**
* Sample for smart axis labels
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Tooltip, DataLabel, IPointRenderEventArgs, MultiLevelLabel, ILoadedEventArgs, Category, ColumnSeries, Inject, ChartTheme } from '@syncfusion/ej2-react-charts';
import { EmitType, Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { fabricColors, bootstrapColors, materialColors, highContrastColors, fluentColors, fluentDarkColors, bubbleFabricColors, bubbleMaterialDarkColors, bubbleMaterialColors, bubbleBootstrap5DarkColors, bubbleBootstrapColors, bubbleHighContrastColors, bubbleFluentDarkColors, bubbleFluentColors, bubbleTailwindDarkColors, bubbleTailwindColors, pointFabricColors, pointMaterialDarkColors, pointMaterialColors, pointBootstrap5DarkColors, pointBootstrapColors, pointHighContrastColors, pointFluentDarkColors, pointFluentColors, pointTailwindDarkColors, pointTailwindColors, bubbleBootstrap5Colors, pointBootstrap5Colors, pointMaterial3DarkColors, pointMaterial3Colors } from './theme-color';
export let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = pointFabricColors[args.point.index % 10];;
} else if (selectedTheme === 'material-dark') {
args.fill = pointMaterialDarkColors[args.point.index % 10];;
} else if (selectedTheme === 'material') {
args.fill = pointMaterialColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5-dark') {
args.fill = pointBootstrap5DarkColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5') {
args.fill = pointBootstrap5Colors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap4') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap-dark') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'highcontrast') {
args.fill = pointHighContrastColors[args.point.index % 10];
} else if (selectedTheme === 'fluent-dark') {
args.fill = pointFluentDarkColors[args.point.index % 10];
} else if (selectedTheme === 'fluent') {
args.fill = pointFluentColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind-dark') {
args.fill = pointTailwindDarkColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind') {
args.fill = pointTailwindColors[args.point.index % 10];
} else if (selectedTheme === 'material3-dark') {
args.fill = pointMaterial3DarkColors[args.point.index % 10];
} else if (selectedTheme === 'material3') {
args.fill = pointMaterial3Colors[args.point.index % 10];
}
};
export let data1: any[] = [{ x: 'Grapes', y: 28 }, { x: 'Apples', y: 87 },
{ x: 'Pears', y: 42 }, { x: 'Grapes', y: 13 },
{ x: 'Apples', y: 13 }, { x: 'Pears', y: 10 },
{ x: 'Tomato', y: 31 }, { x: 'Potato', y: 96 },
{ x: 'Cucumber', y: 41 }, { x: 'Onion', y: 59 }];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const Multilevellabels = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section row'>
<div>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'Category', labelRotation: 90, border: { width: 1, type: 'Rectangle' }, isIndexed: true, interval: 1, majorGridLines: { width: 0 }, labelIntersectAction : Browser.isDevice ? 'Rotate90' : 'Trim', multiLevelLabels: (Browser.isDevice ? ([ { border: { type: 'Rectangle' }, categories: [{ start: -0.5, end: 2.5, text: 'In Season' }, { start: 2.5, end: 5.5, text: 'Out of Season' }, { start: 5.5, end: 7.5, text: 'In Season' }, { start: 7.5, end: 9.5, text: 'Out of Season' } ]}, { border: { type: 'Rectangle' }, textStyle: { fontWeight: 'Bold' }, categories: [{ start: -0.5, end: 5.5, text: 'Fruits' }, { start: 5.5, end: 9.5, text: 'Vegetables' }] }]) : [{ border: { type: 'Rectangle' }, categories: [{ start: -0.5, end: 0.5, text: 'Seedless' }, { start: 0.5, end: 2.5, text: 'Seeded' }, { start: 2.5, end: 3.5, text: 'Seedless' }, { start: 3.5, end: 5.5, text: 'Seeded' }, { start: 5.5, end: 6.5, text: 'Seedless' }, { start: 6.5, end: 7.5, text: 'Seeded' }, { start: 7.5, end: 8.5, text: 'Seedless' }, { start: 8.5, end: 9.5, text: 'Seeded' } ]}, { border: { type: 'Rectangle' }, categories: [{ start: -0.5, end: 2.5, text: 'In Season' }, { start: 2.5, end: 5.5, text: 'Out of Season' }, { start: 5.5, end: 7.5, text: 'In Season' }, { start: 7.5, end: 9.5, text: 'Out of Season' } ]}, { border: { type: 'Rectangle' }, textStyle: { fontWeight: 'Bold' }, categories: [{ start: -0.5, end: 5.5, text: 'Fruits' }, { start: 5.5, end: 9.5, text: 'Vegetables' }] }]) }} width={Browser.isDevice ? '100%' : '75%'} chartArea={{ border: { width: 0 } }} primaryYAxis={{ minimum: 0, maximum: 120, interval: 30, majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' } }} load={load.bind(this)} pointRender={pointRender} title="Fruits and Vegetables - Season" loaded={onChartLoad.bind(this)} legendSettings={{ visible: false }} tooltip={{ enable: false }}>
<Inject services={[Category, Category, ColumnSeries, Tooltip, DataLabel, MultiLevelLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' type='Column' marker={{ dataLabel: { visible: true, position: 'Outer' } }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
<div id="action-description">
<p>This example shows multilevel labels in the chart axis. We can add layers of labels to the axis using start and end range values.</p>
</div>
<div id="description">
<p>
In this example, you can see how to group axis labels.
You can customize text in each level by using <code>alignment</code>, <code>overflow</code>, <code>textSytle</code> and <code>border</code> properties.
</p>
<p>
Axis labels in each level can be arranged smartly using <code>overflow</code> property.
</p>
<ul>
<li><code>Trim</code> - Trim the label when it intersect.</li>
<li><code>Wrap</code> - Wrap the label when it intersect.</li>
<li><code>None</code> - Shows all the labels.</li>
</ul>
<p>
Border of the axis labels can be customized by using <code>type</code> property.
</p>
<ul>
<li><code>Rectangle</code></li>
<li><code>Brace</code></li>
<li><code>WithoutTopBorder</code></li>
<li><code>WithoutTopandBottomBorder</code></li>
<li><code>CurlyBrace</code></li>
<li><code>withoutBorder</code>.</li>
</ul>
<p>
More information on the multi level labels can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/axis-labels/">documentation section</a>.
</p>
</div>
</div >
)
}
/**
* Sample for smart axis labels
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Tooltip, DataLabel, IPointRenderEventArgs, MultiLevelLabel, ILoadedEventArgs, Category, ColumnSeries, Inject, ChartTheme } from '@syncfusion/ej2-react-charts';
import { EmitType, Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { fabricColors, bootstrapColors, materialColors, highContrastColors, fluentColors, fluentDarkColors, bubbleFabricColors, bubbleMaterialDarkColors, bubbleMaterialColors, bubbleBootstrap5DarkColors, bubbleBootstrapColors, bubbleHighContrastColors, bubbleFluentDarkColors, bubbleFluentColors, bubbleTailwindDarkColors, bubbleTailwindColors, pointFabricColors, pointMaterialDarkColors, pointMaterialColors, pointBootstrap5DarkColors, pointBootstrapColors, pointHighContrastColors, pointFluentDarkColors, pointFluentColors, pointTailwindDarkColors, pointTailwindColors, bubbleBootstrap5Colors, pointBootstrap5Colors, pointMaterial3DarkColors, pointMaterial3Colors } from './theme-color';
export let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = pointFabricColors[args.point.index % 10];;
} else if (selectedTheme === 'material-dark') {
args.fill = pointMaterialDarkColors[args.point.index % 10];;
} else if (selectedTheme === 'material') {
args.fill = pointMaterialColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5-dark') {
args.fill = pointBootstrap5DarkColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5') {
args.fill = pointBootstrap5Colors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap4') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap-dark') {
args.fill = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'highcontrast') {
args.fill = pointHighContrastColors[args.point.index % 10];
} else if (selectedTheme === 'fluent-dark') {
args.fill = pointFluentDarkColors[args.point.index % 10];
} else if (selectedTheme === 'fluent') {
args.fill = pointFluentColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind-dark') {
args.fill = pointTailwindDarkColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind') {
args.fill = pointTailwindColors[args.point.index % 10];
} else if (selectedTheme === 'material3-dark') {
args.fill = pointMaterial3DarkColors[args.point.index % 10];
} else if (selectedTheme === 'material3') {
args.fill = pointMaterial3Colors[args.point.index % 10];
}
};
export let data1: any[] = [{ x: 'Grapes', y: 28 }, { x: 'Apples', y: 87 },
{ x: 'Pears', y: 42 }, { x: 'Grapes', y: 13 },
{ x: 'Apples', y: 13 }, { x: 'Pears', y: 10 },
{ x: 'Tomato', y: 31 }, { x: 'Potato', y: 96 },
{ x: 'Cucumber', y: 41 }, { x: 'Onion', y: 59 }];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const Multilevellabels = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section row'>
<div>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'Category', labelRotation: 90, border: { width: 1, type: 'Rectangle' }, isIndexed: true, interval: 1, majorGridLines: { width: 0 }, labelIntersectAction : Browser.isDevice ? 'Rotate90' : 'Trim', multiLevelLabels: (Browser.isDevice ? ([ { border: { type: 'Rectangle' }, categories: [{ start: -0.5, end: 2.5, text: 'In Season' }, { start: 2.5, end: 5.5, text: 'Out of Season' }, { start: 5.5, end: 7.5, text: 'In Season' }, { start: 7.5, end: 9.5, text: 'Out of Season' } ]}, { border: { type: 'Rectangle' }, textStyle: { fontWeight: 'Bold' }, categories: [{ start: -0.5, end: 5.5, text: 'Fruits' }, { start: 5.5, end: 9.5, text: 'Vegetables' }] }]) : [{ border: { type: 'Rectangle' }, categories: [{ start: -0.5, end: 0.5, text: 'Seedless' }, { start: 0.5, end: 2.5, text: 'Seeded' }, { start: 2.5, end: 3.5, text: 'Seedless' }, { start: 3.5, end: 5.5, text: 'Seeded' }, { start: 5.5, end: 6.5, text: 'Seedless' }, { start: 6.5, end: 7.5, text: 'Seeded' }, { start: 7.5, end: 8.5, text: 'Seedless' }, { start: 8.5, end: 9.5, text: 'Seeded' } ]}, { border: { type: 'Rectangle' }, categories: [{ start: -0.5, end: 2.5, text: 'In Season' }, { start: 2.5, end: 5.5, text: 'Out of Season' }, { start: 5.5, end: 7.5, text: 'In Season' }, { start: 7.5, end: 9.5, text: 'Out of Season' } ]}, { border: { type: 'Rectangle' }, textStyle: { fontWeight: 'Bold' }, categories: [{ start: -0.5, end: 5.5, text: 'Fruits' }, { start: 5.5, end: 9.5, text: 'Vegetables' }] }]) }} width={Browser.isDevice ? '100%' : '75%'} chartArea={{ border: { width: 0 } }} primaryYAxis={{ minimum: 0, maximum: 120, interval: 30, majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' } }} load={load.bind(this)} pointRender={pointRender} title="Fruits and Vegetables - Season" loaded={onChartLoad.bind(this)} legendSettings={{ visible: false }} tooltip={{ enable: false }}>
<Inject services={[Category, Category, ColumnSeries, Tooltip, DataLabel, MultiLevelLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' type='Column' marker={{ dataLabel: { visible: true, position: 'Outer' } }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
<div id="action-description">
<p>This example shows multilevel labels in the chart axis. We can add layers of labels to the axis using start and end range values.</p>
</div>
<div id="description">
<p>
In this example, you can see how to group axis labels.
You can customize text in each level by using <code>alignment</code>, <code>overflow</code>, <code>textSytle</code> and <code>border</code> properties.
</p>
<p>
Axis labels in each level can be arranged smartly using <code>overflow</code> property.
</p>
<ul>
<li><code>Trim</code> - Trim the label when it intersect.</li>
<li><code>Wrap</code> - Wrap the label when it intersect.</li>
<li><code>None</code> - Shows all the labels.</li>
</ul>
<p>
Border of the axis labels can be customized by using <code>type</code> property.
</p>
<ul>
<li><code>Rectangle</code></li>
<li><code>Brace</code></li>
<li><code>WithoutTopBorder</code></li>
<li><code>WithoutTopandBottomBorder</code></li>
<li><code>CurlyBrace</code></li>
<li><code>withoutBorder</code>.</li>
</ul>
<p>
More information on the multi level labels can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/axis-labels/">documentation section</a>.
</p>
</div>
</div >
)
}
export default Multilevellabels;

146
src/chart/multiple-axis-functional.tsx
Просмотреть файл

@ -1,74 +1,74 @@
/**
* Sample for multiple axis
*/
import * as React from "react";
import { useEffect, useRef } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, LineSeries, ChartAnnotation, ColumnSeries, AnnotationsDirective, AnnotationDirective, Category, Tooltip, ILoadedEventArgs, ChartTheme, SplineSeries } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1: any[] = [
{ x: 'Sun', y: 35 }, { x: 'Mon', y: 40 },
{ x: 'Tue', y: 80 }, { x: 'Wed', y: 70 }, { x: 'Thu', y: 65 }, { x: 'Fri', y: 55 },
{ x: 'Sat', y: 50 }
];
export let data2: any[] = [
{ x: 'Sun', y: 31 }, { x: 'Mon', y: 28 },
{ x: 'Tue', y: 29 }, { x: 'Wed', y: 30 }, { x: 'Thu', y: 33 }, { x: 'Fri', y: 32 },
{ x: 'Sat', y: 34 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const MultipleAxis = () => {
useEffect(() => {
updateSampleSection();
}, [])
let chartInstance = useRef<ChartComponent>(null);
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} ref={chartInstance} primaryXAxis={{ valueType: 'Category', minorGridLines: { width : 0}, majorGridLines: { width: 0 } }} primaryYAxis={{ minimum: 0, maximum: 100, interval: 20, lineStyle: { width: 0 }, labelFormat: '{value}°F' }} width={Browser.isDevice ? '100%' : '75%'} chartArea={{ border: { width: 0 } }} load={load.bind(this)} legendSettings={{ visible: false }} title='Weather Data' loaded={onChartLoad.bind(this)} tooltip={{ enable: true }}>
<Inject services={[LineSeries, ColumnSeries, Category, Tooltip, SplineSeries, ChartAnnotation]} />
<AxesDirective>
<AxisDirective majorGridLines={{ width: 0 }} rowIndex={0} opposedPosition={true} lineStyle={{ width: 0 }} minimum={24} maximum={36} interval={2} majorTickLines={{ width: 0 }} name='yAxis1' labelFormat='{value}°C' />
</AxesDirective>
<AnnotationsDirective>
<AnnotationDirective content='<div id="chart_cloud"><img src="src/chart/images/cloud.png" style={{width: "41px"; height: "41px"}}/></div>' x='Sun' y={62} coordinateUnits='Point' verticalAlignment='Top' />
<AnnotationDirective content='<div id="chart_cloud"><img src="src/chart/images/sunny.png" style={{width: "41px"; height: "41px"}}/></div>' x='Sat' y={35} coordinateUnits='Point' yAxisName='yAxis1' />
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' width={2} name='Germany' type='Column' marker={{ visible: true, width: 7, height: 7 }} />
<SeriesDirective dataSource={data2} xName='x' yName='y' name='Japan' type='Spline' marker={{ visible: true, width: 7, height: 7, isFilled: true }} yAxisName='yAxis1' width={2} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This example shows how to use a chart's multiple axes to depict temperatures in both Celsius and Fahrenheit.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure multiple axes. Use an <code>Axes</code> collection to render a secondary axis in the chart that can be bound to a specific series using <code>YAxisName</code> and <code>XAxisName</code> properties in the series. You can also customize the secondary axis similar to the primary axis.
</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<p>
More information on the multiple axis can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/axis-customization/#multiple-axis">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for multiple axis
*/
import * as React from "react";
import { useEffect, useRef } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, LineSeries, ChartAnnotation, ColumnSeries, AnnotationsDirective, AnnotationDirective, Category, Tooltip, ILoadedEventArgs, ChartTheme, SplineSeries } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1: any[] = [
{ x: 'Sun', y: 35 }, { x: 'Mon', y: 40 },
{ x: 'Tue', y: 80 }, { x: 'Wed', y: 70 }, { x: 'Thu', y: 65 }, { x: 'Fri', y: 55 },
{ x: 'Sat', y: 50 }
];
export let data2: any[] = [
{ x: 'Sun', y: 31 }, { x: 'Mon', y: 28 },
{ x: 'Tue', y: 29 }, { x: 'Wed', y: 30 }, { x: 'Thu', y: 33 }, { x: 'Fri', y: 32 },
{ x: 'Sat', y: 34 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const MultipleAxis = () => {
useEffect(() => {
updateSampleSection();
}, [])
let chartInstance = useRef<ChartComponent>(null);
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} ref={chartInstance} primaryXAxis={{ valueType: 'Category', minorGridLines: { width : 0}, majorGridLines: { width: 0 } }} primaryYAxis={{ minimum: 0, maximum: 100, interval: 20, lineStyle: { width: 0 }, labelFormat: '{value}°F' }} width={Browser.isDevice ? '100%' : '75%'} chartArea={{ border: { width: 0 } }} load={load.bind(this)} legendSettings={{ visible: false }} title='Weather Data' loaded={onChartLoad.bind(this)} tooltip={{ enable: true }}>
<Inject services={[LineSeries, ColumnSeries, Category, Tooltip, SplineSeries, ChartAnnotation]} />
<AxesDirective>
<AxisDirective majorGridLines={{ width: 0 }} rowIndex={0} opposedPosition={true} lineStyle={{ width: 0 }} minimum={24} maximum={36} interval={2} majorTickLines={{ width: 0 }} name='yAxis1' labelFormat='{value}°C' />
</AxesDirective>
<AnnotationsDirective>
<AnnotationDirective content='<div id="chart_cloud"><img src="src/chart/images/cloud.png" style={{width: "41px"; height: "41px"}}/></div>' x='Sun' y={62} coordinateUnits='Point' verticalAlignment='Top' />
<AnnotationDirective content='<div id="chart_cloud"><img src="src/chart/images/sunny.png" style={{width: "41px"; height: "41px"}}/></div>' x='Sat' y={35} coordinateUnits='Point' yAxisName='yAxis1' />
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' width={2} name='Germany' type='Column' marker={{ visible: true, width: 7, height: 7 }} />
<SeriesDirective dataSource={data2} xName='x' yName='y' name='Japan' type='Spline' marker={{ visible: true, width: 7, height: 7, isFilled: true }} yAxisName='yAxis1' width={2} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This example shows how to use a chart's multiple axes to depict temperatures in both Celsius and Fahrenheit.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure multiple axes. Use an <code>Axes</code> collection to render a secondary axis in the chart that can be bound to a specific series using <code>YAxisName</code> and <code>XAxisName</code> properties in the series. You can also customize the secondary axis similar to the primary axis.
</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<p>
More information on the multiple axis can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/axis-customization/#multiple-axis">documentation section</a>.
</p>
</div>
</div>
)
}
export default MultipleAxis;

157
src/chart/tornado-functional.tsx → src/chart/negative-stack-functional.tsx
Просмотреть файл

@ -1,77 +1,82 @@
/**
* Sample for Tornado chart
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme, Legend, Category, StackingBarSeries, Tooltip, ILoadedEventArgs, DataLabel, ITooltipRenderEventArgs, Highlight } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { Browser, EmitType } from '@syncfusion/ej2-base';
export let data: any[] = [
{ x: '4.5', y: 31, text: '31 KG' }, { x: '4.8', y: 37, text: '37 KG' },
{ x: '5.1', y: 49, text: '49 KG' }, { x: '5.4', y: 57, text: '57 KG' },
{ x: '5.7', y: 63, text: '63 KG' }, { x: '6', y: 69, text: '69 KG' }
];
export let data2: any[] = [
{ x: '4.5', y: -31, text: '31 KG' }, { x: '4.8', y: -39, text: '39 KG' },
{ x: '5.1', y: -52, text: '52 KG' }, { x: '5.4', y: -64, text: '64 KG' },
{ x: '5.7', y: -70, text: '70 KG' }, { x: '6', y: -74, text: '74 KG' }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
export let textRender: EmitType<ITooltipRenderEventArgs> = (args: ITooltipRenderEventArgs) => {
args.text = args.text.indexOf('-') > 0 ? args.text.replace('-', '') : args.text;
args.text = args.text + " " + "<b>kg</b>";
};
const NegativeStack = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'Category', title: 'Height in Inches', interval: 1, majorGridLines: { width: 0 }, majorTickLines: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} chartArea={{ border: { width: 0 } }} primaryYAxis={{ labelFormat: '{value}', title: 'Weight (kg)', lineStyle: { width: 0 }, edgeLabelPlacement: 'Shift' }} tooltipRender={textRender} legendSettings={{ position: Browser.isDevice ? 'Bottom' : 'Right', enableHighlight: true }} load={load.bind(this)} title='Height vs Weight' loaded={onChartLoad.bind(this)} tooltip={{ enable: true }}>
<Inject services={[StackingBarSeries, DataLabel, Category, Legend, Tooltip, Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} width={2} xName='x' yName='y' name='Female' columnWidth={0.5} type='StackingBar' marker={{ dataLabel: { name: 'text', visible: true, position: 'Top', font: { fontWeight: '600' } } }} />
<SeriesDirective dataSource={data2} width={2} xName='x' yName='y' name='Male' columnWidth={0.5} type='StackingBar' marker={{ dataLabel: { name: 'text', visible: true, position: 'Top', font: { fontWeight: '600' } } }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates a stacked bar chart with negative data points. Data point values are shown in data labels.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure negative values in a stacked bar chart. The stacked bar chart stacks points in the series horizontally. You can also use the <code>StackingGroup</code> property to group stacked collections based on category.
</p>
<p>
<code>Tooltips</code> are enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Stackingbar series, we need to inject
<code>StackingBarSeries</code> module into <code>services</code>.
</p>
<p>
More information on the stackingbar series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/chart-types/#bar-chart">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Negative Stack chart
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme, Legend, Category, StackingBarSeries, Tooltip, ILoadedEventArgs, DataLabel, ITooltipRenderEventArgs, Highlight, IAxisLabelRenderEventArgs } from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
import { Browser, EmitType } from '@syncfusion/ej2-base';
export let data: any[] = [
{ x: '4.5', y: 31, text: '31 KG' }, { x: '4.8', y: 37, text: '37 KG' },
{ x: '5.1', y: 49, text: '49 KG' }, { x: '5.4', y: 57, text: '57 KG' },
{ x: '5.7', y: 63, text: '63 KG' }, { x: '6', y: 69, text: '69 KG' }
];
export let data2: any[] = [
{ x: '4.5', y: -31, text: '31 KG' }, { x: '4.8', y: -39, text: '39 KG' },
{ x: '5.1', y: -52, text: '52 KG' }, { x: '5.4', y: -64, text: '64 KG' },
{ x: '5.7', y: -70, text: '70 KG' }, { x: '6', y: -74, text: '74 KG' }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
export let textRender: EmitType<ITooltipRenderEventArgs> = (args: ITooltipRenderEventArgs) => {
args.text = args.text.indexOf('-') > 0 ? args.text.replace('-', '') : args.text;
args.text = args.text + " " + "<b>kg</b>";
};
function labelRender(args: IAxisLabelRenderEventArgs): void {
if (args.value < 0) {
args.text = (-args.value).toString();
}
}
const NegativeStack = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ valueType: 'Category', title: 'Height in Inches', interval: 1, majorGridLines: { width: 0 }, majorTickLines: { width: 0 } }} width={Browser.isDevice ? '100%' : '75%'} chartArea={{ border: { width: 0 } }} primaryYAxis={{ labelFormat: '{value}', title: 'Weight (kg)', lineStyle: { width: 0 }, edgeLabelPlacement: 'Shift', rangePadding: 'Round' }} tooltipRender={textRender} axisLabelRender={labelRender.bind(this)} legendSettings={{ position: Browser.isDevice ? 'Bottom' : 'Right', enableHighlight: true }} load={load.bind(this)} title='Height vs Weight' loaded={onChartLoad.bind(this)} tooltip={{ enable: true }}>
<Inject services={[StackingBarSeries, DataLabel, Category, Legend, Tooltip, Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} width={2} xName='x' yName='y' name='Female' columnWidth={0.5} type='StackingBar' marker={{ dataLabel: { name: 'text', visible: true, position: 'Top', font: { fontWeight: '600' } } }} />
<SeriesDirective dataSource={data2} width={2} xName='x' yName='y' name='Male' columnWidth={0.5} type='StackingBar' marker={{ dataLabel: { name: 'text', visible: true, position: 'Top', font: { fontWeight: '600' } } }} />
</SeriesCollectionDirective>
</ChartComponent>
</div>
<div id="action-description">
<p>This sample illustrates a stacked bar chart with negative data points. Data point values are shown in data labels.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure negative values in a stacked bar chart. The stacked bar chart stacks points in the series horizontally. You can also use the <code>StackingGroup</code> property to group stacked collections based on category.
</p>
<p>
<code>Tooltips</code> are enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.
</p>
<br></br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Stackingbar series, we need to inject
<code>StackingBarSeries</code> module into <code>services</code>.
</p>
<p>
More information on the stackingbar series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/chart-types/#bar-chart">documentation section</a>.
</p>
</div>
</div>
)
}
export default NegativeStack;

11
src/chart/tornado.tsx → src/chart/negative-stack.tsx
Просмотреть файл

@ -1,11 +1,11 @@
/**
* Sample for Tornado chart
* Sample for Negative Stack chart
*/
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,
Legend, Category, StackingBarSeries, Tooltip, ILoadedEventArgs, DataLabel, ITooltipRenderEventArgs, Highlight
Legend, Category, StackingBarSeries, Tooltip, ILoadedEventArgs, DataLabel, ITooltipRenderEventArgs, Highlight, IAxisLabelRenderEventArgs
} from '@syncfusion/ej2-react-charts';
import { SampleBase } from '../common/sample-base';
import { Browser, EmitType } from '@syncfusion/ej2-base';
@ -28,6 +28,11 @@ export let textRender: EmitType<ITooltipRenderEventArgs> = (args: ITooltipRender
args.text = args.text.indexOf('-') > 0 ? args.text.replace('-', '') : args.text;
args.text = args.text + " " + "<b>kg</b>";
};
function labelRender(args: IAxisLabelRenderEventArgs): void {
if (args.value < 0) {
args.text = (-args.value).toString();
}
}
export class NegativeStack extends SampleBase<{}, {}> {
render() {
@ -50,9 +55,11 @@ export class NegativeStack extends SampleBase<{}, {}> {
primaryYAxis={{
labelFormat: '{value}',
title: 'Weight (kg)',
rangePadding: 'Round',
lineStyle: { width: 0 },
}}
tooltipRender={textRender}
axisLabelRender={labelRender.bind(this)}
legendSettings={{ position: Browser.isDevice ? 'Auto' : 'Right' , enableHighlight :true}}
load={this.load.bind(this)}
title='Height vs Weight' loaded={this.onChartLoad.bind(this)}

144
src/chart/numeric-axis-functional.tsx
Просмотреть файл

@ -1,73 +1,73 @@
/**
* Sample for numeric axis
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, DataLabel, ILoadedEventArgs, Tooltip, Legend, ChartTheme, Highlight } from '@syncfusion/ej2-react-charts';
import { Browser, EmitType } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1: any[] = [
{ x: 16, y: 2 }, { x: 17, y: 14 },
{ x: 18, y: 7 }, { x: 19, y: 7 },
{ x: 20, y: 10 }
];
export let data2: any[] = [
{ x: 16, y: 7 }, { x: 17, y: 7 },
{ x: 18, y: 11 }, { x: 19, y: 8 },
{ x: 20, y: 24 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const Numeric = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
if (selectedTheme === 'highcontrast') {
args.chart.series[0].fill = '#57BCFF';
args.chart.series[1].fill = '#E58184';
}
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ minimum: 15, maximum: 21, interval: 1, majorGridLines: { width: 0 } }} load={load.bind(this)} primaryYAxis={{ majorGridLines: { width: 0 }, majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' } }} legendSettings={{ visible: true, enableHighlight: true }} width={Browser.isDevice ? '100%' : '75%'} chartArea={{ border: { width: 0 } }} title='England vs West Indies' loaded={onChartLoad.bind(this)} tooltip={{ enable: true, format: '${point.x}th Over : <b>${point.y} Runs</b>' }}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Highlight ]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' fill='#1e90ff' marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600' } } }} name='England' type='Column' width={2} columnSpacing= {0.1} />
<SeriesDirective dataSource={data2} xName='x' yName='y' fill='#b22222' marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600' } } }} name='West Indies' type='Column' width={2} columnSpacing= {0.1} />
</SeriesCollectionDirective>
</ChartComponent>
<div style={{ float: 'right', marginRight: '10px' }}>Source: &nbsp;
<a href="http://www.espncricinfo.com/icc-world-twenty20-2016/engine/current/match/951373.html" target="_blank">www.espncricinfo.com</a>
</div>
</div>
<div id="action-description">
<p>This sample shows the numeric axis in a chart with England and West Indies cricket match data.</p>
</div>
<div id="description">
<p>
You can use a numeric axis to represent numeric value data in a chart. To render a numeric axis, set the <code>ValueType</code> in axis to <b>Double</b>.
</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<p>
More information on the Numeric axis can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/numeric-axis/">documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for numeric axis
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, DataLabel, ILoadedEventArgs, Tooltip, Legend, ChartTheme, Highlight } from '@syncfusion/ej2-react-charts';
import { Browser, EmitType } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
export let data1: any[] = [
{ x: 16, y: 2 }, { x: 17, y: 14 },
{ x: 18, y: 7 }, { x: 19, y: 7 },
{ x: 20, y: 10 }
];
export let data2: any[] = [
{ x: 16, y: 7 }, { x: 17, y: 7 },
{ x: 18, y: 11 }, { x: 19, y: 8 },
{ x: 20, y: 24 }
];
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
const Numeric = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
if (selectedTheme === 'highcontrast') {
args.chart.series[0].fill = '#57BCFF';
args.chart.series[1].fill = '#E58184';
}
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ minimum: 15, maximum: 21, interval: 1, majorGridLines: { width: 0 } }} load={load.bind(this)} primaryYAxis={{ majorGridLines: { width: 0 }, majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' } }} legendSettings={{ visible: true, enableHighlight: true }} width={Browser.isDevice ? '100%' : '75%'} chartArea={{ border: { width: 0 } }} title='England vs West Indies' loaded={onChartLoad.bind(this)} tooltip={{ enable: true, format: '${point.x}th Over : <b>${point.y} Runs</b>' }}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Highlight ]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' fill='#1e90ff' marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600' } } }} name='England' type='Column' width={2} columnSpacing= {0.1} />
<SeriesDirective dataSource={data2} xName='x' yName='y' fill='#b22222' marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600' } } }} name='West Indies' type='Column' width={2} columnSpacing= {0.1} />
</SeriesCollectionDirective>
</ChartComponent>
<div style={{ float: 'right', marginRight: '10px' }}>Source: &nbsp;
<a href="http://www.espncricinfo.com/icc-world-twenty20-2016/engine/current/match/951373.html" target="_blank">www.espncricinfo.com</a>
</div>
</div>
<div id="action-description">
<p>This sample shows the numeric axis in a chart with England and West Indies cricket match data.</p>
</div>
<div id="description">
<p>
You can use a numeric axis to represent numeric value data in a chart. To render a numeric axis, set the <code>ValueType</code> in axis to <b>Double</b>.
</p>
<p>Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<p>
More information on the Numeric axis can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/numeric-axis/">documentation section</a>.
</p>
</div>
</div>
)
}
export default Numeric;

578
src/chart/overview-functional.tsx
Просмотреть файл

@ -1,289 +1,289 @@
import { DashboardLayoutComponent, PanelsDirective, PanelDirective, } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
import { EmitType } from '@syncfusion/ej2-base';
import { Browser } from '@syncfusion/ej2-base';
import {
AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationLegend, PieSeries, AccumulationTooltip, ColumnSeries, SeriesCollectionDirective, SeriesDirective,
AccumulationDataLabel, ChartComponent, Legend, Category, Tooltip,Highlight, DataLabel, SplineAreaSeries, IAxisLabelRenderEventArgs, ChartAnnotation, AnnotationsDirective, AnnotationDirective, ILegendRenderEventArgs, ILoadedEventArgs, ChartTheme, IAccLoadedEventArgs, AccumulationTheme, IAccPointRenderEventArgs,
} from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.e-dashboardlayout {
padding: 20px;
z-index: 0;
}
.e-panel {
cursor: auto !important;
}
.e-panel-header{
border: none !important;
background-color: backgroundcolor;
height: 50px !important;
display: flex;
align-items: center;
justify-content: center;
}
.template{
height: 100%;
width: 100%;
}
#control-container {
padding: 0px !important;
}
#gradient-chart stop {
stop-color: #2485FA;
}
#gradient-chart1 stop{
stop-color: #FEC200;
}
.ellipse[id*=_Trackball_1] {
stroke-width: 1 !important;
}
.e-chart-focused:focus {
outline: none !important;
}
.title{
font-size: 15px;
font-weight: bold;
color: #737373;
}
}`;
let argument: IArguments;
function OverView() {
React.useEffect(() => {
updateSampleSection();
}, [])
function columnTemplate() {
return (
<div className="template" >
<ChartComponent style={{ "height": "100%", "width": "100%", }} primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 },labelStyle:{size:'11px'} }} load={load.bind(this)} primaryYAxis={{
minimum:0, maximum:100, majorTickLines: { width: 0 }, labelFormat: '{value}%', lineStyle: { width: 0 }, labelStyle:{size:'11px'}, titleStyle:{size:'13px'} ,
}} tooltip={{ enable: false }} legendSettings={{ padding:5, shapeHeight:8, shapeWidth:8}} chartArea={{ border: { width: 0 } }} >
<Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]}></Inject>
<SeriesCollectionDirective>
<SeriesDirective type="Column" dataSource={[
{ Period: '2017', Percentage: 60 },
{ Period: '2018', Percentage: 56 },
{ Period: '2019', Percentage: 71 },
{ Period: '2020', Percentage: 85 },
{ Period: '2021', Percentage: 73 },]}
name="Online" xName="Period" yName="Percentage" fill='#2485FA' marker={{ dataLabel: { visible: true, position: 'Middle', font: { color: 'white' } } }}></SeriesDirective>
<SeriesDirective type="Column" dataSource={[
{ Period: '2017', Percentage: 40 },
{ Period: '2018', Percentage: 44 },
{ Period: '2019', Percentage: 29 },
{ Period: '2020', Percentage: 15 },
{ Period: '2021', Percentage: 27 },]}
name="Retail" xName="Period" yName="Percentage" fill='#FEC200' marker={{ dataLabel: { visible: true, position: 'Middle', font: { color: 'white' } } }}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
);
}
function splineTemplate() {
return (
<div className="template" >
<ChartComponent style={{ "height": "100%", "width": "100%" }}
primaryXAxis={{ majorTickLines: { width: 0 },valueType: "Category", majorGridLines: { width: 0 } ,labelStyle:{size:'11px'}}}
load={load.bind(this)}
primaryYAxis={{
majorTickLines: { width: 0 },
minimum: 0, maximum: 12000, edgeLabelPlacement: 'Shift', labelFormat: '${value}', lineStyle: { width: 0 },labelStyle:{size:'11px'},titleStyle:{size:'13px'}
}}
legendSettings={{enableHighlight:true }} tooltip={{ enable: true , shared: true, enableMarker:false}} chartArea={{ border: { width: 0 } }} >
<Inject services={[SplineAreaSeries, Legend, Tooltip, Category, ChartAnnotation, Highlight]}></Inject>
<SeriesCollectionDirective>
<SeriesDirective type="SplineArea" dataSource={[{ period : 'Jan', percentage : 3600 }, { period: 'Feb', percentage: 6200 },
{ period: 'Mar', percentage: 8100 }, { period: 'Apr', percentage: 5900 },
{ period: 'May', percentage: 8900 }, { period: 'Jun', percentage: 7200 },
{ period: 'Jul', percentage: 4300 }, { period: 'Aug', percentage: 4600 },
{ period: 'Sep', percentage: 5500 }, { period: 'Oct', percentage: 6350 },
{ period: 'Nov', percentage: 5700 }, { period: 'Dec', percentage: 8000 },]} xName="period" yName="percentage" name="Online" width={2.5} marker={{ visible: false }} fill="#2485FA" opacity={0.3} border={{width:2.75, color:'#2485FA'}}></SeriesDirective>
<SeriesDirective type="SplineArea" dataSource={[{ period : 'Jan', percentage : 6400 }, { period: 'Feb', percentage: 5300 },
{ period: 'Mar', percentage: 4900 }, { period: 'Apr', percentage: 5300 },
{ period: 'May', percentage: 4200 }, { period: 'Jun', percentage: 6500 },
{ period: 'Jul', percentage: 7900 }, { period: 'Aug', percentage: 3800 },
{ period: 'Sep', percentage: 6800 }, { period: 'Oct', percentage: 3400 },
{ period: 'Nov', percentage: 6400 }, { period: 'Dec', percentage: 6800 },]} xName="period" yName="percentage" name="Retail" width={2.5} marker={{ visible: false }} fill="#FEC200" opacity={0.3} border={{width:2.75, color:'#FEC200'}}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
);
}
function pieTemplate() {
return (
<div className="template" >
<AccumulationChartComponent style={{ "height": "100%", "width": "100%" }}
legendSettings={{ visible:false }} load={accumulationload.bind(this)} tooltip={{ enable: true , format:"${point.tooltip}"}} pointRender={onPointRender.bind(this)} enableSmartLabels={true} enableBorderOnMouseMove={false}>
<Inject services={[PieSeries, AccumulationTooltip, AccumulationDataLabel, AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel]}></Inject>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective tooltipMappingName='Product' dataLabel={{
visible: true,
position: 'Outside', name: 'r',
connectorStyle:{length:'10px',type:'Curve'}
}} type="Pie" palettes={["#61EFCD", "#CDDE1F", "#FEC200", "#CA765A", "#2485FA", "#F57D7D", "#C152D2",
"#8854D9", "#3D4EB8", "#00BCD7", "#4472c4", "#ed7d31", "#ffc000", "#70ad47", "#5b9bd5", "#c1c1c1", "#6f6fe2", "#e269ae", "#9e480e", "#997300"]} dataSource={
[
{ Product: "TV : 30 (12%)", Percentage: 12 , r: "TV, 30 <br>12%"},
{ Product: "PC : 20 (8%)", Percentage: 8 , r: "PC, 20 <br>8%"},
{ Product: "Laptop : 40 (16%)", Percentage: 16 , r: "Laptop, 40 <br>16%"},
{ Product: "Mobile : 90 (36%)", Percentage: 36 , r: "Mobile, 90 <br>36%"},
{ Product: "Camera : 27 (11%)", Percentage: 11 , r: "Camera, 27 <br>11%"},]}
xName="Product" yName="Percentage" innerRadius="40%" border={{width:3,color:'transparent'}}></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
)
}
let cellSpacing: number[] = [15, 15];
return (<div>
<div className="control-section">
<style>{SAMPLE_CSS}</style>
<DashboardLayoutComponent cellSpacing={cellSpacing} cellAspectRatio={Browser.isDevice ? 1 : 0.8} columns={Browser.isDevice ? 2 : 8}>
<PanelsDirective>
<PanelDirective sizeX={Browser.isDevice ? 1: 5} sizeY={Browser.isDevice ? 1 : 2} row={0} col={0} content={columnTemplate.bind(this) as any} header='<div class="title" id="header1";>Sales - Yearly Performance</div>'></PanelDirective>
<PanelDirective sizeX={Browser.isDevice ? 1 : 3} sizeY={Browser.isDevice ? 1 : 2} row={0} col={ Browser.isDevice ? 1 : 5} content={pieTemplate.bind(this) as any} header='<div class="title" id="header2";>Product Wise Sales - 2021</div>'></PanelDirective>
<PanelDirective sizeX={Browser.isDevice ? 2 : 8} sizeY={Browser.isDevice ? 1 : 3} row={Browser.isDevice ? 1 : 4} col={0} content={splineTemplate.bind(this) as any} header='<div class="title" id="header3";>Monthly Sales for 2021</div>'></PanelDirective>
</PanelsDirective>
</DashboardLayoutComponent>
</div>
<div id="action-description">
<p>
This sample shows an overview of <a target="_blank" href="https://www.syncfusion.com/react-components/react-charts" >React Charts</a> that allows users to visualize data easily and take decisions based on it. There are different types of charts to create feature rich apps.
</p>
</div>
<div id="description">
<p>
The React Chart is a well-crafted charting component to visualize data.In this example, you will see how to render and configure line, column, and pie charts with different features such as highlight, legend, tooltip, and annotation . The Chart uses <code>SfDataManager</code>, which supports both RESTful JSON data services binding and IEnumerable binding.
</p>
<p>
More information on the React Chart types can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/chart-types/line">documentation section</a>.
</p>
</div>
<svg style={{ height: '0' }}>
<defs>
<linearGradient id="gradient-chart" style={{opacity: 0.75}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="gradient-chart1" style={{opacity: 0.75}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
</defs>
</svg>
</div>
);
function load(args: ILoadedEventArgs): void {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
args.chart.series[0].fill = 'url(#' + 'gradient-chart)';
args.chart.series[1].fill = 'url(#' + 'gradient-chart1)';
};
function accumulationload(args: IAccLoadedEventArgs): void {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as AccumulationTheme;
};
function onPointRender(args: IAccPointRenderEventArgs): void {
let selectedTheme: string = location.hash.split('/')[1];
let layoutColor: string;
selectedTheme = selectedTheme ? selectedTheme : 'Material';
if (selectedTheme.indexOf('dark') > -1) {
if (selectedTheme.indexOf('material') > -1) {
args.border.color = '#303030';
layoutColor= '#303030' ;
}
else if (selectedTheme.indexOf('bootstrap5') > -1) {
args.border.color = '#212529';
layoutColor= '#212529' ;
}
else if (selectedTheme.indexOf('bootstrap') > -1) {
args.border.color = '#1A1A1A';
layoutColor= '#1A1A1A' ;
}
else if (selectedTheme.indexOf('fabric') > -1) {
args.border.color = '#201f1f';
layoutColor= '#201f1f' ;
}
else if (selectedTheme.indexOf('fluent') > -1) {
args.border.color = '#252423';
layoutColor= '#252423' ;
}
else if (selectedTheme.indexOf('bootstrap') > -1) {
args.border.color = '#1A1A1A';
layoutColor= '#1A1A1A' ;
}
else if (selectedTheme.indexOf('tailwind') > -1) {
args.border.color = '#1F2937';
layoutColor= '#1F2937' ;
}
else {
args.border.color = '#222222';
layoutColor= '#222222' ;
}
}
else if (selectedTheme.indexOf('highcontrast') > -1) {
args.border.color = '#000000';
layoutColor= '#000000' ;
}
else {
args.border.color = '#FFFFFF';
layoutColor= '#FFFFFF' ;
}
if(selectedTheme.indexOf('highcontrast') > -1 || selectedTheme.indexOf('dark') > -1)
{
let element = document.querySelector('#header1') as HTMLElement
element.style.color='#F3F2F1';
let element1 = document.querySelector('#header2') as HTMLElement
element1.style.color='#F3F2F1';
let element2 = document.querySelector('#header3') as HTMLElement
element2.style.color='#F3F2F1';
}
let element = document.querySelector('#layout_0template') as HTMLElement
element.style.background=layoutColor;
let elementBody = document.querySelector('#layout_0_body') as HTMLElement
elementBody.style.background=layoutColor;
let element1 = document.querySelector('#layout_1template') as HTMLElement
element1.style.background=layoutColor;
let elementBody1 = document.querySelector('#layout_1_body') as HTMLElement
elementBody1.style.background=layoutColor;
let element2 = document.querySelector('#layout_2template') as HTMLElement
element2.style.background=layoutColor;
let elementBody2 = document.querySelector('#layout_2_body') as HTMLElement
elementBody2.style.background=layoutColor;
};
}
export default OverView;
import { DashboardLayoutComponent, PanelsDirective, PanelDirective, } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
import { EmitType } from '@syncfusion/ej2-base';
import { Browser } from '@syncfusion/ej2-base';
import {
AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationLegend, PieSeries, AccumulationTooltip, ColumnSeries, SeriesCollectionDirective, SeriesDirective,
AccumulationDataLabel, ChartComponent, Legend, Category, Tooltip,Highlight, DataLabel, SplineAreaSeries, IAxisLabelRenderEventArgs, ChartAnnotation, AnnotationsDirective, AnnotationDirective, ILegendRenderEventArgs, ILoadedEventArgs, ChartTheme, IAccLoadedEventArgs, AccumulationTheme, IAccPointRenderEventArgs,
} from '@syncfusion/ej2-react-charts';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.e-dashboardlayout {
padding: 20px;
z-index: 0;
}
.e-panel {
cursor: auto !important;
}
.e-panel-header{
border: none !important;
background-color: backgroundcolor;
height: 50px !important;
display: flex;
align-items: center;
justify-content: center;
}
.template{
height: 100%;
width: 100%;
}
#control-container {
padding: 0px !important;
}
#gradient-chart stop {
stop-color: #2485FA;
}
#gradient-chart1 stop{
stop-color: #FEC200;
}
.ellipse[id*=_Trackball_1] {
stroke-width: 1 !important;
}
.e-chart-focused:focus {
outline: none !important;
}
.title{
font-size: 15px;
font-weight: bold;
color: #737373;
}
}`;
let argument: IArguments;
function OverView() {
React.useEffect(() => {
updateSampleSection();
}, [])
function columnTemplate() {
return (
<div className="template" >
<ChartComponent style={{ "height": "100%", "width": "100%", }} primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 },labelStyle:{size:'11px'} }} load={load.bind(this)} primaryYAxis={{
minimum:0, maximum:100, majorTickLines: { width: 0 }, labelFormat: '{value}%', lineStyle: { width: 0 }, labelStyle:{size:'11px'}, titleStyle:{size:'13px'} ,
}} tooltip={{ enable: false }} legendSettings={{ padding:5, shapeHeight:8, shapeWidth:8}} chartArea={{ border: { width: 0 } }} >
<Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]}></Inject>
<SeriesCollectionDirective>
<SeriesDirective type="Column" dataSource={[
{ Period: '2017', Percentage: 60 },
{ Period: '2018', Percentage: 56 },
{ Period: '2019', Percentage: 71 },
{ Period: '2020', Percentage: 85 },
{ Period: '2021', Percentage: 73 },]}
name="Online" xName="Period" yName="Percentage" fill='#2485FA' marker={{ dataLabel: { visible: true, position: 'Middle', font: { color: 'white' } } }}></SeriesDirective>
<SeriesDirective type="Column" dataSource={[
{ Period: '2017', Percentage: 40 },
{ Period: '2018', Percentage: 44 },
{ Period: '2019', Percentage: 29 },
{ Period: '2020', Percentage: 15 },
{ Period: '2021', Percentage: 27 },]}
name="Retail" xName="Period" yName="Percentage" fill='#FEC200' marker={{ dataLabel: { visible: true, position: 'Middle', font: { color: 'white' } } }}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
);
}
function splineTemplate() {
return (
<div className="template" >
<ChartComponent style={{ "height": "100%", "width": "100%" }}
primaryXAxis={{ majorTickLines: { width: 0 },valueType: "Category", majorGridLines: { width: 0 } ,labelStyle:{size:'11px'}}}
load={load.bind(this)}
primaryYAxis={{
majorTickLines: { width: 0 },
minimum: 0, maximum: 12000, edgeLabelPlacement: 'Shift', labelFormat: '${value}', lineStyle: { width: 0 },labelStyle:{size:'11px'},titleStyle:{size:'13px'}
}}
legendSettings={{enableHighlight:true }} tooltip={{ enable: true , shared: true, enableMarker:false}} chartArea={{ border: { width: 0 } }} >
<Inject services={[SplineAreaSeries, Legend, Tooltip, Category, ChartAnnotation, Highlight]}></Inject>
<SeriesCollectionDirective>
<SeriesDirective type="SplineArea" dataSource={[{ period : 'Jan', percentage : 3600 }, { period: 'Feb', percentage: 6200 },
{ period: 'Mar', percentage: 8100 }, { period: 'Apr', percentage: 5900 },
{ period: 'May', percentage: 8900 }, { period: 'Jun', percentage: 7200 },
{ period: 'Jul', percentage: 4300 }, { period: 'Aug', percentage: 4600 },
{ period: 'Sep', percentage: 5500 }, { period: 'Oct', percentage: 6350 },
{ period: 'Nov', percentage: 5700 }, { period: 'Dec', percentage: 8000 },]} xName="period" yName="percentage" name="Online" width={2.5} marker={{ visible: false }} fill="#2485FA" opacity={0.3} border={{width:2.75, color:'#2485FA'}}></SeriesDirective>
<SeriesDirective type="SplineArea" dataSource={[{ period : 'Jan', percentage : 6400 }, { period: 'Feb', percentage: 5300 },
{ period: 'Mar', percentage: 4900 }, { period: 'Apr', percentage: 5300 },
{ period: 'May', percentage: 4200 }, { period: 'Jun', percentage: 6500 },
{ period: 'Jul', percentage: 7900 }, { period: 'Aug', percentage: 3800 },
{ period: 'Sep', percentage: 6800 }, { period: 'Oct', percentage: 3400 },
{ period: 'Nov', percentage: 6400 }, { period: 'Dec', percentage: 6800 },]} xName="period" yName="percentage" name="Retail" width={2.5} marker={{ visible: false }} fill="#FEC200" opacity={0.3} border={{width:2.75, color:'#FEC200'}}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
</div>
);
}
function pieTemplate() {
return (
<div className="template" >
<AccumulationChartComponent style={{ "height": "100%", "width": "100%" }}
legendSettings={{ visible:false }} load={accumulationload.bind(this)} tooltip={{ enable: true , format:"${point.tooltip}"}} pointRender={onPointRender.bind(this)} enableSmartLabels={true} enableBorderOnMouseMove={false}>
<Inject services={[PieSeries, AccumulationTooltip, AccumulationDataLabel, AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel]}></Inject>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective tooltipMappingName='Product' dataLabel={{
visible: true,
position: 'Outside', name: 'r',
connectorStyle:{length:'10px',type:'Curve'}
}} type="Pie" palettes={["#61EFCD", "#CDDE1F", "#FEC200", "#CA765A", "#2485FA", "#F57D7D", "#C152D2",
"#8854D9", "#3D4EB8", "#00BCD7", "#4472c4", "#ed7d31", "#ffc000", "#70ad47", "#5b9bd5", "#c1c1c1", "#6f6fe2", "#e269ae", "#9e480e", "#997300"]} dataSource={
[
{ Product: "TV : 30 (12%)", Percentage: 12 , r: "TV, 30 <br>12%"},
{ Product: "PC : 20 (8%)", Percentage: 8 , r: "PC, 20 <br>8%"},
{ Product: "Laptop : 40 (16%)", Percentage: 16 , r: "Laptop, 40 <br>16%"},
{ Product: "Mobile : 90 (36%)", Percentage: 36 , r: "Mobile, 90 <br>36%"},
{ Product: "Camera : 27 (11%)", Percentage: 11 , r: "Camera, 27 <br>11%"},]}
xName="Product" yName="Percentage" innerRadius="40%" border={{width:3,color:'transparent'}}></AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
)
}
let cellSpacing: number[] = [15, 15];
return (<div>
<div className="control-section">
<style>{SAMPLE_CSS}</style>
<DashboardLayoutComponent cellSpacing={cellSpacing} cellAspectRatio={Browser.isDevice ? 1 : 0.8} columns={Browser.isDevice ? 2 : 8}>
<PanelsDirective>
<PanelDirective sizeX={Browser.isDevice ? 1: 5} sizeY={Browser.isDevice ? 1 : 2} row={0} col={0} content={columnTemplate.bind(this) as any} header='<div class="title" id="header1";>Sales - Yearly Performance</div>'></PanelDirective>
<PanelDirective sizeX={Browser.isDevice ? 1 : 3} sizeY={Browser.isDevice ? 1 : 2} row={0} col={ Browser.isDevice ? 1 : 5} content={pieTemplate.bind(this) as any} header='<div class="title" id="header2";>Product Wise Sales - 2021</div>'></PanelDirective>
<PanelDirective sizeX={Browser.isDevice ? 2 : 8} sizeY={Browser.isDevice ? 1 : 3} row={Browser.isDevice ? 1 : 4} col={0} content={splineTemplate.bind(this) as any} header='<div class="title" id="header3";>Monthly Sales for 2021</div>'></PanelDirective>
</PanelsDirective>
</DashboardLayoutComponent>
</div>
<div id="action-description">
<p>
This sample shows an overview of <a target="_blank" href="https://www.syncfusion.com/react-components/react-charts" >React Charts</a> that allows users to visualize data easily and take decisions based on it. There are different types of charts to create feature rich apps.
</p>
</div>
<div id="description">
<p>
The React Chart is a well-crafted charting component to visualize data.In this example, you will see how to render and configure line, column, and pie charts with different features such as highlight, legend, tooltip, and annotation . The Chart uses <code>SfDataManager</code>, which supports both RESTful JSON data services binding and IEnumerable binding.
</p>
<p>
More information on the React Chart types can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/chart-types/line">documentation section</a>.
</p>
</div>
<svg style={{ height: '0' }}>
<defs>
<linearGradient id="gradient-chart" style={{opacity: 0.75}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="gradient-chart1" style={{opacity: 0.75}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
</defs>
</svg>
</div>
);
function load(args: ILoadedEventArgs): void {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
args.chart.series[0].fill = 'url(#' + 'gradient-chart)';
args.chart.series[1].fill = 'url(#' + 'gradient-chart1)';
};
function accumulationload(args: IAccLoadedEventArgs): void {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as AccumulationTheme;
};
function onPointRender(args: IAccPointRenderEventArgs): void {
let selectedTheme: string = location.hash.split('/')[1];
let layoutColor: string;
selectedTheme = selectedTheme ? selectedTheme : 'Material';
if (selectedTheme.indexOf('dark') > -1) {
if (selectedTheme.indexOf('material') > -1) {
args.border.color = '#303030';
layoutColor= '#303030' ;
}
else if (selectedTheme.indexOf('bootstrap5') > -1) {
args.border.color = '#212529';
layoutColor= '#212529' ;
}
else if (selectedTheme.indexOf('bootstrap') > -1) {
args.border.color = '#1A1A1A';
layoutColor= '#1A1A1A' ;
}
else if (selectedTheme.indexOf('fabric') > -1) {
args.border.color = '#201f1f';
layoutColor= '#201f1f' ;
}
else if (selectedTheme.indexOf('fluent') > -1) {
args.border.color = '#252423';
layoutColor= '#252423' ;
}
else if (selectedTheme.indexOf('bootstrap') > -1) {
args.border.color = '#1A1A1A';
layoutColor= '#1A1A1A' ;
}
else if (selectedTheme.indexOf('tailwind') > -1) {
args.border.color = '#1F2937';
layoutColor= '#1F2937' ;
}
else {
args.border.color = '#222222';
layoutColor= '#222222' ;
}
}
else if (selectedTheme.indexOf('highcontrast') > -1) {
args.border.color = '#000000';
layoutColor= '#000000' ;
}
else {
args.border.color = '#FFFFFF';
layoutColor= '#FFFFFF' ;
}
if(selectedTheme.indexOf('highcontrast') > -1 || selectedTheme.indexOf('dark') > -1)
{
let element = document.querySelector('#header1') as HTMLElement
element.style.color='#F3F2F1';
let element1 = document.querySelector('#header2') as HTMLElement
element1.style.color='#F3F2F1';
let element2 = document.querySelector('#header3') as HTMLElement
element2.style.color='#F3F2F1';
}
let element = document.querySelector('#layout_0template') as HTMLElement
element.style.background=layoutColor;
let elementBody = document.querySelector('#layout_0_body') as HTMLElement
elementBody.style.background=layoutColor;
let element1 = document.querySelector('#layout_1template') as HTMLElement
element1.style.background=layoutColor;
let elementBody1 = document.querySelector('#layout_1_body') as HTMLElement
elementBody1.style.background=layoutColor;
let element2 = document.querySelector('#layout_2template') as HTMLElement
element2.style.background=layoutColor;
let elementBody2 = document.querySelector('#layout_2_body') as HTMLElement
elementBody2.style.background=layoutColor;
};
}
export default OverView;

150
src/chart/pareto-functional.tsx
Просмотреть файл

@ -1,76 +1,76 @@
/**
* Sample for Pareto chart
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ILoadedEventArgs, Category, ColumnSeries, Legend, Tooltip, ChartTheme, ParetoSeries, LineSeries, Highlight } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
export let data1: any[] = [
{ x: 'Button Defect', y: 23 }, { x: 'Pocket Defect', y: 16 },
{ x: 'Collar Defect ', y: 10 }, { x: 'Cuff Defect', y: 7 },
{ x: 'Sleeve Defect', y: 6 }, { x: 'Other Defect', y: 2}
];
const ParetoChart = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
if (selectedTheme === 'material3') {
args.chart.series[0].paretoOptions.fill = '#F7523F';
args.chart.series[0].paretoOptions.marker.fill = '#F7523F';
}
else {
args.chart.series[0].paretoOptions.fill = null;
args.chart.series[0].paretoOptions.marker.fill = null;
}
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ interval: 1, valueType: 'Category', majorGridLines: { width: 0 },labelIntersectAction: 'Rotate45', minorGridLines: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, lineStyle: { width: 0 }, }} primaryYAxis={{ title: 'Frequency of Occurence', minimum: 0, maximum: 25, interval: 5, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, majorGridLines: { width: 1 }, minorGridLines: { width: 1 }, minorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} title='Defects in Shirts' loaded={onChartLoad.bind(this)} legendSettings={{ visible: true, enableHighlight: true }} width={Browser.isDevice ? '100%' : '75%'} tooltip={{ enable: true, shared: true, format: '${series.name} : <b>${point.y}</b>' }}>
<Inject services={[Category, ColumnSeries, Legend, LineSeries, Tooltip, ParetoSeries, Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' name='Defect' type='Pareto' width={2} opacity= {0.75} columnWidth= {0.4} cornerRadius= {{ topLeft: Browser.isDevice? 4 : 6, topRight: Browser.isDevice ? 4 : 6 }} paretoOptions={{ marker: { visible: true, isFilled: true, width: 7, height: 7 }, dashArray: '3,2', width: 2 }} />
</SeriesCollectionDirective>
</ChartComponent>
<div style={{ float: 'right', marginRight: '10px' }}></div>
</div>
<div id="action-description">
<p>This sample visualizes the defects in shirts with default pareto series in the chart. Data points are enhanced with marker and tooltip.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure a pareto chart. The pareto chart is used to find the cumulative values of the data in different categories. It is a combination of the column and line series. The initial values are shown in the column chart and the cumulative values are shown in the line chart.
</p>
<p>
The line series in the pareto chart can be customized using the <code>fill</code>, <code>dashArray</code>, <code>width</code>, and <code>marker</code> properties in <code>paretoOptions</code>. Additionally, the secondary axis in the pareto chart can be shown or hidden using the <code>showAxis</code> property in <code>paretoOptions</code>.
</p>
<p><code>Tooltip</code> is enabled in this example. To see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br />
<p style={{ "fontWeight": 500 }}><b>Injecting Module</b></p>
<p>
In this example, we have used pareto series with the help of column and line series. To use pareto feature, we need to inject <code>ParetoSeries</code>, <code>ColumnSeries</code> and <code>LineSeries</code> modules into <code>services</code>.
</p>
<p>
More information on the pareto series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/chart-types/pareto"> documentation section</a>.
</p>
</div>
</div>
)
}
/**
* Sample for Pareto chart
*/
import * as React from "react";
import { useEffect } from 'react';
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ILoadedEventArgs, Category, ColumnSeries, Legend, Tooltip, ChartTheme, ParetoSeries, LineSeries, Highlight } from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
export let data1: any[] = [
{ x: 'Button Defect', y: 23 }, { x: 'Pocket Defect', y: 16 },
{ x: 'Collar Defect ', y: 10 }, { x: 'Cuff Defect', y: 7 },
{ x: 'Sleeve Defect', y: 6 }, { x: 'Other Defect', y: 2}
];
const ParetoChart = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
if (selectedTheme === 'material3') {
args.chart.series[0].paretoOptions.fill = '#F7523F';
args.chart.series[0].paretoOptions.marker.fill = '#F7523F';
}
else {
args.chart.series[0].paretoOptions.fill = null;
args.chart.series[0].paretoOptions.marker.fill = null;
}
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ interval: 1, valueType: 'Category', majorGridLines: { width: 0 },labelIntersectAction: 'Rotate45', minorGridLines: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, lineStyle: { width: 0 }, }} primaryYAxis={{ title: 'Frequency of Occurence', minimum: 0, maximum: 25, interval: 5, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, majorGridLines: { width: 1 }, minorGridLines: { width: 1 }, minorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 } }} load={load.bind(this)} title='Defects in Shirts' loaded={onChartLoad.bind(this)} legendSettings={{ visible: true, enableHighlight: true }} width={Browser.isDevice ? '100%' : '75%'} tooltip={{ enable: true, shared: true, format: '${series.name} : <b>${point.y}</b>' }}>
<Inject services={[Category, ColumnSeries, Legend, LineSeries, Tooltip, ParetoSeries, Highlight]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data1} xName='x' yName='y' name='Defect' type='Pareto' width={2} opacity= {0.75} columnWidth= {0.4} cornerRadius= {{ topLeft: Browser.isDevice? 4 : 6, topRight: Browser.isDevice ? 4 : 6 }} paretoOptions={{ marker: { visible: true, isFilled: true, width: 7, height: 7 }, dashArray: '3,2', width: 2 }} />
</SeriesCollectionDirective>
</ChartComponent>
<div style={{ float: 'right', marginRight: '10px' }}></div>
</div>
<div id="action-description">
<p>This sample visualizes the defects in shirts with default pareto series in the chart. Data points are enhanced with marker and tooltip.</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure a pareto chart. The pareto chart is used to find the cumulative values of the data in different categories. It is a combination of the column and line series. The initial values are shown in the column chart and the cumulative values are shown in the line chart.
</p>
<p>
The line series in the pareto chart can be customized using the <code>fill</code>, <code>dashArray</code>, <code>width</code>, and <code>marker</code> properties in <code>paretoOptions</code>. Additionally, the secondary axis in the pareto chart can be shown or hidden using the <code>showAxis</code> property in <code>paretoOptions</code>.
</p>
<p><code>Tooltip</code> is enabled in this example. To see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br />
<p style={{ "fontWeight": 500 }}><b>Injecting Module</b></p>
<p>
In this example, we have used pareto series with the help of column and line series. To use pareto feature, we need to inject <code>ParetoSeries</code>, <code>ColumnSeries</code> and <code>LineSeries</code> modules into <code>services</code>.
</p>
<p>
More information on the pareto series can be found in this <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/chart/chart-types/pareto"> documentation section</a>.
</p>
</div>
</div>
)
}
export default ParetoChart;

426
src/chart/performance-functional.tsx
Просмотреть файл

@ -1,214 +1,214 @@
/**
* Sample for Chart performance
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AreaSeries, ILoadedEventArgs, ChartTheme, DateTime, Legend } from '@syncfusion/ej2-react-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
const SAMPLE_CSS = `
#material-gradient-chart stop {
stop-color: #00bdae;
}
#fabric-gradient-chart stop {
stop-color: #4472c4;
}
#bootstrap-gradient-chart stop {
stop-color: #a16ee5;
}
#bootstrap4-gradient-chart stop {
stop-color: #a16ee5;
}
#fluent-gradient-chart stop {
stop-color: #1AC9E6;
}
#fluent-dark-gradient-chart stop {
stop-color: #1AC9E6;
}
#highcontrast-gradient-chart stop {
stop-color: #79ECE4;
}
#tailwind-gradient-chart stop {
stop-color: #5A61F6;
}
#bootstrap5-gradient-chart stop {
stop-color: #6355C7;
}
#material-dark-gradient-chart stop {
stop-color: #9ECB08;
}
#fabric-dark-gradient-chart stop {
stop-color: #4472c4;
}
#bootstrap-dark-gradient-chart stop {
stop-color: #a16ee5;
}
#tailwind-dark-gradient-chart stop {
stop-color: #8B5CF6;
}
#bootstrap5-dark-gradient-chart stop {
stop-color: #8F80F4;
}
#material3-gradient-chart stop {
stop-color: #6355C7;
}
#material3-dark-gradient-chart stop {
stop-color: #4EAAFF;
}
.chart-gradient stop[offset="0"] {
stop-opacity: 0.9;
}
.chart-gradient stop[offset="1"] {
stop-opacity: 0.3;
}
`;
let themes: string[] = ['bootstrap5', 'bootstrap5dark', 'tailwind', 'tailwinddark', 'material', 'materialdark', 'bootstrap4', 'bootstrap', 'bootstrapdark', 'fabric', 'fabricdark', 'highcontrast', 'fluent', 'fluentdark', 'material3', 'material3dark'];
let borderColor: string[] = ['#6355C7', '#8F80F4', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4', '#1AC9E6', '#1AC9E6', '#6355C7', '#4EAAFF'];
const Performance = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let series1: Object[] = [];
let point1: Object;
let pts;
let value = 0;
for (pts = 0; pts < 100000; pts++) {
if (pts % 3 == 0) {
value -= (Math.random() * (100) / 3) * 4;
}
else if (pts % 2 == 0) {
value += (Math.random() * (100) / 3) * 4;
}
if (value < 0) {
value = value * -1;
}
if (value >= 12000) {
value = Math.floor(Math.random() * 11000) + 1000;
}
point1 = { x: new Date(2005, 1, 1).setHours(pts), y: value };
series1.push(point1);
}
args.chart.series[0].dataSource = series1;
args.chart.series[0].xName = 'x';
args.chart.series[0].yName = 'y';
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as ChartTheme;
args.chart.series[0].border.color = borderColor[themes.indexOf(args.chart.theme.toLowerCase())];
args.chart.series[0].fill = 'url(#' + selectedTheme.toLowerCase() + '-gradient-chart)';
args.chart.series[0].border = { width: 2, color: borderColor[themes.indexOf(args.chart.theme.toLowerCase())] }
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ intervalType: 'Years', valueType: 'DateTime', edgeLabelPlacement:'Shift', title: 'Years', majorGridLines: {width: 0} }} primaryYAxis={{ interval: 2000, minimum: 0, maximum: 12000, title: 'Values', lineStyle: { width: 0 }, majorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 } }} legendSettings={{ visible: false }} title="Chart with 100k points" width={Browser.isDevice ? '100%' : '75%'} loaded={onChartLoad.bind(this)} load={load.bind(this)} >
<Inject services={[AreaSeries, DateTime, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective name='Series1' type='Area' />
</SeriesCollectionDirective>
</ChartComponent>
<svg style={{ height: '0' }}>
<defs>
<linearGradient id="material-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="fabric-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="bootstrap-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="bootstrap4-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="highcontrast-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="tailwind-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="bootstrap5-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="material-dark-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="fabric-dark-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="bootstrap-dark-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="tailwind-dark-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="bootstrap5-dark-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="fluent-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="fluent-dark-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="material3-gradient-chart" style={{ opacity: 0.75}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="material3-dark-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
</defs>
</svg>
</div>
<div id="action-description">
<p>This sample demonstrates the performance of React Charts rendering 100K data points.</p>
</div>
<div id="description">
<p>Charts includes several data-rendering optimizations to achieve the best possible performance when plotting large volumes of data and handling high-frequency, real-time data. In this demo, an area series is rendered with 100K points.</p>
</div>
</div>
)
}
/**
* Sample for Chart performance
*/
import * as React from "react";
import { useEffect } from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AreaSeries, ILoadedEventArgs, ChartTheme, DateTime, Legend } from '@syncfusion/ej2-react-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
import { Browser } from '@syncfusion/ej2-base';
const SAMPLE_CSS = `
#material-gradient-chart stop {
stop-color: #00bdae;
}
#fabric-gradient-chart stop {
stop-color: #4472c4;
}
#bootstrap-gradient-chart stop {
stop-color: #a16ee5;
}
#bootstrap4-gradient-chart stop {
stop-color: #a16ee5;
}
#fluent-gradient-chart stop {
stop-color: #1AC9E6;
}
#fluent-dark-gradient-chart stop {
stop-color: #1AC9E6;
}
#highcontrast-gradient-chart stop {
stop-color: #79ECE4;
}
#tailwind-gradient-chart stop {
stop-color: #5A61F6;
}
#bootstrap5-gradient-chart stop {
stop-color: #6355C7;
}
#material-dark-gradient-chart stop {
stop-color: #9ECB08;
}
#fabric-dark-gradient-chart stop {
stop-color: #4472c4;
}
#bootstrap-dark-gradient-chart stop {
stop-color: #a16ee5;
}
#tailwind-dark-gradient-chart stop {
stop-color: #8B5CF6;
}
#bootstrap5-dark-gradient-chart stop {
stop-color: #8F80F4;
}
#material3-gradient-chart stop {
stop-color: #6355C7;
}
#material3-dark-gradient-chart stop {
stop-color: #4EAAFF;
}
.chart-gradient stop[offset="0"] {
stop-opacity: 0.9;
}
.chart-gradient stop[offset="1"] {
stop-opacity: 0.3;
}
`;
let themes: string[] = ['bootstrap5', 'bootstrap5dark', 'tailwind', 'tailwinddark', 'material', 'materialdark', 'bootstrap4', 'bootstrap', 'bootstrapdark', 'fabric', 'fabricdark', 'highcontrast', 'fluent', 'fluentdark', 'material3', 'material3dark'];
let borderColor: string[] = ['#6355C7', '#8F80F4', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4', '#1AC9E6', '#1AC9E6', '#6355C7', '#4EAAFF'];
const Performance = () => {
useEffect(() => {
updateSampleSection();
}, [])
const onChartLoad = (args: ILoadedEventArgs): void => {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
};
const load = (args: ILoadedEventArgs): void => {
let series1: Object[] = [];
let point1: Object;
let pts;
let value = 0;
for (pts = 0; pts < 100000; pts++) {
if (pts % 3 == 0) {
value -= (Math.random() * (100) / 3) * 4;
}
else if (pts % 2 == 0) {
value += (Math.random() * (100) / 3) * 4;
}
if (value < 0) {
value = value * -1;
}
if (value >= 12000) {
value = Math.floor(Math.random() * 11000) + 1000;
}
point1 = { x: new Date(2005, 1, 1).setHours(pts), y: value };
series1.push(point1);
}
args.chart.series[0].dataSource = series1;
args.chart.series[0].xName = 'x';
args.chart.series[0].yName = 'y';
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast') as ChartTheme;
args.chart.series[0].border.color = borderColor[themes.indexOf(args.chart.theme.toLowerCase())];
args.chart.series[0].fill = 'url(#' + selectedTheme.toLowerCase() + '-gradient-chart)';
args.chart.series[0].border = { width: 2, color: borderColor[themes.indexOf(args.chart.theme.toLowerCase())] }
};
return (
<div className='control-pane'>
<style>{SAMPLE_CSS}</style>
<div className='control-section'>
<ChartComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{ intervalType: 'Years', valueType: 'DateTime', edgeLabelPlacement:'Shift', title: 'Years', majorGridLines: {width: 0} }} primaryYAxis={{ interval: 2000, minimum: 0, maximum: 12000, title: 'Values', lineStyle: { width: 0 }, majorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 } }} legendSettings={{ visible: false }} title="Chart with 100k points" width={Browser.isDevice ? '100%' : '75%'} loaded={onChartLoad.bind(this)} load={load.bind(this)} >
<Inject services={[AreaSeries, DateTime, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective name='Series1' type='Area' />
</SeriesCollectionDirective>
</ChartComponent>
<svg style={{ height: '0' }}>
<defs>
<linearGradient id="material-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="fabric-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="bootstrap-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="bootstrap4-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="highcontrast-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="tailwind-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="bootstrap5-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="material-dark-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="fabric-dark-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="bootstrap-dark-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="tailwind-dark-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="bootstrap5-dark-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="fluent-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="fluent-dark-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="material3-gradient-chart" style={{ opacity: 0.75}} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="material3-dark-gradient-chart" style={{ opacity: 0.75 }} className="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
</defs>
</svg>
</div>
<div id="action-description">
<p>This sample demonstrates the performance of React Charts rendering 100K data points.</p>
</div>
<div id="description">
<p>Charts includes several data-rendering optimizations to achieve the best possible performance when plotting large volumes of data and handling high-frequency, real-time data. In this demo, an area series is rendered with 100K points.</p>
</div>
</div>
)
}
export default Performance;

154
src/chart/pie-annotation-functional.tsx
Просмотреть файл

@ -1,154 +0,0 @@
/**
* Sample for Annotation in Chart
*/
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ILoadedEventArgs, AnnotationsDirective, AnnotationDirective,
StackingColumnSeries, Category, Legend, Selection, IMouseEventArgs,
IAccLoadedEventArgs, ChartAnnotation, AccumulationChart, AccumulationDataLabel, IAnimationCompleteEventArgs,
AccumulationTheme, ChartTheme, IAccResizeEventArgs
} from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { updateSampleSection } from '../common/sample-base';
AccumulationChart.Inject(AccumulationChart, AccumulationDataLabel);
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
export let dataSource: any[] = [
{ x: '2014', y0: 51, y1: 77, y2: 66, y3: 34 }, { x: '2015', y0: 67, y1: 49, y2: 19, y3: 38 },
{ x: '2016', y0: 143, y1: 121, y2: 91, y3: 44 }, { x: '2017', y0: 19, y1: 28, y2: 65, y3: 51 },
{ x: '2018', y0: 30, y1: 66, y2: 32, y3: 61 }, { x: '2019', y0: 189, y1: 128, y2: 122, y3: 76 },
{ x: '2020', y0: 72, y1: 97, y2: 65, y3: 82 }
];
export let pieDataSource: any[] = [
{ x: 'UK', y: 111 }, { x: 'Germany', y: 76 },
{ x: 'France', y: 66 }, { x: 'Italy', y: 34 }
];
function PieAnnotation() {
React.useEffect(() => {
updateSampleSection();
}, [])
let chart: ChartComponent;
let pie: AccumulationChart;
let isRender: boolean;
return (
<div className='control-pane'>
<style>
{SAMPLE_CSS}
</style>
<div className='control-section'>
<ChartComponent id='charts' ref={chart => chart = chart} style={{ textAlign: "center" }}
primaryXAxis={{ title: 'Years', valueType: 'Category', majorGridLines: { width: 0 }, minorGridLines: { width: 1 }, minorTickLines: { width: 1 }, interval: 1, labelIntersectAction: 'Rotate45', }}
primaryYAxis={{ title: 'Sales', lineStyle: { width: 0 }, minimum: 0, maximum: 700, interval: 100, majorGridLines: { width: 1 }, minorGridLines: { width: 1 }, minorTickLines: { width: 0 }, labelFormat: '{value}B', majorTickLines: { width: 0 } }}
chartArea={{ border: { width: 0 } }}
load={load.bind(this)}
chartMouseUp={chartMouseUp.bind(this)}
animationComplete={animationComplete.bind(this)}
loaded={onChartLoad.bind(this)}
title='Mobile Game Market by Country'
selectionMode='Cluster'
selectedDataIndexes={[{ series: 0, point: 0 }]}
legendSettings={{ visible: false }}
width={Browser.isDevice ? '100%' : '60%'}
tooltip={{ enable: true, shared: true }}
>
<Inject services={[StackingColumnSeries, Category, Legend, Selection, ChartAnnotation]} />
<AnnotationsDirective>
<AnnotationDirective content='<div id="chart_annotation" style={{width:"200px"; height:"200px"}}></div>' x='20%' y='25%' coordinateUnits='Pixel' region='Series'>
</AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={dataSource} xName='x' yName='y0' width={2} name='UK' type='StackingColumn'></SeriesDirective>
<SeriesDirective dataSource={dataSource} xName='x' yName='y1' width={2} name='Germany' type='StackingColumn'></SeriesDirective>
<SeriesDirective dataSource={dataSource} xName='x' yName='y2' width={2} name='France' type='StackingColumn'></SeriesDirective>
<SeriesDirective dataSource={dataSource} xName='x' yName='y3' width={2} name='Italy ' type='StackingColumn'></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
<div style={{ float: 'right', marginRight: '10px' }}>
</div>
</div>
<div id="action-description">
<p>
This sample demonstrates annotation feature. Accumulation chart is placed in cartesian chart by using annotation.
</p>
</div>
<div id="description"><p>
In this example, you can see how to render and configure annotation feature in chart. We have used a pie chart to depict
the sales for each year using annotation support, while selecting a particular year from the StackedColumn series,
the respective data's are showed in pie. An annotation can hold any html element as its content, here we have added
the Pie chart as its content.
</p>
<br />
<p style={{ "fontWeight": 500 }}>Injecting Module</p>
<p>
Chart component features are segregated into individual feature-wise modules. To annotation feature in chart, we need to
inject
<code>ChartAnnotation</code> module into <code>services</code>.
</p>
<p>
More information on the chart annotation can be found in this <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-chartAnnotation.html">documentation section</a>.
</p>
</div>
</div>
)
function onChartLoad(args: ILoadedEventArgs): void {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
if (isRender) {
pie.destroy();
pie = new AccumulationChart({
background: 'transparent',
series: [{
radius: '65%', animation: { enable: false },
dataSource: pieDataSource,
xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', font: { color: 'white' } },
}],
load: (args: IAccLoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)) as AccumulationTheme;
},
legendSettings: { visible: false }
});
pie.appendTo('#chart_annotation');
}
};
function load(args: ILoadedEventArgs): void {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
function chartMouseUp(args: IMouseEventArgs) {
if (args.target.indexOf('Point') > -1 && args.target.indexOf('annotation') === -1) {
let pointIndex: number = parseInt(args.target[args.target.length - 1], 10);
pieDataSource = [];
for (let series of chart.visibleSeries) {
pieDataSource.push({ 'x': series.name, 'y': series.points[pointIndex].y });
}
pie.series[0].dataSource = pieDataSource;
pie.series[0].xName = 'x'; pie.series[0].yName = 'y';
pie.refresh();
}
}
function animationComplete(args: IAnimationCompleteEventArgs) {
isRender = true;
let selectedTheme: string = location.hash.split('/')[1];
pie = new AccumulationChart({
background: 'transparent',
series: [{
radius: '65%', animation: { enable: false },
dataSource: pieDataSource,
xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', font: { color: 'white' } },
}],
legendSettings: { visible: false },
theme: (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)) as AccumulationTheme,
resized: (args: IAccResizeEventArgs) => {
location.reload();
}
});
pie.appendTo('#chart_annotation');
}
}
export default PieAnnotation;

155
src/chart/pie-annotation.tsx
Просмотреть файл

@ -1,155 +0,0 @@
/**
* Sample for Annotation in Chart
*/
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ILoadedEventArgs, AnnotationsDirective, AnnotationDirective,
StackingColumnSeries, Category, Legend, Selection, IMouseEventArgs,
IAccLoadedEventArgs, ChartAnnotation, AccumulationChart, AccumulationDataLabel, IAnimationCompleteEventArgs,
AccumulationTheme, ChartTheme, IAccResizeEventArgs
} from '@syncfusion/ej2-react-charts';
import { Browser } from '@syncfusion/ej2-base';
import { SampleBase } from '../common/sample-base';
AccumulationChart.Inject(AccumulationChart, AccumulationDataLabel);
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}`;
export let dataSource: any[] = [
{ x: '2014', y0: 51, y1: 77, y2: 66, y3: 34 }, { x: '2015', y0: 67, y1: 49, y2: 19, y3: 38 },
{ x: '2016', y0: 143, y1: 121, y2: 91, y3: 44 }, { x: '2017', y0: 19, y1: 28, y2: 65, y3: 51 },
{ x: '2018', y0: 30, y1: 66, y2: 32, y3: 61 }, { x: '2019', y0: 189, y1: 128, y2: 122, y3: 76 },
{ x: '2020', y0: 72, y1: 97, y2: 65, y3: 82 }
];
export let pieDataSource: any[] = [
{ x: 'UK', y: 111 }, { x: 'Germany', y: 76 },
{ x: 'France', y: 66 }, { x: 'Italy', y: 34 }
];
export class PieAnnotation extends SampleBase<{}, {}> {
private chart: ChartComponent;
private pie: AccumulationChart;
private isRender: boolean;
render() {
return (
<div className='control-pane'>
<style>
{SAMPLE_CSS}
</style>
<div className='control-section'>
<ChartComponent id='charts' ref={chart => this.chart = chart} style={{ textAlign: "center" }}
primaryXAxis={{ title: 'Years', valueType: 'Category', majorGridLines: { width: 0 }, minorGridLines: { width: 1 }, minorTickLines: { width: 1 }, interval: 1, labelIntersectAction: 'Rotate45', }}
primaryYAxis={{ title: 'Sales', lineStyle: { width: 0 }, minimum: 0, maximum: 700, interval: 100, majorGridLines: { width: 1 }, minorGridLines: { width: 1 }, minorTickLines: { width: 0 }, labelFormat: '{value}B', majorTickLines: { width: 0 } }}
chartArea={{ border: { width: 0 } }}
load={this.load.bind(this)}
chartMouseUp={this.chartMouseUp.bind(this)}
animationComplete={this.animationComplete.bind(this)}
loaded={this.onChartLoad.bind(this)}
title='Mobile Game Market by Country'
selectionMode='Cluster'
selectedDataIndexes={[{ series: 0, point: 0 }]}
legendSettings={{ visible: false }}
width={Browser.isDevice ? '100%' : '60%'}
tooltip={{ enable: true, shared: true }}
>
<Inject services={[StackingColumnSeries, Category, Legend, Selection, ChartAnnotation]} />
<AnnotationsDirective>
<AnnotationDirective content='<div id="chart_annotation" style={{width:"200px"; height:"200px"}}></div>' x='20%' y='25%' coordinateUnits='Pixel' region='Series'>
</AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={dataSource} xName='x' yName='y0' width={2} name='UK' type='StackingColumn'></SeriesDirective>
<SeriesDirective dataSource={dataSource} xName='x' yName='y1' width={2} name='Germany' type='StackingColumn'></SeriesDirective>
<SeriesDirective dataSource={dataSource} xName='x' yName='y2' width={2} name='France' type='StackingColumn'></SeriesDirective>
<SeriesDirective dataSource={dataSource} xName='x' yName='y3' width={2} name='Italy ' type='StackingColumn'></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
<div style={{ float: 'right', marginRight: '10px' }}>
</div>
</div>
<div id="action-description">
<p>
This sample demonstrates annotation feature. Accumulation chart is placed in cartesian chart by using annotation.
</p>
</div>
<div id="description"><p>
In this example, you can see how to render and configure annotation feature in chart. We have used a pie chart to depict
the sales for each year using annotation support, while selecting a particular year from the StackedColumn series,
the respective data's are showed in pie. An annotation can hold any html element as its content, here we have added
the Pie chart as its content.
</p>
<br />
<p style={{ "fontWeight": 500 }}>Injecting Module</p>
<p>
Chart component features are segregated into individual feature-wise modules. To annotation feature in chart, we need to
inject
<code>ChartAnnotation</code> module into <code>services</code>.
</p>
<p>
More information on the chart annotation can be found in this
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-chartAnnotation.html">documentation section</a>.
</p>
</div>
</div>
)
}
public onChartLoad(args: ILoadedEventArgs): void {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
if (this.isRender) {
this.pie.destroy();
this.pie = new AccumulationChart({
background: 'transparent',
series: [{
radius: '65%', animation: { enable: false },
dataSource: pieDataSource,
xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', font: { color: 'white' } },
}],
load: (args: IAccLoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)) as AccumulationTheme;
},
legendSettings: { visible: false }
});
this.pie.appendTo('#chart_annotation');
}
};
public load(args: ILoadedEventArgs): void {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i,'Contrast') as ChartTheme;
};
public chartMouseUp(args: IMouseEventArgs) {
if (args.target.indexOf('Point') > -1 && args.target.indexOf('annotation') === -1) {
let pointIndex: number = parseInt(args.target[args.target.length - 1], 10);
pieDataSource = [];
for (let series of this.chart.visibleSeries) {
pieDataSource.push({ 'x': series.name, 'y': series.points[pointIndex].y });
}
this.pie.series[0].dataSource = pieDataSource;
this.pie.series[0].xName = 'x'; this.pie.series[0].yName = 'y';
this.pie.refresh();
}
}
public animationComplete(args: IAnimationCompleteEventArgs) {
this.isRender = true;
let selectedTheme: string = location.hash.split('/')[1];
this.pie = new AccumulationChart({
background: 'transparent',
series: [{
radius: '65%', animation: { enable: false },
dataSource: pieDataSource,
xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', font: { color: 'white' } },
}],
legendSettings: { visible: false },
theme: (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)) as AccumulationTheme,
resized: (args: IAccResizeEventArgs) => {
location.reload();
}
});
this.pie.appendTo('#chart_annotation');
}
}

Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше