Skip to content

101780: Improved react chart UG against AI #144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BuvanaSathasivam merged 1 commit into from
Aug 27, 2026
Merged

101780: Improved react chart UG against AI #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs2/app/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';

Expand Down
4 changes: 2 additions & 2 deletions code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs3/app/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTimeCategory, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTimeCategory, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { dateTimeCategoryData } from './datasource';
function App() {
const primaryxAxis = { valueType: 'DateTimeCategory', skeleton: 'Ed' };
const primaryyAxis = { title: 'Sales Amount in millions(USD)' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTimeCategory]}/>
<Inject services={[Legend, Tooltip, DataLabel, LineSeries, DateTimeCategory]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={dateTimeCategoryData} xName='x' yName='y' name='Sales' type='Line'>
</SeriesDirective>
Expand Down
2 changes: 1 addition & 1 deletion code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs5/app/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { dateTimeData } from './datasource';
function App() {
const primaryxAxis = { valueType: 'DateTime', title: 'Sales Across Years', intervalType: 'Years' };
const primaryxAxis = { valueType: 'DateTime', title: 'Sales Across Years', interval: 2, intervalType: 'Years' };
const primaryyAxis = { title: 'Sales Amount in millions(USD)' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, DateTime]}/>
Expand Down
2 changes: 1 addition & 1 deletion code-snippet/chart-sdk/react/charts/code-path/axis/datetime-cs5/app/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { dateTimeData } from './datasource';

function App() {

const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Sales Across Years', intervalType: 'Years' };
const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Sales Across Years', interval: 2, intervalType: 'Years' };
const primaryyAxis: AxisModel = { title: 'Sales Amount in millions(USD)' };

return <ChartComponent id='charts'
Expand Down
8 changes: 6 additions & 2 deletions code-snippet/chart-sdk/react/charts/code-path/axis/double-cs2/app/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,18 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { setCurrencyCode } from '@syncfusion/ej2-base';
import { loadCldr, setCurrencyCode } from '@syncfusion/ej2-base';
// For non en-US cultures, install @syncfusion/ej2-cldr-data and load the CLDR JSON:
// import * as currencyData from '@syncfusion/ej2-cldr-data/main/en/currencies.json';
// import * as numbersData from '@syncfusion/ej2-cldr-data/main/en/numbers.json';
// loadCldr(currencyData, numbersData);
import { data } from './datasource';
setCurrencyCode('EUR');
function App() {
const primaryxAxis = { edgeLabelPlacement: 'Shift', title: 'Years' };
const primaryyAxis = { labelFormat: 'c', title: 'Sales Amount in Millions' };
const marker = { dataLabel: { visible: true } };
const tooltip = { enable: true, format: '${point.x} : ${point.y}' };
const tooltip = { enable: true, header: '${point.x}', format: '${point.y}' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison' tooltip={tooltip}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel]}/>
<SeriesCollectionDirective>
Expand Down
10 changes: 7 additions & 3 deletions code-snippet/chart-sdk/react/charts/code-path/axis/double-cs2/app/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,14 @@

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
ColumnSeries, Legend, Tooltip, DataLabel, TooltipSettingsModel, AxisModel }
from'@syncfusion/ej2-react-charts';
import { loadCldr, setCurrencyCode } from '@syncfusion/ej2-base';
import { loadCldr, setCurrencyCode } from '@syncfusion/ej2-base';
// For non en-US cultures, install @syncfusion/ej2-cldr-data and load the CLDR JSON:
// import * as currencyData from '@syncfusion/ej2-cldr-data/main/en/currencies.json';
// import * as numbersData from '@syncfusion/ej2-cldr-data/main/en/numbers.json';
// loadCldr(currencyData, numbersData);
import { data } from './datasource';
setCurrencyCode('EUR');

Expand All @@ -14,7 +18,7 @@ function App() {
const primaryxAxis: AxisModel = { edgeLabelPlacement: 'Shift', title: 'Years' };
const primaryyAxis: AxisModel = { labelFormat: 'c', title: 'Sales Amount in Millions' };
const marker = { dataLabel: { visible: true } };
const tooltip: TooltipSettingsModel = { enable: true, format: '${point.x} : ${point.y}' };
const tooltip: TooltipSettingsModel = { enable: true, header: '${point.x}', format: '${point.y}' };

return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
Expand Down
6 changes: 3 additions & 3 deletions code-snippet/chart-sdk/react/charts/code-path/axis/log-cs1/app/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { logData } from './datasource';
function App() {
const primaryxAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryyAxis = { valueType: 'Logarithmic', title: 'Profit' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Product X Growth [1995-2005]'>
const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit' };
return <ChartComponent id='charts' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} title='Product X Growth [1995-2005]'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={logData} xName='x' yName='y' name='Product X' type='Line'>
Expand Down
12 changes: 6 additions & 6 deletions code-snippet/chart-sdk/react/charts/code-path/axis/log-cs1/app/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { logData } from './datasource';

function App() {
const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryyAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit' };
const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit' };

return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
primaryXAxis={primaryXAxis}
primaryYAxis={primaryYAxis}
title='Product X Growth [1995-2005]'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]} />
<SeriesCollectionDirective>
Expand Down
6 changes: 3 additions & 3 deletions code-snippet/chart-sdk/react/charts/code-path/axis/log-cs2/app/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { logData } from './datasource';
function App() {
const primaryxAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryyAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Product X Growth [1995-2005]'>
const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000 };
return <ChartComponent id='charts' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} title='Product X Growth [1995-2005]'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={logData} xName='x' yName='y' name='Product X' type='Line'>
Expand Down
12 changes: 6 additions & 6 deletions code-snippet/chart-sdk/react/charts/code-path/axis/log-cs2/app/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { logData } from './datasource';
function App() {

const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryyAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000 };
const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000 };

return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
primaryXAxis={primaryXAxis}
primaryYAxis={primaryYAxis}
title='Product X Growth [1995-2005]'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]} />
<SeriesCollectionDirective>
Expand Down
6 changes: 3 additions & 3 deletions code-snippet/chart-sdk/react/charts/code-path/axis/log-cs3/app/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { logData } from './datasource';
function App() {
const primaryxAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryyAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000, logBase: 2 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Product X Growth [1995-2005]'>
const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, logBase: 2 };
return <ChartComponent id='charts' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} title='Product X Growth [1995-2005]'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={logData} xName='x' yName='y' name='Product X' type='Line'>
Expand Down
12 changes: 6 additions & 6 deletions code-snippet/chart-sdk/react/charts/code-path/axis/log-cs3/app/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { logData } from './datasource';
function App() {

const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryyAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000, logBase: 2 };
const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, logBase: 2 };

return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
primaryXAxis={primaryXAxis}
primaryYAxis={primaryYAxis}
title='Product X Growth [1995-2005]'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]} />
<SeriesCollectionDirective>
Expand Down
6 changes: 3 additions & 3 deletions code-snippet/chart-sdk/react/charts/code-path/axis/log-cs4/app/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { logData } from './datasource';
function App() {
const primaryxAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryyAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000, interval: 2 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Product X Growth [1995-2005]'>
const primaryXAxis = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryYAxis = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, interval: 2 };
return <ChartComponent id='charts' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} title='Product X Growth [1995-2005]'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={logData} xName='x' yName='y' name='Product X' type='Line'>
Expand Down
12 changes: 6 additions & 6 deletions code-snippet/chart-sdk/react/charts/code-path/axis/log-cs4/app/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
ColumnSeries, Legend, DateTime, Logarithmic, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { logData } from './datasource';
function App() {

const primaryxAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryyAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 100, maximum: 10000, interval: 2 };
const primaryXAxis: AxisModel = { valueType: 'DateTime', title: 'Years', labelFormat: 'y' };
const primaryYAxis: AxisModel = { valueType: 'Logarithmic', title: 'Profit', minimum: 10, maximum: 10000, interval: 2 };

return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
primaryXAxis={primaryXAxis}
primaryYAxis={primaryYAxis}
title='Product X Growth [1995-2005]'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Logarithmic, LineSeries, DateTime]} />
<SeriesCollectionDirective>
Expand Down
8 changes: 8 additions & 0 deletions code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/datasource.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export let data = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
8 changes: 8 additions & 0 deletions code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/datasource.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export let data: Object[] = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
16 changes: 16 additions & 0 deletions code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, LineSeries, SeriesCollectionDirective, SeriesDirective, Tooltip } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} width='650' height='350'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='month' yName='sales' type='Column' name='Sales'/>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
23 changes: 23 additions & 0 deletions code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/app/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@


import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel,Category,ChartComponent, ColumnSeries, DataLabel,
Inject, Legend,LineSeries, SeriesCollectionDirective, SeriesDirective,
Tooltip} from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category' };

return <ChartComponent id='charts' primaryXAxis={primaryxAxis} width='650' height='350'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='month' yName='sales' type='Column' name='Sales' />
</SeriesCollectionDirective>
</ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));


34 changes: 34 additions & 0 deletions code-snippet/chart-sdk/react/charts/code-path/dimensions/size-cs1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>Syncfusion React Chart-Add DataSource</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#charts {
height : 350px;
display: block;
}
</style>
</head>

<body>
<div id='charts'>
<div id='loader'>Loading....</div>
</div>
</body>

</html>
Loading